OmniAICreator/Qiita-1.07M huggingface dataset:
CSSで3Dのボックスを作る手順

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="dywoXWN" data-user="jikkensya" style="height: 500; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/jikkensya/pen/dywoXWN">
  Just reviewing how 3d works in css</a> by FrontendKanazawa (<a href="https://codepen.io/jikkensya">@jikkensya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

CSSの3D表現の仕方をよく忘れるのですぐに思い出せるようにキューブを作る手順をまとめます。

## 1. HTML
- 描画する範囲 : #scene
- 横面 : .face.side
- 上下の面 : .face.top, .face.bottom
``` html
<div id="scene">
  <div class="cube">
    <div class="face side">1</div>
    <div class="face side">2</div>
    <div class="face side">3</div>
    <div class="face side">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</div>
```
## 2.CSSのベース
```scss
$cube_width:70vh;
#scene{
  perspective:$cube_width;
  width:$cube_width; height:$cube_width;
}
.cube{
  width:100%; height:100%;
  position:relative;
  transform-style:preserve-3d;
  transform:translateZ($cube_width / 2 * -1);
}
.face{
  position:absolute;
  width:$cube_width; height:$cube_width;
}
```
#### ポイント
1. #sceneにperspectiveを設定する。codepenのサンプルで値を変更してみると分かりやすいと思います。
1. .cubeのwidth,heightを100%にしてpositionをreleativeにする。.faceのpositionをabsoluteにする。
1. .cubeをtranslateZで後ろに下げる。
1. .cubeのtransform-styleをpreserve-3dにすることで.cubeをtransformした際に小要素の.faceにも影響を与えることが出来ます。<br />codepenのサンプルでは.cubeをjavascriptで回転させていますが、.cubeのpreserve-3dを消すと正常に動作しなくなります。

## 3.CSSで面の移動
```scss
//横面
.side:nth-of-type(1){
  transform:
    translateZ($cube_width / 2);
}
.side:nth-of-type(2){
  transform: 
    rotateY(90deg) 
    translateZ($cube_width/2);
}
.side:nth-of-type(3){
  transform: 
    rotateY(180deg) 
    translateZ($cube_width/2);
}
.side:nth-of-type(4){
  transform: 
    rotateY(-90deg) 
    translateZ($cube_width/2);
}

//上下
.top{
  transform:
    rotateX(-90deg)
    translateZ($cube_width/2 * -1);
}
.bottom{
  transform:
    rotateX(90deg)
    translateZ($cube_width/2 * -1);
}
```
#### ポイント
transformでrotateした後にtranslateZを使います。上下の面でtranslateZをしているのに上下に動くのが変な感じがしますが、初めのrotateXでz軸が回転した後であることを認識すると納得できます。
Laravelのmigrationファイル名をよりシンプルに

## migrationファイル名について

- Laravelのmigrationファイルは、ファイル名順に上から実行される
- migrationファイル名は、デフォルトだとランダムな数字がファイル名に付与されるが、ここを任意の数字に変えておくと視認性が増す

### 【例】

```
2023_08_20_000001_create_test1_table.php
2023_08_20_000002_create_test2_table.php
2023_08_20_000003_create_test3_table.php
```

☆ 同日の日付部分の後ろ（2023_08_20_ に続く部分）は、`実行したい順序の番号` を付与しておくのがおすすめ
【Laravel】独自のCSSファイルを読み込む方法

## publicフォルダ内にCSSファイルを格納する
①publicフォルダ内にcssフォルダを作成する。
②cssフォルダ内に、`style.css`を作成する。

## viewでcssファイルを読み込む
○○.blade.phpのheadタグ内に以下のように記述する。
```○○.blade.php
<link rel="stylesheet" href="{{ asset('/css/style.css') }}">
```
assetヘルパー：publicフォルダ内のファイルにアクセスできる（URLを取得する）。引数はpublicフォルダをルートにしたパスを記述する。

## resourcesフォルダにcssファイルを置かない理由
resourcesフォルダに置くファイルは、外部に公開されないファイルを置くため。

・resourcesフォルダ：外部に公開されないコンパイル前のファイルを置く。
・publicフォルダ：外部からアクセスしても問題ないファイルを置く。（例：通常のcssファイル、jsファイル、画像ファイルなど）


## 特定のファイルだけcssファイルを読み込む方法
①親ビュー(resources/views/layouts/app.blade.php)に以下のように記述する。
```app.blade.php
@stack('styles')  // 'styles'は任意の文字列
```
※ファイルを読み込みたい場所に記述する。
例：cssファイル→headタグ内
　　jsファイル→bodyタグ内の一番最後

②子ビューに以下のように記述する。（例：index.blade.phpなど）
```index.blade.php
@push(`styles`)  // 'styles'は@stack()の引数に指定した文字列を記述する
    <link rel="stylesheet" href="{{ asset('/css/style.css') }}"
@endpush
```
※記述する位置は`@extends()`と`@section()`の間。
非英語話者がKaggleディスカッションで金メダルを獲得する方法

# 非英語話者がKaggleディスカッションで金メダルを獲得する方法


## 概要
[この投稿](https://www.kaggle.com/competitions/cafa-5-protein-function-prediction/discussion/433603)でディスカッションの金メダルを獲得することができました！非常に嬉しいので、非英語話者がKaggleディスカッションで金メダルを獲得する方法を共有したいと思います。実際、この投稿は以下のステップと心得に基づいて投稿されました。

## ステップ
1. 内容をマークダウン記法などの構造化された文章で書く
2. 生成AI（私はChatGPT4を使用）などで英語のマークダウン記法に変換
3. 翻訳ソフトで母語に戻す＆自分でも読んで内容に誤りが無いか確認
4. 問題なければ投稿

## 心得
- 構造化された文章を書きましょう。マークダウン記法で書くのがおすすめです
- 文法や文章の技巧よりも内容が大切です。知見の共有やソリューションの共有などはVoteをもらいやすいと思います
- あなたの国以外の人々の多くも実はノン英語ネイティブです。必要以上に小さなミスを恐れないでください


#### Links
- この記事の英語バージョンは[こちらのKaggleのディスカッション](https://www.kaggle.com/discussions/general/433820)でも投稿しています
Slack APIのusers.lookupByEmailでinvalid_authが出る場合の対処法


## 前提
Slack Appのインストールは済んでいる前提です

## 現象
```
{
    "ok": false,
    "error": "invalid_auth"
}
```
が返却される

## 対処法
①OAuthのスコープに`users:read.email`を追加
・NGの例：`users:read`

②トークンを渡すやり方を以下にする
・GETメソッドならAuthorization headerで指定
・POSTメソッドならボディ部で指定
・NGの例：https://slack.com/api/users.lookupByEmail?email=[メールアドレス]&token=[取得したトークン]
でリクエストを投げている


## つまづきポイント
users.lookupByEmailの古い仕様だと以下になっていたので、↑の①、②の対応としてください
・OAuthのスコープが`users:read`でOKになっていた
・APIの叩き方が以下だった
https://slack.com/api/users.lookupByEmail?email=[メールアドレス]&token=[取得したトークン]


## 参考ドキュメント
https://api.slack.com/methods/users.lookupByEmail
【随時更新】個人的な変数の命名方法メモ

# はじめに
変数名の命名方法についてはネット上にも溢れかえっているし、各社のコーディングルールで定められている場合も多いだろう。  
納得できる部分も多いし、そこから学んだことも多いが、今後の自分の命名方法を統一するためにも本記事にまとめてみる。  
あくまでも個人の意見であり、今後の経験によって考えが変わる部分もあると思うが、それはその都度更新することにする。  

なお、既にルールとして定められている命名規則があればそちらに従うべきである。  
仮にその命名規則に違和感があってもチームの共通認識のほうが重要だ。  
どうしても耐え難いものである場合は、改善提案として挙げてチーム内で議論する。

# 考え方
<dl>
    <dt>何のための変数なのか、適切な英名を付ける。</dt>
        <dd>他人が読んでも理解できるようにするのはもちろんのこと、誤字脱字の防止のためにも辞書を引いたり翻訳サービスを利用するのが良いだろう。
    <dt>その変数がどんな形式の値を保持しているのか（数値、文字列など）を一目でわかるようにする。</dt>
        <dd>具体的な型自体はIDEの機能でマウスカーソルなどを合わせると表示されることが多いが、一目でわかるというのはソースを読む側からしてみれば大きなメリットとなる。</dd>
</dl>

英名を考えるときには各種辞典サイトや、Google翻訳やDeepLなどの一般的な知名度がある翻訳サービスの他にも、[codic](https://codic.jp)というサービスもある。  
こちらはエンジニア向けと謳っているだけあって、より変数名・メソッド名らしく翻訳してくれるのでおすすめだ。  
  
# 変数名の命名規則
以下に、形式ごとの具体例を記載する。  

## 数値
- **`num`や`cnt`を末尾につける。**  
`cnt`はカウントアップや上限などの「回数」を保持するイメージ。  
その他は基本的に`num`を付ける。  
:::note info
numはnumeric（数値）とnumber（番号）どちらの意味もある。
英語としては異なるが、変数名としては纏めてしまって良いと考える。
:::

```javascript:例
retryLimitCnt // リトライ上限回数
weekdayNum //週番号
```

## 真偽値
- **`is`を先頭につける。**  
基本的にこの形がベター。  
- **`has`、`contains`を先頭につける。**  
何かを持つ、含むといった状態を表現する変数であればこちらを使用する。  
- **`exists`を末尾につける。**  
存在するかを表現する変数ならこちら。
- **`can`を先頭につける。**  
可能であるかを表現する変数ならこちら。
:::note info
結論、どんな時にtrue/falseになるのかが分かれば良い。
:::
:::note warn
flagとつけるのは避けるべき。
フラグであることは分かっても、真偽の解釈が逆転してしまう可能性がある。
:::

```javascript:例
isValid // 有効である
hasToken // トークンを持っている
userExists // ユーザーが存在する
canWrite // 書き込み可能である
```

## 文字列
- **`str`,`name`を末尾につける**  
他の形式と紛らわしい場合にだけでも良い。  
userIdなど、そのままで文字列が入っている変数だとわかるなら特に付け足す必要はない。  

```javascript:例
dateFormatStr // 日付フォーマット用文字列
columnName // カラム名
```

## 日時
- **`DateTime`を末尾につける。**  
日付と時刻のどちらも保持するのであればこの形。  
- **`Date`や`Day`を末尾につける。**  
日付のみであればこちら。  
- **`Time`を末尾につける。**  
時刻のみであればこちら。  

```javascript:例
nowDateTime // 現在日時
targetDate // 対象日付
authTime // 認証時刻
```

## その他
配列なら`array`、リスト構造なら`list`、マップ構造なら`map`のように、何が入っているのかが分かる単語を末尾につければ良いと考える。  
独自クラスならクラス名をそのまま変数名にしてしまっても良いだろう。  

# よく使う & 忘れがちな単語集
個人的によく使うものや、意味やスペルを忘れがちな単語を下記に纏める。  

## セットで使う単語
| 単語① | 単語② | 意味① | 意味② |
| --- | --- | --- | --- |
| from | to | ～から | ～まで |
| first | last | 最初 | 最後 |
| min | max | 最小 | 最大 |
| start [^1] | stop | 開始 | 停止 |
| start [^1] | finish | 開始 | 完了 |
| begin [^1] | end | 開始 | 終了 |
| previous | next | 前 | 次 |
| before | after | 以前 | 以後 |
| open | close | 開く | 閉じる |
| success | fail | 成功 | 失敗 |
<!--
|  |  |  |  |
-->

[^1]:start、beginとstop、finish、endの違いについては[こちらのサイト](https://shinuwakaeng.com/kihontango-begin-start-end-finish-stop)が参考になる。

## 単体で使う単語
| 単語 | 意味 |
| --- | --- |
| authentication | 2者間認証 |
| certification | 3者間認証 |
| bulk | 一括 |
| type | 種類、区分 |
| current | 現在の |
<!--
|  |  |
-->
HTTPリクエストのheadersに指定できるパラメータ

HTTPリクエストのheadersに指定できる一般的なパラメータのメモ。
こんなのがあるんだ〜くらいのマインドです。

## どこに書くのか
Pythonのrequestsライブラリを使用して外部APIにGETリクエストを送信する例です。
~~~python
import requests

url = "https://example.com/api/endpoint"
# ↓ここ
headers = {
    "Host": "example.com",
    "User-Agent": "YourApp/1.0",
    "Authorization": "Bearer YOUR_ACCESS_TOKEN"
}

response = requests.get(url, headers=headers)
~~~

## User-Agent
クライアントアプリケーションやブラウザなどのユーザーエージェントの情報を示すヘッダー。サーバーにクライアントの種類やバージョンなどを通知する。
~~~ruby:例
"User-Agent": "YourApp/1.0"
~~~
「YourApp」はアプリケーション名で、「1.0」はアプリケーションのバージョン。

## Authorization
認証情報を含むヘッダー。主にトークンやBasic認証などの認証情報を伝える。
~~~ruby:例
"Authorization": "Bearer YOUR_ACCESS_TOKEN"
~~~
例はトークンベースの認証で、Bearerはトークンタイプを示し、その後にアクセストークンが続く。

## Content-Type
リクエストの本文（payload）のデータタイプを示すヘッダー。サーバーがリクエストを適切に処理するために使用される。
~~~ruby:例
"Content-Type": "application/json"
~~~
HTTPリクエストやレスポンスの中身がJSON形式のデータであることを明示している。

## Accept
クライアントが受け入れ可能なレスポンスのデータタイプを示すヘッダー。サーバーはこの情報をもとに適切なコンテンツを返す。
~~~ruby:例
"Accept": "application/json"
~~~
クライアントがこのヘッダーを使用して、サーバーに対して「JSON形式のデータを希望しています」という情報を提供している。

## Host
リクエストが送信される対象のホスト名を示すヘッダー。特に仮想ホスティング環境で重要。
~~~ruby:例
"Host": "example.com"
~~~
ここで指定されている値（example.com）は、リクエストが送信される対象のホスト名（ドメイン名）を示している。これにより、サーバーはリクエストを正しいコンテンツやエンドポイントに割り当てて処理できるようになる。

## Referer
リクエストが発生する前のURLを示すヘッダー。主にリンク元の情報をサーバーに提供する。
~~~ruby:例
"Referer": "https://example.com"
~~~
ここで指定されている値(https://example.com) は、リクエストが発生する前のURLを示している。これによってサーバーサイドは、リクエストがどのページやリソースから発生したかを知ることができる。

## Cookie
クライアントがサーバーに保存されたCookie情報を送るためのヘッダー。
~~~ruby:例
"Cookie": "key=value"
~~~
クライアントがサーバーに対して key という名前のCookie情報を送信している。サーバーはこの情報を使用して、ユーザーのセッションを識別し、それに基づいてカスタマイズされた体験を提供することができる。

## Cache-Control
キャッシュの制御を指示するヘッダー。キャッシュの動作を制御する指示を含むことがある。
~~~ruby:例
"Cache-Control": "no-cache"
~~~
キャッシュを無効化し、必ずサーバーとの通信を行うことを指示している。
[解決] Rancher Desktopのエラー:Error Starting Kubernetes

## はじめに

突然MacでRancher Desktopが起動できなくなりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649149/9e659e98-c77f-edf0-fb30-1c3616552ad2.png)

エラー内容

```bash
'--tty=false',
'0'
],
stdout: '',
stderr: 'time="2023-08-14T14:08:35+09:00" level=info msg="Using the existing instance \\"0\\""\n' +
'time="2023-08-14T14:08:35+09:00" level=fatal msg="networks.yaml field `paths.sudoers` error: dir \\"/private/etc\\" is world-writable"\n',
code: 1,
[Symbol(child-process.command)]: '/Applications/Rancher Desktop.app/Contents/Resources/resources/darwin/lima/bin/limactl.ventura start --tty=false 0'
}
```

## 解決方法

原因はマシンの`/private/etc`ディレクトリのアクセス権が全ユーザ読み出し/書き込みOKになっていたためです。
`wheel`と`everyone`を読み出しのみにすれば無事起動できました。
何かの作業で`/private/etc/hosts`を編集した際にアクセス権を変更して戻し忘れていました。

Rancher Desktopを入れ直したりなど色々試しましたが解決できず、
最悪minikubeに変えようかなと考えてましたが、
ちゃんとエラーメッセージを見れば`error: dir \\"/private/etc\\" is world-writable"\n'`て書いてました。反省。

おそらくこれが原因で起動に失敗する方は少ないと思いますので、
他の原因の場合の対処法について書かれている記事を載せておきます。

https://zenn.dev/shimo_s3/articles/de009ec4db106b
gitでブランチ移行

NetBSDの9の終わりくらいにHEAD(trunk)をforkして自分の開発をコミットして時々本家をpullしていたのですが、10.99.6の後に大量にコンフリクトが発生してpullできなくなりました。

おそらくgcc12(前は10)が入ったタイミングでなにかがおかしくなったんだと思います。もともとNetBSDはgitはミラーでCVSでソースは管理しているのでときどきおかしくなるのかもしれません。

仕方ないので、いったんnetbsd-10ベースに戻すことにしました。これはHEADの方はgcc12になって、まだ問題があるかもしれないためです。わざわざ火中の栗を拾う必要はありません。

既存のファイルはいじって無くて、ほとんど新規のファイルなので、ファイルをコピーして再構築する事もできるのですが、せっかくなのでコミットの記録を残して移行します。

netbsd-10のブランチを用意します。

```
git remote add upstream https://github.com/NetBSD/src.git
git fetch upstream
git checkout -b netbsd-10 upstream/netbsd-10
```

元のブランチで自分のコミットの一覧を作ります。古いのが下になるので逆にします。

```
git log --author="Hiroki Mori" --pretty=format:%H > /tmp/id
tail -r /tmp/id > /tmp/id.rev
```

最終行に改行が無いため最初の行がつながっていて、手動で直しました。

これをnetbsd-10のブランチに適用します。

```
cat /tmp/id.rev | git cherry-pick --stdin
```

自分の修正ではなくて、HEADをpullしているコミットがエラーになるので、戻して抜いて再チャレンジを繰り返します。

```
git cherry-pick --abort
vi /tmp/id.rev
```

もっと頭のよいやり方がありそうですが。gitで複雑な事はしないようにしているのですが、いろいろ調べました。

ビルドするとobjディレクトリが残っていてエラーになるのでがっつんと消しました。

```
find . -type d -name obj -prune -exec rm -rf {} \;
```

問題ないようなのでgithubにアップしました。

```
git push origin netbsd-10
```

登りの帯域が細いのでけっこう時間がかかりました。

当日のトラフィックで9時くらいにブランチを用意して12時過ぎにpushしてます。

![filename(7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/bb532e49-b5aa-284f-5b12-ffa0005f7358.png)

古いアーキテクチャの開発は、それに関係する部分は、ほとんどいじられなくなっていて、その開発ではコンフリクトを起こしにくいというメリットがあります。

10のリリースについてはここにページがありました。

https://wiki.netbsd.org/releng/netbsd-10/

本家の更新を取り込むのは以下のようにします。

```
git fetch upstream
git merge upstream/netbsd-10
```
大学入試問題文?集（第9巻）「...曲線について、点...における接線...」を調べました。

# オリジナル
```
媒介変数tを用いて，
x=4/√(t2+16),y=t/√(t2+16)
で表される曲線について，点(4/5,3/5)における接線の方程式を求めなさい．
```

https://kamelink.com/blog/2023/08/21/14-4-23-hukusimadai-rikou-2-4/

以下のジャンプの調子？が悪いです。 テキスト【２】(4)

https://mathexamtest.web.fc2.com/2023/202310141/2023101410100mj.html#top-0107

# DeepL翻訳で調査中

　おける？


# 結果
私の考えすぎでした。申し訳ありません。勉強になりました。
①**やっぱり常識的?に考えて。**
「について」「おける」でした。
　実際曲線上でした。点検不要?でした。
　**接線の問題文における新型か？チョット気になったので調べました。**
...曲線について、点(4/5,3/5)における接線 (オリジナル版)
...曲線上の点(4/5,3/5)における接線
...曲線上の点(4/5,3/5)のおける接線　([2016茨城大学【１】風 ?問い合わせ中](https://mathexamtest.web.fc2.com/2016/201610161/2016101610100.html))

②曲線上の点検です。
y=3/5より、t>0
x=4/5より、t=3
t=3より、y=3/5

# 曲線外の点から引いた接線？かも
　おける？

https://www.google.com/search?q=%E6%9B%B2%E7%B7%9A%E4%B8%8A%E3%81%AB%E3%81%AA%E3%81%84%E7%82%B9%E3%81%8B%E3%82%89%E5%BC%95%E3%81%84%E3%81%9F%E6%8E%A5%E7%B7%9A&rlz=1CAUHAM_enJP1038JP1038&oq=%E6%9B%B2%E7%B7%9A%E4%B8%8A%E3%80%80%E4%BB%A5%E5%A4%96&aqs=chrome.1.69i57j0i546l5.28866j1j7&sourceid=chrome&ie=UTF-8


# サイト内検索 
**”おける接線”**　でサイト内検索。

大学入試数学問題集成　様



https://cse.google.com/cse?cx=a8908fbc24340ebc5&q=%E2%80%9D%E3%81%8A%E3%81%91%E3%82%8B%E6%8E%A5%E7%B7%9A%E2%80%9D&oq=%E2%80%9D%E3%81%8A%E3%81%91%E3%82%8B%E6%8E%A5%E7%B7%9A%E2%80%9D&gs_l=partner-web.12..0i4i37i512j0i512j0i30i15.314865.314865.1.317166.2.2.0.0.0.0.182.275.1j1.2.0.csems%2Cnrl%3D10...0....1.34.partner-web..0.3.426.W84pfIXqXMw

数学入試問題 様

https://www.google.com/search?q=site%3A%2F%2Fkamelink.com+%E2%80%9D%E3%81%8A%E3%81%91%E3%82%8B%E6%8E%A5%E7%B7%9A%E2%80%9D&rlz=1CAUHAM_enJP1038JP1038&oq=site%3A%2F%2Fkamelink.com++%E2%80%9D%E3%81%8A%E3%81%91%E3%82%8B%E6%8E%A5%E7%B7%9A%E2%80%9D&aqs=chrome..69i57j69i58.44019j0j4&sourceid=chrome&ie=UTF-8

T氏の数学日記 様

https://www.google.com/search?q=site%3A%2F%2Fmathmathmass.exblog.jp+%E2%80%9D%E3%81%8A%E3%81%91%E3%82%8B%E6%8E%A5%E7%B7%9A%E2%80%9D&rlz=1CAUHAM_enJP1038JP1038&oq=site%3A%2F%2Fmathmathmass.exblog.jp+%E2%80%9D%E3%81%8A%E3%81%91%E3%82%8B%E6%8E%A5%E7%B7%9A%E2%80%9D&aqs=chrome..69i57j69i58.13604j0j4&sourceid=chrome&ie=UTF-8

＞接点（つまり曲線上の点）
＞その**C上**の点の座標と，その点における接線
GitLabでリモートブランチ名の変更【備忘録】

1. ローカル上で branch名変更する。
```bash
$ git branch -m <変更前のブランチ名> <変更後のブランチ名>
```

2.　リモートの対象branchを削除する。
```bash
$ git push --delete origin <変更前のブランチ名>
```

3.　名称を変更したローカルbranchをプッシュする。
```bash
$ git push origin <変更後のブランチ名>
```
[MR Dev Tips #11] Unity Profiler の表示フレーム数を変更する方法

# はじめに
今回は HoloLens 2 アプリケーションの開発を行う際に、デバッグで使用する Unity Profiler のプロパティに関するお話です。


Unity Profiler でキャプチャできるフレーム数はデフォルトで 300 になっています。ターゲットフレームレート (FPS) が 60 の HoloLens 2 では、約5秒間のキャプチャができるという計算です。ただ、実際に試してみると、5秒間でデバッグを行うのは少し難しいです。Unity Profiler のキャプチャを停止して、CPU や メモリ使用率等を確認する際、少しでも長くキャプチャできた方がデバッグがしやすいと思います。

本記事では、Unity Profiler の表示フレーム数 (Unity Profiler でキャプチャデータが保持されるフレーム数) の変更方法についてご紹介します。

> (筆者訳) デフォルトの設定では、プロファイラーはゲームの最後の 300 フレーム の記録を保持し、すべてのフレームに関する情報を表示することができます。[Edit] > [Preferences] で記録されるフレーム数を 300 ~ 2000 フレームの間で変更することができます。<font color="red">このフレーム数を増やすと、プロファイラーのオーバーヘッドとメモリ使用率によってパフォーマンスが集中する可能性があります。</font>
>
> By default, the Profiler records and keeps the last 300 frames of your game, and shows you detailed information about every frame. You can increase the number of frames it records in the Preferences window (menu: Edit > Preferences), up to 2,000 frames. Note: If you increase this setting to a large number of frames, the Profiler’s overhead and memory usage might become more performance intensive.

# 検証環境
- Unity 2020.3.48f1

# 手順

Unity Profiler は [Window] > [Analysis] > [Profiler] から開くことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/7138908a-1147-702a-15e0-019d8036f0f5.png)

デフォルトの設定では、300フレームだけ記録されるようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/5afba43d-5984-16a9-93b2-62ff2a083477.png)

記録されるフレーム数を変更するには、[Edit] > [Preferences] を開きます。
Preferences の [Analysis] > [Profiler] タブを選択して、[Frame Count] プロパティを変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/ecce5d53-563e-3fa5-a63b-a08c2e2a9c25.png)

試しに 2000 に設定してみたところ、横軸のフレーム数が増えたので波の見え方が変わりました。FPS 60 が出ていると仮定すると、約33秒間のフレームデータをキャプチャすることができる計算になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/13714d02-28af-b31e-d100-8dbc63d20454.png)

以上で、Unity Profiler の表示フレーム数を変更することができました！

# Refs
https://docs.unity3d.com/ja/2021.3/Manual/ProfilerWindow.html
androidのテストコードでassetsにアクセスする

# この記事の内容
AndroidTestとUniteTestの両方で、assetsにあるファイルにアクセスする方法です。
AndroidTestは、androidx.testを、UnitTestは、Robolectricをそれぞれ使用します。

androidx.testのセットアップに関しては公式をご覧ください。

https://developer.android.com/training/testing/instrumented-tests/androidx-test-libraries/test-setup

## dependencies
テストの依存関係は以下の通りです。
```gradle:app/build.gradle
dependencies {
    // For test
    testImplementation("junit:junit:4.13.2")
    testImplementation("org.robolectric:robolectric:4.9")

    // For android test
    androidTestImplementation("androidx.test.ext:junit:1.1.5")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:$composeVersion")
}
```

## AndroidTestで「src/androidTest/assets」にアクセスする
「InstrumentationRegistry.getInstrumentation().context」を使用します。

```kotlin
import androidx.test.ext.junit.runners.AndroidJUnit4
import androidx.test.filters.LargeTest
import androidx.test.platform.app.InstrumentationRegistry
import org.junit.Test
import org.junit.runner.RunWith
import java.io.InputStreamReader

@RunWith(AndroidJUnit4::class) // JUnit3とJUnit4が混在しているテストの時は必要です。
@LargeTest // 1秒以上かかるようなテストの場合必要です。
class SampleAndroidTest {
    @Test
    fun sample_1() {
        // 「src/androidTest/assets」にアクセスするためのコンテキストの取得方法
        val context = InstrumentationRegistry.getInstrumentation().context

        // 「src/main/assets」にアクセスするためのコンテキストの取得方法
        // val context: Context = ApplicationProvider.getApplicationContext()

        InputStreamReader(context.assets.open("sample_1.html")).use { reader ->
            println(reader.readText())
        }
    }
}
```
「@RunWith(AndroidJUnit4::class)」は、JUnit3とJUnit4が混在しているテストの時は必要になります。
「@LargeTest」は、1秒以上かかるようなテストの場合につけます。

## UnitTestで「src/test/assets」にアクセスする
@Config(assetDir = "src/test/assets")を指定します。

```kotlin
import android.content.Context
import org.junit.Assert.*
import org.junit.Test
import org.junit.runner.RunWith
import org.robolectric.RobolectricTestRunner
import org.robolectric.RuntimeEnvironment
import org.robolectric.annotation.Config
import java.io.InputStreamReader

@RunWith(RobolectricTestRunner::class)
@Config(assetDir = "src/test/assets")
class SampleUnitTest {
    @Test
    fun `sample 1`() {
        val context: Context = RuntimeEnvironment.getApplication()
        InputStreamReader(context.assets.open("sample_1.html")).use { reader ->
            println(reader.readText())
        }
    }
}
```
ロゴアニメーションを生成するアプリを作った話

こんにちは、ハニカムラボの新入社員です。
新入りなので頑張るぞ。
ということでアプリケーションを作りました。
（正しくはパッケージ化できてないので未完）

![prototype.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3535955/51a18577-4b16-f6a3-628e-ce7b565543d3.gif)

# 何を作ったか

- Honeycomb Lab. prototypesの動画投稿用にアウトロのロゴアニメーションを作った
- せっかく手書き文字生成スクリプトがあるので、毎回アウトロのアニメーションが変わったら良いなと思ったのでアプリを作った
    - [実際に生成してる動画](https://www.youtube.com/watch?v=FgaU1-c-3Kg)

### Honeycomb Lab. prototypesってなに？
- お客様の「アイデア」や「夢」を技術で叶える弊社が社員の「アイデア」をプロトタイプしてみる社内企画。
    - [第一弾](https://twitter.com/honeycomblab/status/1691300337641275392?s=12&t=Xlymk4yQ5h058t0TUuRKQA)

# どうやって作ったか

### 使用技術・ライブラリ
- ネイティブアプリ化
    - Electron.js
        - 後述のパッケージ時にPythonで躓いたのでeelにすればよかったかも
- バックエンド（メインプロセス）
    - Node.js
    - Python
    - PythonShell
        - node.jsからPythonのスクリプトをキックする人
        - 別に`child_process` でも良かったけど、楽できそうだから採用
- フロントエンド（レンダリングプロセス）
    - TypeScript,HTML,Stylus
    - Parcel.js
        - 環境構築で楽したかったので使用（生JSで書くなら不要かも）
    - PIXI.js
        - 2D描画ライブラリ
        - 手癖で書けるくらいには慣れてる
        - ポジションの指定とかで楽したかったので採用
    - gsap
        - アニメーションライブラリ
        - timelineで楽したかったので採用
- 手書き文字生成
    - **[handwriting-synthesis](https://github.com/otuva/handwriting-synthesis)**
        - Handwriting Synthesis with RNNs
        - 神

### 処理の流れ

2ページで構成されています。

1. 生成ページ
    1. indexページ。生成された画像の一覧と画像再生成ボタンがある
    2. 画像再生成ボタン押下でメインプロセスへイベント発火、メインのnode.jsから手書き文字生成スクリプト(Python製)をキック
    3. 出力されたSVGファイルをフロントエンドディレクトリに出力
    4. フロントエンドで出力されたSVGを一覧、SVG部分押下で編集ページへ遷移
2. 編集ページ
    1. 配置やモーションなどの編集ページ。動画のダウンロードもできる
    2. SVGのpathコマンドをパースしてPIXI.jsのgraphicsで描画
    3. 2をアニメーションさせる
    4. MediaRecorderでcanvasの出力をキャプチャ
    5. webm形式にして保存用リンクを作成

### 工夫（苦労）ポイント

#### 1. Pythonのバージョン

- 手書き文字生成スクリプトで利用されているTensorFlowの要求するPythonのバージョンが割とシビアなので、Pythonのバージョン指定のために仮想環境作りたかった
- distディレクトリにvenvディレクトリ作っちゃえば良いじゃない
- Pythonのパスを`dist/.venv/bin/python`指定することでなんか色々上手くいった
    - と思ったらelectronのパッケージ化段階で躓いているので普遍性なさそう

#### 2. Parcel.jsさん不便で便利

- 無思考でTypeScript書きたかったからParcel採用したけど、これくらいの書き捨てコードなら生JavaScriptでも良かったかも知れない
- 普通のWebサイトなら良いけど、Electronしたりするとassetsのパス解決とかが面倒くさかった
- デファクトな構成を模索したい

#### 3. Electron.jsさん不便で便利

- 普通にanchorでページ遷移できると思ってたらそうでもなくてちょっと面倒だった
- SPAなフレームワーク採用したら楽できたかもだけど今回の用途ではオーバースペックと思って不採用
- Pythonスクリプトをキックするならeelで良くねえ？

#### 4. ペンでの手書きっぽさ追求

- 出力されたSVGはただの一筆書きでしかなく、あまり手書きっぽい表情が出ない
- 各moveTo/lineToのポジションから加速度を求めてstrokeWidthに掛け合わせると液溜まり感が出てペン字らしさが出た

#### 5. 各種パラメータ調整GUI

- やるよねー
- 地味にグリッド表示は便利

#### 6. 動画書き出し

- webmでの書き出しはフロントだけでできたがwebmの取り回しがすごく面倒くさい
    - Premiere Proとかに適当に突っ込めない
    - FFMPEGで変換しなきゃいけない

# 感想

- フロントエンドからバックエンドの行き来、バックエンドでもnodeとpython行き来したりしてとても脳みそが疲れました
- 表現を色々追求できたのは良かった
- イージングとかdelayはクオリティにつながるからもう少し精度あげていきたい
- いっぱいプロトタイプするぞ


[***Honeycomb Lab.***](https://twitter.com/HoneycombLab)をよろしく。
wslでelixir その44

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題、やってみた。
構想編。

# 練習問題
neosvrで、小遣い帳アプリを操作せよ。

# 方針
- websocketサーバー使う。
portは、50002
urlは、localhost

- ecto使う。

- postgres使う。

- desp.get

  {:ecto_sql, "~> 3.2"},
  {:postgrex, "~> 0.15"},
  {:socket, "~> 0.3"}
- クライアントは、transceiver(自作NeosVRオブジェクト)

- インタープリター方式

- コマンドは、4つ
in 日付　内訳　∓　金額
del id
up id 日付　内訳　∓　金額
disp

以上。
wslでelixir その43

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題、やってみた。

# 練習問題
neosvrで、todoアプリを操作せよ。

# 写真

![2023-08-23 01.03.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/452e16b6-9dcf-531e-ab9c-095e0c010438.jpeg)


# サンプルコード

```
defmodule Todo do
	def insert(v) do
		p = %Friends.Person{name: v, age: 0}
		Friends.Repo.insert(p)
	end
	def update(n, v) do
		{id, _} = Integer.parse(n)
		p = Friends.Repo.get(Friends.Person, id)
		c = Ecto.Changeset.change(p, %{name: v})
		Friends.Repo.update(c)
	end
	def delete(n) do
		{id, _} = Integer.parse(n)
		p = Friends.Repo.get(Friends.Person, id)
		Friends.Repo.delete(p)
	end
	def list() do
		IO.puts(" id  todo")
		Friends.Repo.all(Friends.Person)
		|> Enum.map(fn v ->
			IO.puts(" #{v.id}  #{v.name}")
		end)
	end
	def run() do
		l = IO.gets("> ")
		l = String.replace(l, "\n", "")
		s = String.split(l, " ")
		cond do
		Enum.at(s, 0) == "insert" ->
			Todo.insert(Enum.at(s, 1))
		Enum.at(s, 0) == "delete" ->
			Todo.delete(Enum.at(s, 1))
		Enum.at(s, 0) == "update" ->
			Todo.update(Enum.at(s, 1), Enum.at(s, 2))
		Enum.at(s, 0) == "list" ->
			Todo.list()
		true ->
			IO.inspect(l)
		end
		run()
	end
	def disp() do
		Friends.Repo.all(Friends.Person)
		|> Enum.reduce(" id  todo\n", fn v, acc ->
			acc = acc <> " #{v.id}  #{v.name}\n"
		end)
	end
	def say(l) do
		l = String.replace(l, "\n", "")
		s = String.split(l, " ")
		cond do
		Enum.at(s, 0) == "in" ->
			Todo.insert(Enum.at(s, 1))
			"ok"
		Enum.at(s, 0) == "del" ->
			Todo.delete(Enum.at(s, 1))
			"ok"
		Enum.at(s, 0) == "up" ->
			Todo.update(Enum.at(s, 1), Enum.at(s, 2))
			"ok"
		Enum.at(s, 0) == "disp" ->
			Todo.disp()
		true ->
			IO.inspect(l)
			"ng0"
		end
	end
end
defmodule Todo.Server do
	alias ElixirSocketTesting.ClientAgent
	def start(port \\ 50002) do
		ClientAgent.start_link
		server = Socket.Web.listen! port
		loop(server)
	end
	def loop(server) do
		client = server
			|> Socket.Web.accept!
		client
		|> Socket.Web.accept!
		ClientAgent.add(client)
		Task.async(fn ->
			recv(client)
		end)
		loop(server)
	end
	def recv(client) do
		case client |> Socket.Web.recv! do
		{:text, message} ->
			res = Todo.say(message)
			broadcast({:text, res})
			recv(client)
		{:close, _, _} ->
			ClientAgent.remove(client)
		other ->
			IO.inspect other
		end
	end
	def broadcast(packet) do
		ClientAgent.all
		|> Enum.each(fn client ->
			Socket.Web.send(client, packet)
		end)
	end
end


```

以上。
kubernetesでkafkaのtopicを削除する

# kubernetesでkafkaのtopicを削除する

やったことを忘れないようにメモ代わりです。  
前提として、すでにkafkaがkubernetesのpodで動いているとして話をすすめます。

## kafkaのpodに入る

```bash
＄ kubectl exec -it kafka-0 -- /bin/bash
```
でpod上のkafkaに入れます。

## topicの一覧
```bash
$ kafka-topics.sh --list --bootstrap-server kafka-0:9092
```

でtopicの一覧が出てくる

例：
```bash
bash-4.4# kafka-topics.sh --list --bootstrap-server kafka-0:9092
__consumer_offsets
js_eval.requests
tb_rule_engine
tb_transport.api.requests
tb_transport.api.responses.tb-http-transport-68bcd57cf8-xrt6j
tb_transport.notifications.tb-http-transport-68bcd57cf8-xrt6j
```

bootstrap-serverは/opt/kafka/config/producer.propertiesに記載がある。

```bash
############################# Producer Basics #############################

# list of brokers used for bootstrapping knowledge about the rest of the cluster
# format: host1:port1,host2:port2 ...
bootstrap.servers=localhost:9092
```

## topicの削除
```bash
$ kafka-topics.sh --delete --bootstrap-server kafka-0:9092 --topic トピック名
```

で削除することができる。
DebianでSeleniumを使う

# 概要
スクレイピングをする必要があったので，Debianで実行しようと検索すると，UbuntuでChromeを使う記事が多く，Debianで実行するための記事が少なかったのと，せっかくパッケージで利用できるのにわざわざChromeをインストールする内容が多かったので，参考までにまとめます．
\# 実際はまとめる必要もないほど簡単なんですが．．

# 必要なパッケージのインストール
```
apt install chromium-driver python3-selenium
```
これでchromiumを含め必要なパッケージがインストールされます．

# Seleniumの利用
これは色々なページで紹介されているので，そちらを参考にしてください．
## Proxy環境での利用
Proxy環境で利用する場合，proxyの情報を設定する必要があります．
python3-seleniumでインストールされるのはSelenium4なので，以下の設定が必要になります．
+ http_proxy
+ https_proxy
+ no_proxy

特に`no_proxy=localhost, 127.0.0.1, ::1`を設定しておかないと，(seleniumが利用する?)ローカルホストへの通信もproxy経由になってエラーになります．これらを環境変数で設定してもよいですが，ソース内部で
```
os.environ["https_proxy"] = "http://proxy.xxx.xxx:8080"
os.environ["no_proxy"] = "localhost,127.0.0.1,::1"
```
などとするのがよさそう．
OpsRampのReporting Appsで提供されるレポートについて

OpsRampのReporting Appsでは、以下のようなレポートが提供されています：

Alert Listing（アラートリスト）：アラートの一覧を表示するレポートです。アラートの種類や更新日時などの情報が含まれます。

Asset Insights（アセットインサイト）：IT資産に関する詳細な情報を表示するレポートです。リソースタイプや利用状況などの情報が含まれます。

Asset Inventory（アセットインベントリ）：IT資産のインベントリを表示するレポートです。インストールされているソフトウェアやハードウェアの情報が含まれます。

Executive Summary（エグゼクティブサマリー）：経営者向けの要約レポートです。IT環境の概要や重要な指標などが含まれます。

Metered Usage Insights（メータード使用状況インサイト）：メータードサービスの使用状況に関する詳細な情報を表示するレポートです。利用量やコストなどが含まれます。

Metric Insights（メトリックインサイト）：メトリックデータに関する詳細な情報を表示するレポートです。特定のメトリックに関連するデータを分析します。

Monitor Details（モニターの詳細）：モニタリングに関する詳細な情報を表示するレポートです。モニタリング対象のリソースやアラートの情報が含まれます。

Network Utilization（ネットワーク利用状況）：ネットワークの利用状況に関する詳細な情報を表示するレポートです。トラフィックや帯域幅などが含まれます。

OPS 360 for Patching（パッチングのOPS 360）：パッチ管理に関する詳細な情報を表示するレポートです。パッチの適用状況や未適用のパッチなどが含まれます。

Patch Details（パッチの詳細）：パッチに関する詳細な情報を表示するレポートです。パッチの適用状況や詳細なパッチ情報が含まれます。

Process Definition Insights（プロセス定義インサイト）：プロセス定義に関する詳細な情報を表示するレポートです。プロセスの実行状況やパフォーマンスなどが含まれます。

Remote Control Usage（リモートコントロールの利用状況）：リモートコントロールのセッションの利用状況に関する詳細な情報を表示するレポートです。セッションの開始時間や終了時間などが含まれます。

Software Inventory（ソフトウェアインベントリ）：インストールされているソフトウェアのインベントリを表示するレポートです。バージョンやライセンス情報などが含まれます。

以上がReporting Appsで提供されるレポートの一部です。

詳細は、下記のリンクを参照願います。
https://docs.opsramp.com/platform-features/feature-guides/reporting-apps/reporting-apps-type/
共有PCにjupyter notebook を入れようとしてハマった話

## はじめに
会社等で共用PCを使う時、共通アカウントでなく、利用者個々のアカウントを複数を作るパターンも多いかと思うが、その際、各ユーザー環境で `python` や `jupyter` のセットアップをするのも面倒だったので、Windows環境に入れる事を試してみた。
最終的には問題なくできたのだが、想定外にハマった部分があったため、その時の内容をメモとして残しておく。


## 実施環境
　Windows 10 Pro　
　python 3.8.10
　

## メモ内容

### まず最初に気を付ける事
インストールの際に、いくつかのオプション設定をする場面が出てくるが、以下の赤枠のチェックを忘れず、`C:\Program Files` 等にインストールする事。
（下図は、python 3.11系のインストール時の画面キャプチャ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/487d70eb-e5d7-2e81-fa9b-5d9e64160305.png)

### 問題が起こったタイミング
この後、管理者ユーザーのままコマンドプロンプトを立ち上げ、`Python -V` や `pip list`が動くことを確認したので、`pip install jupyter notebook` よりパッケージのインストールを行ったのだが、<b>ここで問題発生！</b>

#### コマンドプロンプト上で、`jupyter notebook` を実行しても以下の様に、パスが通っていない様なエラーメッセージが出る！

```cmd:コマンドプロンプト
'jupyter' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

`python` や `pip` は通っているので、パスは問題ないと思いながらも、念のため `システム環境変数のPath` を確認したが、以下2つが含まれており、やはりそこは問題なさそう。

　C:\Program Files\Python39\Scripts\
　C:\Program Files\Python39\


普通であれば、jupyterなどのexeファイルがダウンロードされる場合、`Scripts`に格納されるはずなので（だからコマンドプロンプト上で直叩きできる）、そこを確認したところ・・・

#### pip しか入ってないやん！！！
しかし、`pip list` ではちゃんと、`jupyter`等は出てくる。。。

`pip install jupyter notebook` で取ってきたパッケージがどこに行ってしまったのか探したところ、以下に格納されている事が分かった。

    C:\Users\Admin\AppData\Roaming\Python\Python38
　※この中に、`site-packages` や `Scripts` のフォルダが出来て、パッケージや実行ファイルがダウンロードされていた。
<br>

#### ここからは推測になるが......
試しに`site-packages`内のものをどこかに移動したら、`import [パッケージ名]` がエラーになったため、Python環境上における参照ライブラリ先は、デフォルト以下の２つになるのかと推測。

　・C:\Program Files\Python38\Lib　（ベース環境）
　・C:\Users\Admin\AppData\Roaming\Python\Python38\site-packages　（ユーザー環境）


この状態では、他のユーザーでパッケージが利用できないので、どこかで間違えた`pip install` のやり直し。（というか、そもそも`juypter notebook`動かないし......）

#### 原因究明！
結論だけ言うと、コマンドプロンプトを右クリックして `管理者として実行` していなかった事が原因。
（管理者ユーザーで入っているのであまり気にしなかったが、言われてみれば確かに、管理者アカウントも１ユーザーではあるため、その様になるのか......？）


`管理者として実行` したコマンドプロンプト上で、`pip install jupyter notebook` を実行したところ、ベース環境の `C:\Program Files\Python38` にパッケージも実行ファイルも入ったため、これにて一件落着！
Git初心者に意識してほしいたった一つのこと

# 必要なものだけコミットしようね
伝えたいことはこれ↑です。

## 必要なファイルだけコミットしよう
### 「よ〜し色々開発したぞ! それ! `git add .`だ! `git commit`だ!!」
とするのはやめましょう。
`git add . `はカレントディレクトリ配下で差分のあるファイル全てをステージングに追加します。本当にそれらを全て追加していいのでしょうか? 
今取り組んでいる作業とは関係のないファイルが紛れ込んでいませんか?

### どのファイルをaddするか確認しよう
`git status`を使ってみてください。
どのファイルに変更があったのかすぐわかります。このとき本当に必要だけ差分がでていれば、`git add .`してOKです。そうでない場合は本当に必要なファイルのみをaddするようにしましょう。

### git管理する必要のないファイルは.gitignoreに指定しよう
作業しているといつの間にか作成されている知らないファイルが紛れ込んでいることはありませんか?
そのようなファイルは何に必要なのか、git管理するべきなのか調べてみましょう。何も考えずに`git add .`しないでください。
.gitignoreという特殊なファイルにgit管理しないファイルを指定することができます。
きちんと指定できているとそれらのファイルの差分は無視されるので、`git status`でも検出されませんし、`git add .`してもステージングに追加されません。
言語やフレームワークなど環境に応じた.gitignoreテンプレートのようなものも公開されています。詳しくはgitignoreで調べてみてください。

## 必要な行だけコミットしよう
### 「このファイルは必要だから大丈夫、addしてcommitだ!」
作ってはみたものの結局使わなかった関数が残っていたり、汚いが動く状態のコードがそのままになっていたり、ある機能を開発途中に別件で調査をしたような場合の実験的なコードなどがファイルに残っていることがあります。

### 何をaddするか確認しよう
`git diff`を使ってみてください。
差分が出ているファイルの中身を行ごとに確認することができます。全て必要な意図した変更であれば、addしてOKです。
いま本当に必要な行だけを綺麗にコミットするようにしましょう。

## 補足
### 意味のある単位でコミットしたい
とにかく変更したファイルを適当に都度コミットしていった場合、最新の状態では動くかもしれませんが、その途中のコミットはどのような状態であるか把握しずらいですし、何か問題があった場合にどのコミットが問題なのかもわからないです。
意味のある単位でコミットすると、コードの目的や変更内容、履歴が追跡しやすいですし、コードに問題があった時に特定のコミットを取り消すようなこともできます。


### プルリクエストする時のことを考える
ブランチを切って開発作業をしてコミットし、プルリクエストを出してこの変更でいいかを確認してフィードバックをもらう（レビュー）ことがあります。
このときに不要なファイルがたくさん含まれていたり、やろうとしている開発作業以外の変更が含まれていたりすると見る方も大変です。
わかりやすく意味のある単位で、本当に必要なファイルだけをコミットするようにすれば、複数人で開発する時にスムーズに作業ができます。

## 所感
初心者向けのGitの記事はたくさんあるんですが、意識してほしいことをシンプルに書いている記事がなくて自分で書いてみました。
**意図せぬ変更を含んだコミットになっていないか、意識してみてください。**
Ruby, JavaScriptの命名規則比較

# 目的
フロントエンドをVue.js(JavaScript)、バックエンドをRails(Ruby)のアプリケーションを作成しており、
命名規則がどちらの言語の書き方なのか混乱したのでまとめる
# Ruby, JavaScriptの命名規則比較
|　記法  | Ruby | JavaScript |
| -- | -- | --|
| クラス | アッパーキャメルケース<br>例)`MyClass` | アッパーキャメルケース<br>例)`MyClass` |
| メソッド | スネークケース<br>例）`find_items` | ローワーキャメルケース<br>例）`findItems` |
| 変数 | スネークケース<br>例）`cart_item` | ローワーキャメルケース<br>例)`cartItem` |
| 定数 | 大文字のスネークケース<br>例）`MAX_WIDTH` | 大文字のスネークケース<br>例）`MAX_WIDTH` |

# 記法
| 記法 | 説明 |
| --- | --- |
| アッパーキャメルケース | 先頭と区切りの文字が大文字で、それ以外は小文字 |
| ローワーキャメルケース | 区切りの文字が大文字で、先頭、それ以外は小文字 |
| スネークケース | 単語の区切りに_で繋ぐ |

# 参考にさせていただいた記事
- [Rubyの命名規約](https://qiita.com/takahashim/items/ccfd489c9b26f15b7193)
- [JavaScriptの命名規則早見表（と記法）](https://qiita.com/RyosukeSomeya/items/90f8e780b37c53758276)
Authorization Required error for SF Site




たいていはゲストユーザが絡んでいてアクセス権の問題だと思うけどなかなか解決してないと思います。
以下のヘルプはあるけど...

['Authorization Required' error on Lightning Platform sites](https://help.salesforce.com/s/articleView?id=000386094&type=1)

---------------------

+ [Authorization Required error for SF Site](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007EbpLR)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/2d4057fc-eafe-3a53-a3a1-8a86705384f2.png)

:::note
The problem turned out to be field-level access and Apex class access for the guest user. Thanks.
:::
IKEAの机をスタンディングにして使っている話

:::note warn
注意: メーカーの想定外の使い方をしています。自己責任で。
:::


## 先にまとめ

- IKEA(イケア)の伸縮式脚をギリギリまで伸ばしている
    - MAX高さ104センチ
    - 高さの調整は手動
    - 特別グラついたりはしない
- 安い
    - 合計5990円

![output.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2564362/f5bf4826-bc79-07e1-c9e1-57ce4b344820.jpeg)
(部屋が汚くて良い写真が取れませんでした。。これでも片付いている状態)


## 使っているもの

脚: OLOV オーロヴ　1000円 x 4

- 脚の60-90センチの仕様ですが、100センチにしています。天板合わせて約104センチ
- 長さを変えるときは内外の筒を回して緩めたり締めたりします
- (ちなみに60センチよりも短くできます。実質55くらい)


https://www.ikea.com/jp/ja/p/olov-leg-adjustable-white-70264304/

天板:　LINNMON リンモン 1990円


https://www.ikea.com/jp/ja/p/linnmon-table-top-white-stained-oak-effect-40473605/

- 安いだけあって、何か板っぽいものとハニカム構造の紙でできています。(気になる人は「イケア 天板 ハニカム」とかで検索してください)

- モニターアームが机から離れる方向セットすると、テコの原理で天板の端がメコメコ壊れていきました。仕方がないので、廃材(まな板を切ったやつ)と100均の滑り止めを挟んでいます。若干浮いているのですが、安定しているので気にしない。。

![Screenshot from 2023-08-20 06-49-35 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2564362/70b13359-9d58-ab3d-5a3c-e147ab9d4cd0.png)
(上の画像の一部を拡大)


## 注意点

- 「これ以上伸ばさない」という意味のSTOPマークを無視しています
- 高さの上限が低いです(一般的なスタンディングデスクのMax高さは120センチ以上)
- 高さ調整のときは、脚を一本ずつ回すので、机の上を軽くしないとバランス悪くなって辛いです


## おまけ

スタンディングデスクの一般的オプションで使っているもの

### 椅子

ずっと立っているのも辛いので、背の高い椅子を買って座ったりしています。

https://miyatake-ss.jp/item/chair/ch-800h.html

正直これは使い辛いので、これから買うなら他の類似製品のほうが良いかもしれません。


### 足元のマット

八幡ねじ 疲労軽減マット

これは定番みたいですね。コスパ良いです。

## おまけ2

脚だけ買って、天板は他のものを組み合わせる人もいるようです。
IKEAに行けない人は、フリマサイトで買うといいと思います。


## まとめ

IKEAの机を安いスタンディングデスクとして使っているので書きました。くれぐれも自己責任で。
zoomの会議に自動で参加する方法

船井総研デジタルでは、毎週全社朝礼というものがあり、zoomで参加するようになっています。
しかし、毎週毎週予定表からURLをクリックして、パスワードを入力して参加とするのはめんどくさいですよね。
なので、今回は自動でzoomに参加するバッチファイルを作成したので、簡単にご紹介します。

# 基本的なコード
```bat
@echo off
set id="会議ID"
set passwd="会議パスワード"
start zoommtg:"//zoom.us/join?action=join&confno=%id%&pwd=%passwd%"
```
はい、たったの4行です。
簡単なので、１行ずつ解説します。
1行目：実行中のコマンドを表示しないようにする設定です。
実際にこのコードがある場合とない場合を比較してみます。

<span>@</span>echo offがない場合のコード
```bat
echo test
pause
```
testという文字列を出力して、プログラムを止めるだけのコードを実行すると、以下の通りになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3314839/41b2de02-079a-92b7-bd0b-5b1ae1960767.png)
ソースコードが一行ずつ表示されるので、邪魔ですね。

次は<span>@</span>echo offを付けてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3314839/0bf24228-96a1-9100-7c6d-320c8218dd4f.png)
ソースコードが表示されなくなりました。基本的にバッチファイルを作成するときは<span>@</span>echo offを付けて、不要なものは表示しないようにしましょう。

2行目：idという変数を定義し、それに会議IDを代入します。
3行目：2行目と同様に、passwdという変数を定義し、それに会議パスワードを代入します。
4行目：指定された会議IDとパスワードからzoomを起動します。
やっていることはこれだけです。極論を言ってしまえば、以下のコードだけでも動きます。
```bat
start zoommtg:"//zoom.us/join?action=join&confno="会議ID"&pwd="会議パスワード""
```

パスワードがない場合のコードは以下の通りになります。
```bat
@echo off
set id="会議ID"
start zoommtg:"//zoom.us/join?action=join&confno=%id%"
```

# パスワードがある場合とない場合で処理を分ける
私は、全社朝礼に加え、別件の定例ミーティングもzoomで行われています。
定例ミーティングの方はパスワードが設定されていないので、起動コマンドが若干変わります。
そのため、次のようなコードを作りました。
```bat
@echo off
set id=%1

if "%2" == "" (
	start zoommtg:"//zoom.us/join?action=join&confno=%id%"
) else (
	set passwd=%2
	start zoommtg:"//zoom.us/join?action=join&confno=%id%&pwd=%passwd%"
)

```
引数に第1引数にID、第2引数にパスワードを設定して、判定するやり方です。
会議IDは必須なので、最初に設定します。
次に第2引数が空かそうでないかを判定して、空であればパスワードはなしでコマンド実行します。
空でなければ、パスワードを設定して、コマンド実行します。

これでベースが出来上がりました。
最後に、タスクスケジューラにこのバッチファイルを登録し、引数に会議IDとパスワード（あれば）を設定すれば、時間になると勝手に会議に参加してくれるようになります。
Flipper ZeroでいろんなNFCをスキャンしてみた！

DEFCONでFlipper Zeroを手に入れたので、いろいろ遊んでみた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325297/8b44c0ec-3032-4ebc-5965-e65fbe4a6b85.png)
カジノのメンバーズカードをスキャンした図

# 所感と今後
* NFCに関する知識が皆無だったが、いろいろ試したり調べたりしたので、いいきっかけになった
* NFCには複数種類あり、日本はFelica(NFC-F)が多い
* シンガポールはNFC-Bが多め？
* Flipper ZeroはNFC-AはEmulateできるのに他の規格はなぜできないのかを深堀したい

* 以下は様々なNFの種類別（A、B、F）でスキャンした結果を記録したものである

# NFC-A (Flipper ZeroでEmulate可能)
### EPOSカード（クレジットカード）
```
Unknown ISO tag
ISO 14443-4 (NFC-A)
UID: XX XX XX XX XX XX XX
ATOA: XX XX SAK: XX
```
* 自分のカードをEmulateした状態で自社内の売店のクレカ決済機を試したが、カードとして認識されるものの決済はできなかった
* 単純なリプレイ攻撃は対策されている

### 楽天カード
```
Unknown ISO tag
ISO 14443-4 (NFC-A)
UID: XX XX XX XX XX XX XX
ATOA: XX XX SAK: XX
```

### Pixel 6a (スマホ）
```
Unknown ISO tag
ISO 14443-4 (NFC-A)
UID: XX XX XX XX XX XX XX
ATOA: XX XX SAK: XX
```

### ホテルのカードキー(Flamingo Hotel & Casino)
* 解析中の文字列
```
MF Classic System Dictionary
Unlocking sector: 1
Keys found: 19/32
Sectors Read: 16/16
```
* どうや[Mifare classic](https://en.wikipedia.org/wiki/MIFARE)という規格のカードになっており、鍵を取り出すのに暗号化鍵をブルートフォースしないといけないらしい
* Flipper Zeroでは様々なところで公開されている暗号鍵を辞書攻撃で利用しているようだ
  * https://github.com/flipperdevices/flipperzero-firmware/blob/dc7517e5fdfa409eab53e4b2638a333ce82ed83e/assets/resources/nfc/assets/mf_classic_dict.nfc
* 最終的に19個の鍵が取り出せたような表示になったが試す場所がない
```
Mifare Classic 1K
ISO:14443-3(NFC-A)
UID: XX XX XX XX
ATOA: XX XX SAK: XX
Keys Found 19/32
Sectors Read 16/16
```

# Resort World（カジノのメンバーズカード）
* 上記同様Mifare Classicだった。
```
Mifare Classic 1K
ISO:14443-3(NFC-A)
UID: XX XX XX XX
ATOA: XX XX SAK: XX
Keys Found 29/32
Sectors Read 15/16
```

# NFC-B (Emulate不可)

## ezlink (シンガポールの交通カード）
```
NFC-B
UID: XX XX XX XX
```

## DBS (シンガポールのクレジットカード）
```
NFC-B
UID: XX XX XX XX
```

### 日本の運転免許証
```
NFC-B
UID: XX XX XX XX
```

### 会社Cの社員証
```
NFC-B
UID: XX XX XX XX
```

# NFC-F/Felica (Emulate不可)

### Suica / Pasmo / Icsca
```
NFC-F
UID: XX XX XX XX XX XX XX XX
```

### 会社A、Bの社員証
```
NFC-F
UID: XX XX XX XX XX XX XX XX
```
顧客の四半期毎のランク遷移を列に展開する(SPSS Modeler データ加工逆引き4-23)

# 顧客の四半期毎のランク遷移を列に展開する

![スクリーンショット 2023-08-16 8.41.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/e5dd4323-cc29-9d6c-c88c-1ae050a80291.png)

## 1.想定される利用目的

・ランク遷移から顧客の価値を定義する
・顧客の行動変容を予測する特徴量にする

## 2.サンプルストリームのダウンロード

https://github.com/yoichiro0903n/blue/raw/main/rank_transition_FYQ.str

## 3.サンプルストリームの説明

![スクリーンショット 2023-08-16 8.44.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/c7408d72-ee17-3afe-3a90-86e67b77bc6d.png)

a.入力するデータは以下の通りです。顧客ID付きのPOSデータ（購買明細）です。
![スクリーンショット 2023-08-16 8.44.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/040a44f5-218a-d572-d43e-3feaaed58f15.png)

b.[フィールド作成]ノードを編集します。逆引き1-11に決算期を利用した四半期作成の記事も参考にしてください。
![スクリーンショット 2023-08-16 8.47.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/0f951026-1fed-1630-7400-15ba7b547940.png)

c.[フィールド作成]ノードを編集します。3月末決算を例にして作成しています。
![スクリーンショット 2023-08-16 8.48.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/d49d697f-79f0-acb8-05ee-bcebf5b03d25.png)

[プレビュー]します。

![スクリーンショット 2023-08-16 8.49.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/277bf4a8-6a3e-905d-a6a1-6676d3775fb9.png)


d.[レコード集計]ノードを編集します。
![スクリーンショット 2023-08-16 8.50.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/1532670d-1d4e-b289-6259-8ca4ae3cc02d.png)

e.[フィールド作成]ノードを編集します。5,000円未満がD。5,000円以上かつ10,000円未満がC。 10,000円以上かつ30,000円未満がB。それ以上をAランクに充当させています。
![スクリーンショット 2023-08-16 8.50.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/08905b52-3110-5578-51f4-49e7414677fc.png)

f.[データ型]ノードを編集します。後続処理のために[値の読み込み]ボタンを押して四半期のメンバーを確定します。

![スクリーンショット 2023-08-16 8.50.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/4e31e4d4-d631-df94-eceb-b53d2d685cdb.png)

[プレビュー]します。
![スクリーンショット 2023-08-16 8.51.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/e77cf174-8eba-2eb5-d57a-c02e87e3332c.png)

g.[再構成]ノードを編集します。
![スクリーンショット 2023-08-16 8.51.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/d8dc987e-abd6-b9a8-1f45-e3c68712bb7f.png)

[プレビュー]します。この時点では四半期と顧客で1行です。
![スクリーンショット 2023-08-16 8.51.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/1ddd9b44-dd3c-0f2d-7b17-92d08c1c3209.png)

h.[レコード集計]ノードを編集します。本来集計するべき値ではありませんが、最小値か最大値を利用します。
![スクリーンショット 2023-08-16 8.51.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/295ae171-c731-ff61-bfd5-9358b52b713f.png)

[テーブル]ノードを実行します。
![スクリーンショット 2023-08-16 8.52.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/66e598d6-afb7-21ac-c0c8-495355396c9b.png)

#### 注意点

該当がないとランクがNULLになりますので集計表などには空白か、「該当なし」などで置換します。

## 4.参考情報

#### 　決算期に応じた四半期の作成

https://qiita.com/416nishimaki/items/67228ad94b7bc041c8d8

#### 二つのテーブルを結合して顧客のランク遷移を記述する

https://qiita.com/416nishimaki/items/765600557e8823ce8633

#### SPSS Modeler ノードリファレンス目次

https://qiita.com/416nishimaki/private/503037195081d3323eee

#### SPSS Modeler 逆引きストリーム集（データ加工）

https://qiita.com/416nishimaki/private/4bf813e6cba84b2a1008
Docker + Goで始めるREST API開発　開発環境編

## 目次
1. 構成
2. フォルダ構成
3. dockerfileとyamlファイル
4. goの実装
5. 動作検証


## 1.構成
|ミドルウェア|バージョン|
|----|----|
|golang|13.4.16|
|docker|18.16.1|

## 2.フォルダ構成
```
┣━backend/
┃　　┣━build
┃　　┃　┣━Dockerfile
┃　　┃　┗━.go_env
┃　　┗━cmd
┃　　 　┗━main.go
┗━docker-compose.yml
```

## 3. dockerfileとyamlファイルの作成
#### まずはDockerfileの作成を行います。<br>Dockerfileは、Dockerイメージを作成するための手順書となります。<br>そのため、goのどのバージョンを利用するのか？や、どのフォルダで作業を行うのか？ここには記載していませんが、今後出てくる、ミドルウェアのインストールについても、このDockerfileに記載します。
```Dockerfile
# goバージョン
FROM golang:1.21.0-alpine3.18
# アップデートとgitのインストール
RUN apk update && apk add git
# webapi_testディレクトリの作成
RUN mkdir /webapi_test
# ワーキングディレクトリの設定
WORKDIR /webapi_test
# ホストのファイルをコンテナの作業ディレクトリにコピー
COPY . /webapi_test

# モジュールの作成
RUN go mod init webapi_test

# 実行
CMD ["go", "run", "/webapi_test/webapi_test/cmd/main.go"]
```
#### 続いて、上で作成したdockerfileを利用して、コンテナを作成するためのコードを記載します。<br>ここに複数のコンテナ情報を記載し、実行することで、複数のコンテナを一度に作成することが可能となります。<br>※今回は、Goの実行コンテナのみを作成しています。
``` docker-compose.yml
version: '3' # composeファイルのバージョン
services:
  boiler-plate: # サービス名
    container_name: webapi_test
    build: # ビルドに使うDockerファイルのパス
      context: .
      dockerfile: ./build/Dockerfile
    volumes: # マウントディレクトリ
      - .:/webapi_test
    tty: true # コンテナの永続化
    env_file: # .envファイル
      - ./build/.go_env
    environment:
      - TZ=Asia/Tokyo
```
## 4. goの実装
#### ここからは、dockerコンテナ上で動作するGo言語のコードを記載します。<br>今回は、環境設定ということもあり、簡単な”Hello World”を表示するだけのコードとなります。
``` main.go
package main

import (
	"fmt"
)

func main() {

	fmt.Println("Hello World")
}

```
## 5. 動作検証
#### 以下のコマンドを実行することで、docker-compose.ymlのビルドを行います。
```
$ docker-compose build 
```

#### 以下のコマンドを実行することで、docker-compose.ymlファイルを実行し、コンテナを作成します。
```
$ docker-compose up
```

#### docker-compose upコマンドを実行した場合、最後から２行目に”Hello World”が表示されました。
```
$ Attaching to webapi_test
$ webapi_test  | Hello World
$ webapi_test exited with code 0
```

今回は、以上となります。
せんせー、スキンエレクトロニクスってなに？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/2c47de5a-d81a-78f9-53c1-4d31d8398c36.png)

キーンコーンカーンコーン...
授業が始まります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/be1492ca-910f-2708-d0fa-8fcfcf14af73.png)

せんせー、スキンエレクトロニクスってなに？

# スキンエレクトロニクスとは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/da229491-9c49-fb7a-a542-417180e256a7.png)

## スキンエレクトロニクスって何？

みんな、シールを知ってるよね？シールをはがして、手や腕にくっつけるの、楽しいですよね。
スキンエレクトロニクスは、ちょっと特別なシールのようなもので、
それには電子の部品がついていて、色んなことができるんです。

## どういうこと？

この特別なシールは、体の動きを感じたり、心臓の音を聞いたりすることができます。
そして、それをコンピュータに送ったりして、色々な情報を知ることができるんです。

## どうしてそれがすごいの？

こんな薄くて柔らかいシールで、体のことをたくさん知ることができるから、すごいんです。
病院で検査する時や、スポーツをするときに、どう動いているのかを知るのに役立ちます。

## だから、スキンエレクトロニクスってなに？

スキンエレクトロニクスは、体に貼ることができる特別な電子のシールのことなんです。


# まとめ

このように、スキンエレクトロニクスは、私たちの体に貼り付けることができる小さな電子のシールで、
色々な情報を取得するための技術なんです。
せんせー、バーチャルオーガンってなに？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/2c47de5a-d81a-78f9-53c1-4d31d8398c36.png)

キーンコーンカーンコーン...
授業が始まります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/be1492ca-910f-2708-d0fa-8fcfcf14af73.png)

せんせー、バーチャルオーガンってなに？

# バーチャルオーガンとは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/da229491-9c49-fb7a-a542-417180e256a7.png)

## バーチャルオーガンって何？

みんな、ゲームやアニメの中の物やキャラクターは実際には触れられないですよね。
「バーチャル」というのは、そんな「実際にはないけど、コンピュータの中で作られたもの」という意味です。
バーチャルオーガンは、人の体の中にある心臓や肝臓のような部分を、コンピュータの中で作る技術のことを言います。

## どういうこと？

科学者たちがコンピュータを使って、人の体の部分を再現します。
これを使って、新しい薬のテストや、どんな病気の治療がいいかなどを調べることができます。

## どうしてそれがすごいの？

本物の人の体を使わずに、コンピュータの中だけで色んな研究ができるから、それはすごいことなんです。
安全に、たくさんのことを試すことができます。

## だから、バーチャルオーガンってなに？

バーチャルオーガンは、コンピュータの中だけで人の体の部分を再現する技術のことなんです。

# まとめ

このように、バーチャルオーガンは、私たちの体の中の部分をコンピュータ上で作り、それを使って研究するための技術なんです。
せんせー、ナノバブル技術ってなに？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/2c47de5a-d81a-78f9-53c1-4d31d8398c36.png)

キーンコーンカーンコーン...
授業が始まります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/be1492ca-910f-2708-d0fa-8fcfcf14af73.png)

せんせー、ナノバブル技術ってなに？

# ナノバブル技術とは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/da229491-9c49-fb7a-a542-417180e256a7.png)

## ナノバブル技術って何？

みんな、お風呂に入ったときの泡を思い浮かべてみてください。
その泡は、手でつかめる大きさがありますよね。
でも、「ナノバブル」は、それよりももっともっと小さな泡のことなんです。
手のひらや目には見えないほど小さくて、特別な技術で作ることができるんです。

## どういうこと？

ナノバブル技術は、これら超小さい泡を水の中にたくさん作る方法なんだ。この小さい泡には、水をきれいにしたり、植物を元気に育てる助けをする特別な力があることがわかってきたんです。

## どうしてそれがすごいの？

この超小さい泡を使うことで、水をもっときれいにしたり、魚や植物が元気に育つのを手伝うことができるんです。
だから、多くの人がこの技術に興味を持っているよ。

## だから、ナノバブル技術ってなに？

ナノバブル技術は、とても小さな泡を作って、それをいろんな場所で役立てる技術のことなんです。

# まとめ

このように、ナノバブル技術は、とても小さい泡を利用して、私たちの生活をより良くするための技術なんです。
せんせー、アンチエイジング技術ってなに？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/2c47de5a-d81a-78f9-53c1-4d31d8398c36.png)

キーンコーンカーンコーン...
授業が始まります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/be1492ca-910f-2708-d0fa-8fcfcf14af73.png)

せんせー、アンチエイジング技術ってなに？

# アンチエイジング技術とは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/da229491-9c49-fb7a-a542-417180e256a7.png)

## アンチエイジング技術って何？

みんな、魔法のようなものを想像してみてください。
その魔法で、おばあちゃんやおじいちゃんがちょっとだけ若返ったり、元気になったりすることができるとしたら、
すごいですよね。
アンチエイジング技術は、そんな「魔法のような方法」を探して、本当に作る技術のことを言うんです。

## どういうこと？

科学者たちは、私たちの体や肌を若く保つための新しい方法や機械、薬を作っているんです。
それがアンチエイジング技術なんです。

## どうしてそれがすごいの？

この技術を使うと、年を取っても体が元気で、肌もキレイに保てるかもしれない。だから、多くの人がこの技術に興味を持っているんです。

## だから、アンチエイジング技術ってなに？

アンチエイジング技術は、私たちがもっと長く若々しくいられるようにするための特別な方法や機械、
薬を研究・開発する技術のことなんです。

# まとめ

このように、アンチエイジング技術は、私たちが元気で、
若々しく長生きするための様々な新しい方法や道具を作る技術のことなんです。
せんせー、深海エネルギー採取ってなに？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/2c47de5a-d81a-78f9-53c1-4d31d8398c36.png)

キーンコーンカーンコーン...
授業が始まります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/be1492ca-910f-2708-d0fa-8fcfcf14af73.png)

せんせー、深海エネルギー採取ってなに？

# 深海エネルギー採取とは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/da229491-9c49-fb7a-a542-417180e256a7.png)

## 深海エネルギー採取って何？

みんな、海の中の深いところに行ったことありますか。
そこは暗くて、神秘的な場所なんだ。深海エネルギー採取は、
その深いところからエネルギーを取ってくる方法のことを言います。

## どういうこと？

深海には、火山や温泉のような場所があって、そこから出てくる水がとても熱いんです。
この熱い水からエネルギーを取り出すことができるんです。

## どうしてそれがすごいの？

地上では取れない、新しいエネルギーを深海から取ってくることができるから、それはすごいことなんです。
それに、この方法でエネルギーを取ると、地球に優しいことがあります。

## だから、深海エネルギー採取ってなに？

深海エネルギー採取は、海の中の深いところからエネルギーを取ってくる特別な方法のことなんです。

# まとめ

このように、深海エネルギー採取は、私たちが普段考えるエネルギーの取り方とは違う、新しいやり方の一つなんだよ。
InertiaでReactを使っている場合のチェックボックスの変更をうまくハンドルする

Reactでチェックボックスのオンオフを行ったときに `setValues` を使って更新する必要がありますが、その場合に[こちらのコード](https://inertiajs.com/forms)のようにすると一括で変更できます。

ただこのコードではCheckboxを処理できないようなので、その判定を入れました。

```JavaScript
  function handleChange (e) {
        const key = e.target.id
        setValues(values => ({
            ...values,
            [key]: e.target.type === 'checkbox' ? e.target.checked : e.target.value,
        }))
  }

  return (<input id="lunch" type="checkbox" value="true"                   onChange={handleChange}/>
```

公式ドキュメントでcheckboxが動かないことにハマりました。