OmniAICreator/Qiita-1.07M huggingface dataset:
【2024年版】GitHub Pagesで独自のカスタムドメインを設定する方法

# はじめに
こんにちは。細々とプログラミングをしている[sotanengel](https://x.com/sota_eng_prog)です。

GitHub Pagesにカスタムドメインを設定して公開したいと思ったので、2024/12現在のやり方まとめます。

# やり方
## 1. ドメイン名の購入
マイベストで「初期金額」✖︎「ランニングコスト」で比較し、自分が納得する場所で購入する。
↓参考にしたサイト

https://my-best.com/11725

私は「Xserver」さんで*sotanengel.com*を購入しました。

## 2. ドメインを購入したサイトで設定を行う
### 1. (Xserverの場合)ネームサーバー設定を行う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/fe5e19b9-ddd3-089d-019b-0f3011f6ad19.png)

### 2. DNSレコード設定で以下の情報を設定する
| ホスト名                  | 種別   | 内容                      | TTL  | 優先度 |
|---------------------------|--------|---------------------------|------|--------|
| www.sotanengel.com        | CNAME  | sotanengel.github.io      | 3600 | -      |
| sotanengel.com            | A      | 185.199.108.153           | 3600 | -      |
| sotanengel.com            | A      | 185.199.109.153           | 3600 | -      |
| sotanengel.com            | A      | 185.199.110.153           | 3600 | -      |
| sotanengel.com            | A      | 185.199.111.153           | 3600 | -      |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/74b05d8a-e9d8-e8fb-1bc0-e8475796b8d3.png)

## 3. GitHub上で設定を行う
(ドメインの反映に時間がかかるので)上記の作業やってから1日後くらいに以下の作業を行う。
*設定>Pages>Custom domain*で2で設定したドメイン名を入力する。
「DNS Check in Progress」みたいな文字が出てきたら大丈夫そう。
HTTPS反映はチェック終わるまで時間かかるので1日くらい放置かな？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/4246df1a-3476-8242-3efd-bbaa2092cb54.png)

## 4. httpsに対応させる
1日後くらいに*設定>Pages>Enforce HTTPS*にチェックを入れる。

## おまけ〜複数のリポジトリで同じドメインを使い回すには〜
なんかこんなこと書いてますが、自分の場合はできなかったのでサブドメインをDNSに設定しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/eb38a6d0-3711-1b1f-65b2-553050129472.png)

| ホスト名                  | 種別   | 内容                      | TTL  | 優先度 |
|---------------------------|--------|---------------------------|------|--------|
| image-webp.sotanengel.com | CNAME  | sotanengel.github.io      | 3600 | -      |

これを対応させたいGitHub Pagesの設定で反映させるだけ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/943d3b7c-6cae-bf49-f08b-552e50d41092.png)
npm initで作成されるjsonファイルについて

# はじめに
```npm init```コマンドを実行することで、作成されるパッケージファイル```package.json```は、Node.jsプロジェクトの設定や依存関係を管理するためのJSON形式のファイルである。

JSON形式のファイルについては次の記事でまとめている。

https://qiita.com/skm_bnn/items/ecf3d0fe1188e666d079

# パッケージファイルの作成
## 対話式
次のコマンドで、対話式(ターミナル上で出力された文に従って情報を入力すること)でパッケージファイルを作成することができる。

```
npm init
```

動作結果を次に示す。
```
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (プロジェクト名)
```
- ```Ctrl + C``` でパッケージファイルの作成をキャンセルできる
- ```プロジェクト名``` は開いているフォルダ名である
- パッケージ名の入力を求められる

以下に例を示す。
```
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (新しいフォルダー) p5-mysketch
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\ユーザ名\Desktop\react\新しいフォルダー\package.json:

{
  "name": "p5-mysketch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes
```

## 非対話式
次のコマンドで、非対話式(自動的にプログラムが処理すること)でパッケージファイルを作成することができる。何も指定しない場合、パッケージファイルに必要な情報については仮の内容が書き込まれる。

```
npm init -y
```

# 参考
https://docs.npmjs.com/cli/v10/configuring-npm/package-json

https://qiita.com/righteous/items/e5448cb2e7e11ab7d477

https://qiita.com/xxseagullxx/items/4e1a0158028cf2348d21

https://zenn.dev/ikuraikura/articles/d6ff3821017e29539a7a
VSCodeでPython仮想環境を設定する方法

# はじめに
- windowsです
- venvを使用します
- VSCodeは最新バージョンを使いましょう
    - 以下のページから最新をインストール
    - https://code.visualstudio.com/download
    - オプションは基本チェックをつけるのが好みです
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3353698/fa8deadc-d525-b767-aa52-807678166635.png)


---

## 手順  

### Python拡張機能のインストール  
VSCodeの「拡張機能」アイコンをクリックし、「Python」で検索します。python Extension Packがおすすめ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3353698/aafe61a4-6566-45de-fd76-04d8d00bdd83.png)

### Pythonがインストールされていることを確認  
ローカル環境にPythonがインストールされている必要があります。以下のコマンドで確認してください:  
```bash
python --version
```

インストールされていない場合は、[Python公式サイト](https://www.python.org/)からインストールしてください。

---

### 4. プロジェクトフォルダを作成  
ターミナルで以下のコマンドを実行し、プロジェクト用のフォルダを作成します:  
```bash
mkdir my_project
cd my_project
```

---

### 5. 仮想環境の作成  
Pythonの標準ライブラリ`venv`を使って仮想環境を作成します:  
```bash
python -m venv .venv
```
上記のコマンドにより、プロジェクトフォルダ内に`.venv`ディレクトリが作成されます。

---

### 6. 仮想環境の有効化  
以下のコマンドで仮想環境を有効化します:  

```bash
.\.venv\Scripts\activate
```


仮想環境が有効化されると、ターミナルのプロンプトに`(.venv)`が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3353698/51485cf5-6c26-277c-5b17-642a8259f655.png)

ターミナルでpowershellの部分にマウスを合わせて表示されるポップアップにアクティブなpython環境が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3353698/c9d41ed3-5c68-f4c3-610b-b310cc9b2cfd.png)

python environment managerの画面でも確認できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3353698/e88788c3-de52-9fe9-d187-3e230b8e1281.png)


---

### 7. VSCodeで仮想環境を認識させる  
1. VSCodeでプロジェクトフォルダを開きます。  
2. `Ctrl+Shift+P`を押して、コマンドパレットを開きます。  
3. 「Python: Select Interpreter」を選択します。  
4. 仮想環境（`.venv`）を選択します。


もしくは
1. .pyファイルを開いた状態でVSCode右下のpythonバージョンが表示されている部分をおします（図では3.11.9）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3353698/9f97255a-14bb-abd2-5065-05deb39a6074.png)

2. .venvを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3353698/1a9bc297-7ffb-4851-b5b6-6be1a0ad9449.png)


---

### 8. 必要なパッケージのインストール  
仮想環境内で必要なライブラリをインストールします:  
```bash
pip install <パッケージ名>
```

例えば、`requests`をインストールする場合:  
```bash
pip install requests
```

---

### 9. 仮想環境の無効化  
作業を終了する際には、以下のコマンドで仮想環境を無効化できます:  
```bash
deactivate
```

---

## トラブルシューティング  

### 仮想環境が選択肢に表示されない場合  
1. `.venv`ディレクトリがプロジェクトフォルダ内に存在するか確認してください。  
2. VSCodeを再起動してみてください。  
3. Python拡張機能が正常にインストールされているか確認してください。

### 仮想環境が正しく動作しない場合  
Pythonのパスが正しく設定されているか確認してください。`settings.json`に以下のような記述を追加することも可能です:  
```json
{
  "python.defaultInterpreterPath": ".venv/bin/python"
}
```

---

## おわりに  
仮想環境を活用することで、Pythonプロジェクトの依存関係を分離し、開発効率を大幅に向上させることができます。VSCodeを使用すれば、さらにスムーズな開発環境の構築が可能です。本記事が皆さんの開発の助けになれば幸いです！

---

もし参考になったら「いいね」や「ストック」をお願いします！ 😊

---
UnityでAI Navigationの項目が見つからない

# はじめに
UnityのAI Navigationは、エージェント（キャラクターやオブジェクト）がナビゲーションメッシュ（NavMesh）を利用して3D空間を効率的に移動するためのシステムである。これにより、障害物を回避しながら目標地点へ到達するパスが自動的に計算される、ゲームやシミュレーションにてAIによるエージェントの自律挙動を簡単に実装できる。

本記事では、UnityでAI Navigationの項目が見つからない症状を解決する手順を示す。

# 環境
本記事で示すUnityエディタのバージョンは```2022.3.23.f1```である。


# 症状
[Window > AI > Navigation]が見当たらない

![スクリーンショット 2024-02-04 140257.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/8e95931e-5030-36c3-c382-864eec0ac230.png)


# 原因
[標準機能として廃止されたためとされている。](https://i-school.memo.wiki/d/AI%20Navigation%20%28Unity%202022.2%20%B0%CA%B9%DF%29)

# 解決策
Package Managerを使ってインストールする。

## 手順
Unityでパッケージマネージャを開く。
![スクリーンショット 2024-02-04 140334.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/c59ce777-13ad-e0d7-d7af-cd9bd50e6c39.png)

パッケージの範囲を[プロジェクト内]から[Unity レジストリ]に変更する。

![スクリーンショット 2024-02-04 140354.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/4d90007b-1178-a895-cf43-a8523870716d.png)

[AI Navigation]を選択して、[インストール]をクリックする。

![スクリーンショット 2024-02-04 140404.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/f6189d76-88e6-44ee-90af-e2f57559ba3e.png)

[Window > AI > Navigation]を確認できるようになる。

![スクリーンショット 2024-02-04 140716.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/737e4a4f-8089-87e8-e74c-4e2f92e44c11.png)



# 参考
https://i-school.memo.wiki/d/AI%20Navigation%20%28Unity%202022.2%20%B0%CA%B9%DF%29

https://docs.unity3d.com/ja/2022.2/Manual/com.unity.ai.navigation.html
Windowsでよく使うVSCodeショートカット

# Windows + VSCodeでよく使う小技
あえて手順→目的という逆の書き方で書いてみたいと思います。
知らないコマンドや手順があれば何に使うものか見てみてください。
役立つものがあれば幸いです。

## ファイルを右クリックして「Open integrated terminal」をクリック
選択したファイルのパスでターミナルを開きたいとき

## explorer .
ターミナルから現在のパスをエクスプローラーで開きたいとき

## code .
ターミナルから現在のディレクトリをvscodeで開きたいとき

## エクスプローラーにcmd
現在のエクスプローラーをターミナルで開きたいとき

## Ctrl + P
最近開いたファイルを見たいとき

## Ctrl + Shift + P
コマンドパレットを開きたいとき

## Ctrl + Shift + P で"Reload"を入力して候補の中から"Reload Window"を選択して実行
VSCodeを再起動したいとき

## Ctrl + shift + P で"ssh config"を入力して候補の中から"Open SSH Config File"を選択して実行
VSCodeのSSH設定ファイルを開きたいとき

## Ctrl + Shift + @
ターミナルを開きたいとき

## ファイルを2つ選択して右クリック→Compare Selected
2つのファイルの差分を確認するとき

## Ctrl + R
ターミナルで過去に使ったコマンドを検索するとき

## Ctrl + G
開いているファイルの特定の行にジャンプするとき

## Ctrl + Shift + F
プロジェクト内の特定の文字列を検索するとき

## Jsonファイルを開いた画面で右クリック→Format Document
Jsonの改行やタブをつけて見やすくしたいとき

## Alt + ← or →
ひとつ前に表示していた場所に戻るとき、進むとき

# F12
関数や変数の定義に移動するとき
Anaconda導入

# はじめに
本記事では、WindowsにてAnacondaを導入する手順を示す。

# ダウンロード
次のサイトからAnacondaをダウンロードする。

https://www.anaconda.com/download

# セットアップ
インストーラを起動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/cf43dea2-bf4c-106f-6b4d-759c523de4e2.png)

[I Agree]を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/821b33fe-d079-bcc8-f404-a9db38aa4a3a.png)

[Just Me(recommended)]を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/6ebfa979-4ca6-78e5-c6ad-876b45c74948.png)

[Next]を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/87fd636e-9fec-b863-22cc-d6aa238e66d7.png)

デフォルトだと次のように選択されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/f3407137-4464-ec79-a5df-fcdb2ba974e0.png)

Pythonを入れるのが初めての環境では次のようにする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/ee60f7f8-865f-6d1a-d3e8-5d251caa79f5.png)


既にPythonがある場合は次のようにする（Pythonの衝突を防ぐため）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/cab53103-7274-1066-3a70-d6ee6d4bbbae.png)

[Install]をクリックすると、インストールが始まる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/ff4681c2-c82f-b7ae-9140-2b90975e8b96.png)

「Completed」が表示されるとインストール完了である。[Next]をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/1523aee8-2130-fea3-b034-96cee3d05223.png)

次の画面にても[Next]をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/796d4c62-7e9a-7894-7b74-62f829a066b7.png)

[Finish]をクリックすると、Anacondaが立ちあがる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/e8659211-d8d5-e30d-c2e0-ea65e1ec5c2f.png)
Stable Diffusionをpythonで動かしたい

# はじめに
本記事では、Stable DiffusionをPythonのスクリプトで実行することを目的とする。

# アカウントを作成する

https://huggingface.co/login

アカウントを登録するときに、「[Hugging Face] Click this link to confirm your email address」という題のメールが届いているのでそちらを確認する必要がある。

# トークン発行
[Settings]をクリックする。

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/96f8acd7-5039-b63e-eae7-f1d6e760d1d3.png)

[Access Tokens]をクリックする。

![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/73a2fa16-2ae0-a336-c76a-2f38df28b029.png)


[New token]をクリックする。

![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/37ea8962-50cc-4075-7083-27a5c8403327.png)


[Name]に任意の文字列を記入する。

![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/567565df-c56a-ee10-1c8c-5aef071dc431.png)


アクセストークンをコピーして控えておく。

![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/3912a4d5-f31f-a6d5-4894-07566c282b85.png)



# 仮想環境の構築
Pythonの独立した環境を作成したい場合は仮想環境を構築されたい。

仮想環境 ```venv``` を構築する。
```
python -m venv venv
```

仮想環境を有効にする
```
venv\Scripts\activate
```

# マシンの構成確認
実行環境に CUDA ( NVIDIA 社のGPUプログラム開発環境) があるか否かでプログラムの一部が異なる。次のコマンドで確認せよ。

```
wmic path win32_videocontroller get caption
```

次に2つの実行例を示す。

## 実行例A: NVIDIA 製の GPU 搭載の場合

```
$ wmic path win32_videocontroller get caption
Caption
NVIDIA GeForce GTX 1080
```

## 実行例B: CPU 内蔵 GPU の場合
```
$ wmic path win32_videocontroller get caption
Caption
Intel(R) UHD Graphics 620
```

# パッケージのインストール
まずは、深層学習のライブラリとしてPyTorchもしくはFlaxのうちどちらかをインストールする必要がある。この記事では、PyTorchの場合のみについて示す。

:::note info
参考程度にFlaxの場合は次のコマンドでインストールされたい。

```
pip install diffusers["flax"] transformers
```
:::

[公式サイト](https://pytorch.org/) にあった次のコマンドでインストールしていく。

```
pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118
```

次のコマンドで数値（バージョンを示す）が返されれば成功している。

```
python -c "import torch; print(torch.version.cuda)"
```


次に ```HuggingFace``` が開発しているライブラリ ```Diffusers``` をインストールする。深層学習のライブラリ（PyTorch/Flax）によってコマンドが違うので注意せよ。

- PyTorchの場合
```python
pip install diffusers["torch"] transformers
```

# プログラム
https://huggingface.co/docs/transformers/main_classes/model#transformers.PreTrainedModel.from_pretrained

## 実行例
```python: test.py
import torch
from torch import autocast
from diffusers import StableDiffusionPipeline

access_token = トークン

# モデルのダウンロード
model = StableDiffusionPipeline.from_pretrained("CompVis/stable-diffusion-v1-4", use_auth_token=access_token)
model.to("cpu")

# import matplotlib.pyplot as plt

num = 3 # 生成したい画像枚数
prompt = "Horse flying in the sky" # 生成させたいもととなる文章
 

# モデルの出力構造を確認
output_structure = model(prompt)

# 出力構造を表示
print(output_structure)

for i in range(num):
    # image = model(prompt)["sample"][0]
    image = output_structure.images[0]

    # 保存
    image.save(f"outputs/{i}.png")
```

# 参考

https://aiacademy.jp/media/?p=3492

https://huggingface.co/docs/diffusers/index

https://pytorch.org/

https://zenn.dev/yagiyuki/articles/load_pretrained
AWSのiOSアプリがAWS User Notificationsに対応したよ？

## はじめに

昨日、こんな記事を見かけたので、試してみました。

https://aws.amazon.com/jp/about-aws/whats-new/2024/12/aws-notification-actions-aws-console-mobile-app-ios/

iOS向けアプリに「notification actions」機能が追加されました。

この機能により、AWS User Notificationsからのプッシュ通知がスマホに通知され、そこから直接操作ができるみたいです。

例えば、EC2インスタンスが停止した際の通知を受け取った場合、通知画面から直接インスタンスの再起動が可能になったりします。

外出中の障害対応等が早くできそうですね。

## 試してみた。

画面下のNotificationsを選択します。

![IMG_4602.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/0e48e884-5f54-c568-badf-8ec44968594a.png)

`Create new`を選択します。
![IMG_4603.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/fdb81733-7ec4-6a9d-3c61-85bafab73b48.png)

ここで通知するトリガーを選択するのですが、アプリ上だと、 CloudWatchしか選べません。

![IMG_4604.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/b3a8ab21-e4a4-9cf7-ffe1-e640804ce97f.png)

WEB版のマネコンだとEC2なども選択可能です。

![スクリーンショット 2024-12-25 5.15.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/bc10db8a-ee69-2ee2-0dec-cd4bd34a87ff.png)

次に通知したいアラームを設定します。

今回は、EC2が停止すると発砲するアラームを作って検証しました。
![IMG_4607.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/d79591d1-82a8-fa83-3476-1e05b9607ace.png)

作成完了。

![IMG_4610.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/62a7b215-be0e-5d47-8a81-a225e8599b7d.png)

## 実際にアラーム状態になると？

こんな感じに通知が来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/e5a687c2-2baa-af84-c72b-5cab0c879185.png)

通知からアプリを起動すると、アラームの内容が確認できました。

![IMG_4613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/a1d88546-94ce-cd9d-51b4-07bea63fbdc0.png)

## 復旧もしてみる。

ついでに、アプリからEC2の起動もしてみます。

![IMG_4615.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/a1e7caa1-ac48-720e-c63f-b445a952e8ab.png)

簡単に起動できますね！

![IMG_4616.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/ecb8a76a-159f-808a-44c2-c521da1160d3.png)

## 最後に

私もそうですが、24時間365日会社から呼ばれる可能性のある人には便利な機能かと思いましたので紹介でした！
[自分用メモ]AI用環境構築で1万回使うコマンド

## どんな記事？
AIガチ勢の自分がよく使うコマンドのメモ
NVIDIA GPUのなかでもCUDA搭載機を使用しているAIローカル構築勢には役に立つと思う

## NVIDIA系
### NVCC
nvcc（NVIDIA CUDA Compiler）は、NVIDIAのCUDA（Compute Unified Device Architecture）を使用してC/C++コードをGPUで実行可能な形式にコンパイルするためのコンパイラです。nvcc --versionコマンドは、インストールされているnvccのバージョン情報を表示します。
```
nvcc --version
```
出力例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/8e216d11-2f89-931f-cef9-0c681f70fe1c.png)


### NVIDIA SMI
NVIDIA SMI（NVIDIA System Management Interface）は、NVIDIA製のGPU（グラフィックス・プロセッシング・ユニット）の状態を監視・管理するためのコマンドラインツールです。主にWindowsおよびLinux環境で使用され、NVIDIAドライバーと共にインストールされます。
```
nvidia-smi
```
出力例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908981/ec49670c-9670-c77d-b8cd-585f738952e8.png)

### CuDNNのバージョン確認
```
cat /usr/include/cudnn_version.h | grep CUDNN_MAJOR -A 2
```

## C/C++コンパイラ（cl.exe）の場所を検索
認識されていなければ何も出ない。認識されていれば特定のパスを示す。
```
where cl
```
---


# PATH系
### システム環境変数の編集
1.PowerShellを管理者権限で起動後、以下のコマンドを実行
```
rundll32.exe sysdm.cpl,EditEnvironmentVariables
```

### PowerShellが認識しているPathの確認
```
$env:PATH
```

## Python系
### Pythonバージョン確認
バージョン確認(簡易)
以下2つは同じ意味である。
```
python --version
python -V
```

バージョン確認(詳細)
```
python -VV
```


### venv環境系
venv環境構築
```
python -m venv [仮想環境名]
```

venv環境アクティベーション
Mac
```
. [仮想環境名]/bin/activate
```
Windows
```
.\[仮想環境名]\Scripts\activate
```

venv環境デアクティベーション
```
deactivate
```

インストール済みパッケージの書き出し
```
pip freeze > requirements.txt
```

書き出したファイルを一括インストール
```
pip install -r requirements.txt
```

### conda環境系
```
conda create -n [仮想環境名] python=<任意のPythonバージョン>
```

conda環境をアクティベーションする
```
conda activate [仮想環境名]
```

conda環境をデアクティベーションする
```
conda deactivate
```

## TensorFlowがGPUを認識しているか確認する
```
import tensorflow as tf
print(tf.__version__) # TensorFlowのバージョンを確認
print(tf.config.list_physical_devices('GPU')) # GPUデバイスのリストを表示
```
Javaで「閉じるボタンをクリックした時にアプリケーションを終了する」の動作を確認してみた

# 概要

Javaで「閉じるボタンをクリックした時にアプリケーションを終了する」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/tutorial/jframe/index4.html

# 実装

以下のファイルを作成しました。
```Sample.java
import javax.swing.JFrame;

class Sample{
  public static void main(String args[]){
    JFrame frame = new JFrame("MyTitle");
    frame.setSize(728, 400);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setVisible(true);
  }
}
```

以下のコマンドを実行しました。
```
$ javac Sample.java 
$ java Sample
```

# まとめ

何かの役に立てばと。
Cloud Run functions × TypeScript 開発をしよう！【発展編：肥大化したTerraformをベストプラクティスに基づいて書き直す】

# はじめに
こちらの記事では以下のことについて説明しています。
- Terraform のベストプラクティスについて
- ここまで書いてきた Terraform ファイルのリファクタリング

---

ここまで構築してきた公式のサンプルを元に改良してきた `main.tf` ですが、ファイル末尾にリソースをどんどん追記していました。そのおかげで行数は200行超えでかつ、リソースもまとまって書かれていないため可読性の鬼（悪い意味で）になっております。

今回は公式や有志の方が提唱している Terraform のベストプラクティスに従って、今まで書いてきた tf ファイルをリファクタリングしていきます。~~もはや Cloud Run functions 関係ないね。~~

# Terraform のベストプラクティスについて

公式が出してくれています。

https://developer.hashicorp.com/terraform/language/style

Googleも GCP リソースを Terraform で構成する際のベストプラクティスを紹介してくれています。

https://cloud.google.com/docs/terraform/best-practices-for-terraform?hl=ja#reusable

このベストプラクティスのうち、以下を適応しようと思います。

- 変数を用途や目的がすぐわかる名前を付ける
- プロバイダのバージョン固定のため `terraform.lock.hcl` を Git 管理下に置く
- モジュール分割


# Terraform ファイルのリファクタリング

### 変数を用途や目的がすぐわかる名前を付ける
```tf: "default" を 内容がわかるように変更
# default -> functions_resource
resource "google_storage_bucket" "functions_resource" { ... }

# default -> sample
resource "google_cloudfunctions2_function" "sample" { ... }

# role によって IAM の名称を適切に変更する member -> invoker
resource "google_cloud_run_v2_service_iam_member" "invoker" { ... }
```

# モジュール分割

`modules` ディレクトリを作成し、論理的に関連するリソースをまとめた構成に作り直します。ベストプラクティスでは `modules` と同階層に各環境用のディレクトリ `prod`, `pre-prod` などを作成していますが、今回紹介しているケースはそこまで規模の大きなプロジェクトを想定していないのでこのケースでは作成しません。

```bash: 修正後のディレクトリ構成
.
├── modules
│   ├── functions
│   │   ├── main.tf
│   │   ├── outputs.tf
│   │   └── variables.tf
│   ├── secrets
│   │   ├── main.tf
│   │   ├── outputs.tf
│   │   └── variables.tf
│   ├── espv2
│   │   ├── main.tf
│   │   ├── outputs.tf
│   │   └── variables.tf
│   └── scheduler
│       ├── main.tf
│       ├── outputs.tf
│       └── variables.tf
├── main.tf
├── outputs.tf
└── variables.tf
```

この構成で書き直したものが以下になります。commit 履歴を見て比較してみてください。

https://github.com/kei-tenkawa/advent-calendar-2024/commit/2853cc2c1af332f50a5cb84f3f0c03a51461a100


# おわりに
以上、Terraformファイルのリファクタリングでした。tfファイルは油断していると急激に肥大化していくので、最初からベストプラクティスに則って綺麗に構築しておきたいですね。
CSSOMツリーとレンダリングツリーの構築

## はじめに
この記事は以下の続きです。

https://qiita.com/axoloto210/items/3208ba1446901fe43cae

レンダリングエンジンのHTMLパーサーは`<link>`や`<style>`タグ、`style`属性をみつけるとCSSOMツリーと呼ばれる木構造の構築を行います。
DOMツリーとCSSOMツリーが構築されると、この2つの木構造から画面上での表示位置や大きさといった情報を持つレイアウトツリーを構築します。

この記事では、これらの木構造が構築されるまでの流れについてみていきます。

## `CSSOM`
`CSSOM`はCSS Object Model の略で、（HTMLでのDOMのように、）CSSルールへのアクセスや、スタイルの変更を行うAPIを提供するオブジェクトモデルです。

`CSSOM`は「シーエスエスオブジェクトモデル」や「シーエスエスオーエム」と読まれます。

### `CSS`の字句解析・構文解析
レンダリングエンジンのHTMLパーサーは`<link>`や`<style>`タグ、`style`属性をみつけるとCSSOMツリーと呼ばれる木構造の構築を行います。
JavaScriptによるスタイルの変更もCSSOMツリーへ反映されます。

CSS もHTML と同様に字句解析・構文解析が行われます。
字句解析によって、CSSを構成する文字列はトークン化され、`p`や`h1`といったセレクタトークン、`{`や`}`を表すトークン、プロパティや値、`:`を表すトークンなどに分割されます。

そのトークンをもとに、CSSOMツリーという木構造が構文解析によって構築されます。
`StyleSheetList`をルート要素とする木構造で、`document.styleSheets`でアクセスできます。

https://developer.mozilla.org/ja/docs/Web/API/StyleSheet

https://www.w3.org/TR/cssom-1/

https://www.w3.org/TR/css-syntax-3/#tokenizing-and-parsing


## レイアウトツリー
DOMツリーとCSSOMツリーが構築されると、この2つの木構造からレイアウトツリーが構築されます。
レイアウトツリーは画面での実際の位置や大きさなどのレイアウト情報をもつ木構造です。

レンダリングエンジンは、DOMツリーの各DOM要素に対して、CSSOMツリーの各CSSルールセットがセレクタに適合するかを確認していきます。
セレクタが適合するCSSルールセットが各DOM要素について出揃ったら、どのルールが優先して適用されるかの指標であるCSS詳細度を計算し、そのほかいくつかの変換を経て、適用されるプロパティと値が決定されます。

https://qiita.com/axoloto210/items/a0cef9e7bdd27cd3345e

### 計算済みスタイル
先の過程でDOM要素に適用されるプロパティと値が決定されましたが、これは計算済みスタイルと呼ばれます。
計算済みスタイルは画面に表示される値を表すため、`%`や`em`などの相対値は`px`などの絶対値に変換されています。
また、プロパティの初期値の設定や継承関係の解決、カスケーディングの適用が行われます。

計算済みスタイルは、`Window.getComputedStyle()`によって取得することも可能です。

https://developer.mozilla.org/ja/docs/Web/API/Window/getComputedStyle

### レイアウトツリーの構築
これらの情報をもとに、どの要素がどのように表示されるかの情報を持つ、レイアウトツリーが構築されます。
このレイアウトツリーをもとにブラウザは画面の描画を行います。

要素の大きさや位置が変わるとレイアウトツリーは再構築されます。

レイアウトツリーの構築はコストが高いため、頻繁に再構築される状況は避けたいところです。
オブジェクト指向

## はじめに
オブジェクト指向について自分の言葉で説明できる自信が少しなかったので、来年を迎える前に復習するために書きました。

## オブジェクト指向についての現段階の理解

主な3つの要素は
**クラス・継承・ポリモーフィズム**

- **クラスを作成（カプセル化）** することによって、再利用性を高めることができる
- **継承**することによって、コードの重複を減らすことができる。保守しやすい
- **ポリモーフィズム**によって、同じ名前のメソッドが他のクラスでは異なる挙動をする

クラスはオブジェクトのひな型や設計図であり、そこから作成されたオブジェクトをインスタンスと呼ぶ。


### さっそく調べていく


## 「オブジェクト指向ってなに？」一言でいうと

オブジェクト指向ってなに？って聞かれた時にスパッと言い切れないので、調べてみたところいくつかありました。

**「実世界のものごとを、データ（属性）とその動作（メソッド）を一つの単位（オブジェクト）として捉え、それらのやり取りでシステムを構築する考え方」**

**「プログラムを設計するときに考え方の一つで、プロパティとメソッドをひとまとめにしてクラスを作り、それを元にオブジェクト（インスタンス）を作成する手法」**

これを読んだときにコードのイメージが湧いたり、たとえ話が思い浮かぶと良さそう。

### オブジェクトって一言で言うと何？
**データ（状態）とそれに関する操作（振る舞い）をひとまとめにしたもの**

<br>

3大要素については間違ってはいなさそうでした。

カプセル化についての説明はメモ
- データ（状態）とそれを操作する処理（振る舞い）を一つのオブジェクトにまとめること。
- 外部から直接データを変更できないようにして、内部の一貫性を保つ



## オブジェクト指向を理解していると何がいい？

:::note info
1. **コードの保守性が向上し、エラーを防ぎやすくなる**
1. **柔軟性の高い設計が可能になり、変更要求に応じやすい**
1. **チーム開発においても役割分担がしやすい**
1. **ソフトウェアの規模が大きくなっても管理しやすい構造を保てる**
:::


## 具体的なポイント

### 変更が局所化しやすい
オブジェクト指向では、データとその操作をクラスにまとめ、カプセル化しているので、特定の機能や挙動を変更したい場合、該当するクラスやメソッドを修正すればよくなる。

### コードを重複を避けられる
継承やメソッドの再利用により、同じ処理を複数個所に記述する必要がなくなる。これにより、修正が必要になったときに複数個所を変更する手間を減らし、バグのリスクを低減することが出来る。

### 再利用性と拡張性
継承を使うことで、既存のクラスの機能を引き継ぎ、新しい機能を追加したクラスを簡単に作ることが出来る。親クラスに共通部分をまとめることで拡張が容易になる。
ポリモーフィズムによって、異なるクラスでも同じインターフェース（メソッド名）を持つことで、同じように扱える。わんわんにゃーにゃー的な。

### バグが発生しにくい構造
オブジェクト指向では、外部からクラス内部データを直接操作できない（カプセル）のため、不正な値や予期しない操作を防ぎやすくなる。

### コードの可読性と理解のしやすさの向上
クラスやメソッドを使って責務を分割することで、コードの構造が明確になり、開発者がコードを理解しやすくなる。

### テストがしやすい
クラスやメソッド単位で動作を確認しやすいので、ユニットテストを効率よく作成できる。変更があった場合でも、影響範囲を限定できる。

メリットをずらっと並べると
**「変更がしやすい」「バグが起きにくい」「理解しやすい」「修正の影響範囲が狭い」「拡張がしやすい」**




## オブジェクト指向のクラスとは？

オブジェクトとはデータと処理をまとめた集まりのことで、オブジェクト指向の基本となる。

クラスとはこれから作る「モノの定義」「設計書」

クラスはあくまで設計図であって、実際に動作して仕事をしてくれるのは「インスタンス」。クラスからインスタンスを作ることをインスタンス化という。

### クラスがもつ３つの要素
#### 属性（フィールド/インスタンス変数）
属性とは、クラスやそのインスタンスがもつデータのこと。オブジェクトが何を表し、どのような状態であるかを記録する。

#### メソッド
クラスに属する機能や処理を表す。メソッドを通じて、クラスやオブジェクトがどのように振る舞うかを定義する。


#### コンストラクタ
オブジェクトが生成されるときに初期化処理を行うメソッド

### 属性とプロパティの違い
「属性」は、オブジェクトが持つ本質的な性質や情報
「プロパティ」は、プログラミング言語における実装の側面を強調する用語で、属性をプログラム上で操作可能にする仕組みのこと


## 調べる前との差分

- 今まで具体的なポイントのパートで挙げた特徴を **「オブジェクト指向」で作られているから**という括りで理解していなかった。
- クラス内にある要素をしっかりフレーミングできていなかった
-
【Unity】Arbor3のAnimatorCrossFadeからLayerとStateを入手できる方法を作った

# はじめに
この記事は[Hamster Output Advent Calendar 2024](https://qiita.com/advent-calendar/2024/game_hamster)の14日目の記事です！

ArborFSMのステートから現在再生中のAnimationの情報を取得したいなと感じるようになり、取得方法を探しましたがスクリプトの中身を見る限り取得方法がありませんでした...。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588406/70561742-a1d4-bd67-46b1-c2aea73976b0.png)

スクリプトの中身を載せるのはアウトなので...どうやって取得できるようにしたかの手段を書きます。

:::note warn
投稿者はEditorの処理を完全に把握していません。あくまで、自分が欲しい処理を追加するために少し追加しただけです。
:::


# AnimatorCrossFadeの中身を確認する
利用したい情報が入っている変数名だけ書くと、下の内容になります。

```C#:AnimatorCrossFade.cs
// LayerとStateを保持している変数たち
private string _CacheLayerName;
private string _CacheStateName;
```

自分が調べた限りにはなりますが、ArborにはEditorの変数を参照する手段がないためこのままだと参照できないです。

# AnimatorCrossFade.csを複製して処理を追加する
AnimatorCrossFadeに直接追加するのもありかな...?と考えましたが、仮にUpdateが来た時に困りそうな気がしたので、別フォルダーに複製して作りました。

そして、複製されたAnimatorCrossFadeに追加された処理が以下の通りです。プロパティを追記しました。

```C#:CustomAnimatorCrossFade.cs
// ここ以外の内容はAnimatorCrossFade.csと同じ
#region 2024.12.24にハムスターが追加した部分
public string GetChaceLayerName => _CacheLayerName;
public string GetChaceStateName => _CacheStateName;
#endregion
```
これで、ArborEditor上にスクリプトが配置できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588406/e940d2ff-cc20-37d4-1c6e-4b74e4431916.png)

現時点では、AnimatorをアタッチしてもLayerやStateに選択できるタブは出てきません。通常のAnimatorCrossFadeではAnimatorを参照すると以下の状態になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588406/34a7547b-6c1b-f39c-be01-525c93b2a13e.png)

次はこのタブを出すために、もう一つのEditorのスクリプトを複製します。

# AnimatorCrossFadeInspector.csを複製して一部の処理を変更する

変更する部分はclassの上にあるCustomEditorの内容を変更するだけです。

```C#:CustomAnimatorCrossFadeInspector
[CustomEditor(typeof(CustomAnimatorCrossFade))]
```

EditorでAnimatorを設定するとAnimatorCrossFadeと同じようにLayerとStateが設定できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588406/9ccc2a60-9ac7-86ab-bf59-18c912ff4f2d.png)

# LayerとStateの参照方法

同じステート内にCustomAnimatorCrossFadeがあればGetComponentで取得できます。

```C#
// 変数宣言
private CustomAnimatorCrossFade _customAnimatorCrossFade;

// 取得方法
_customAnimatorCrossFade = GetComponent<CustomAnimatorCrossFade>();

// こんな感じで使えます
var layer = _customAnimatorCrossFade.GetChaceLayerName;
var state = _customAnimatorCrossFade.GetChaceStateName;
```

これで、LayerとStateをAnimatorCrossFadeから参照できるようになりました。

詳細に書けない内容な記事にはなりましたが、コピーしたり工夫すれば割と自分が追加したい処理を入れれるんだなと思いましたー
macOS Sequoia 15.2にアップデートしたら、git pushだけエラーになった

先日、仕事用のMacBook Pro (M1; 2021)のOSをアップデートしました。
その後、　`git push` を実行すると、必ずエラーになったので、色々探して（一応？）解決しました。

`git fetch` や `git pull` に問題はなかったので、すごく謎なのですが…。

# TL;DR

ネットワークインターフェイスのMTUをStandard (1500)から **Custom (1280)** にすると、解決するかもしれない。

# 試したこと

## プロバイダのせい？
* 固定回線[^1]ではなく別会社の携帯回線[^2]経由にしてみる →成功（！）
* ただし常に携帯回線を使うわけにもいかないので、根本的解決ではない [^3]

## SSHで失敗するなら、HTTPSなら成功する？
* `git config` の `remote.origin.pushurl` をHTTPSに書き換えてみる→失敗

その際に出たエラーで、SSLがどうとか出てきたので、プロトコルのせいではないかもしれない…と思う

HTTPSの場合
```
Pushing to https://bitbucket.org/foobar/hogehoge.git
Enumerating objects: 224, done.
Delta compression using up to 10 threads
Total 144 (delta 63), reused 0 (delta 0), pack-reused 0 (from 0)
POST git-receive-pack (64584 bytes)
error: RPC failed; curl 56 LibreSSL SSL_read: LibreSSL/3.3.6: error:1404C3FC:SSL routines:ST_OK:sslv3 alert bad record mac, errno 0
send-pack: unexpected disconnect while reading sideband packet
fatal: the remote end hung up unexpectedly
Everything up-to-date
```

SSHの場合
```
Pushing to bitbucket.org:foobar/hogehoge.git
Enumerating objects: 224, done.
Delta compression using up to 10 threads
Total 144 (delta 63), reused 0 (delta 0), pack-reused 0 (from 0)
Connection to bitbucket.org closed by remote host.
send-pack: unexpected disconnect while reading sideband packet
fatal: the remote end hung up unexpectedly
```

## OSのせい？

事象が発生しだした時期と、アップデートをした時期を正確に覚えていないのですが、OSアップデートを期に、一部のHTTPSサイトの接続が不安定になったりしました。

そこで、別のPC（手軽にSSHを使えたChromebookのLinux環境）で試した結果、何も問題なく `git push` できました。

# 検索してたどりついた結果

似たような現象をGoogleで検索していると、以下のApple CommunityのDiscussionが見つかりました。
https://discussions.apple.com/thread/255782823

マイナーバージョンは異なるものの、ブラウザで `ERR_SSL_PROTOCOL_ERROR` が起きる現象は同じだったので回答を探っていると、以下のようなものを見つけました、

> Changing MTU to 1280 on Wifi Settings seems to have helped, but still testing. The errors seems to disappear for some time and then come back, so hard to know what is going on.

他マシンでは普通にMTUが1500なので（更に、別回線経由だと問題がない）ので、これで直るのかなと半信半疑のまま試すと…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143240/aac38560-7513-944f-60a1-8f3039c2b5b7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143240/336cdbaa-b016-3841-dc27-d919a87b1139.png)

Wi-Fi、有線LANどちらも、MTUを1280にすると、問題なく `git push` もでき、ブラウザでのHTTPS接続も安定しました。

ひとまず仕事に影響がなくなったのでよかったですが、理由はよく分かりません（すみません）。

[^1]: タイのTrue Gigatex Fibre
[^2]: タイのAIS
[^3]: 余ったミニPCに、OpenWRTをインストールしてルーターとして使っている。
MultiWAN Managerを使用して「主回線＝光ファイバ、副回線＝USBドングル経由のモバイル回線」に設定しているため、家庭内すべてを副回線経由に簡単にできる。
しかし、パケット量がすぐ上限に達しそうなので、解決するまでは `git push` の瞬間だけ切り替えるようにして回避した。
OpenWRTを使っている点だけは、一部「逸般の誤家庭」状態。
状態管理

本記でまとめる状態の知識分野
・状態管理とatomicdesign
・メモ化とパフォーマンス
・redux


# 指針
状態設計を意識したフロー
必要な状態を洗い出す:
UI にどのような状態が必要かを明確化。
状態を分類（ローカル、グローバル、サーバー）。

状態の配置を決定する:
状態を必要とするコンポーネントの位置を特定。
配置のルールに基づき、適切な場所で管理。
*状態を「最も近い共通祖先」に配置
* 状態を下位層に押し込めすぎない

リフローを最小化:
状態を分割し、適切な構造で管理。
メモ化を活用。

将来の拡張性を考慮:
状態管理ライブラリの導入を検討。
グローバルとローカルのバランスを最適化。


# 状態管理とatomicdesign

1. Atoms (原子)
・役割:UI の最小単位として、個別の機能を提供。責務を持たず、単純な表示やスタイルに集中。
・ロジック:ほぼロジックを持たない。必要であれば、クリックや入力イベントのような基本的なインタラクションを扱う程度。ロジックの実装は親コンポーネントに委譲。
・状態:状態は持たず、必要なデータをすべて props として受け取る。

2. Molecules (分子)
・役割:複数の Atom を組み合わせて、単一の機能を持つ UI 部品を構成。Atom 間の簡単な連携や、単一のユースケースに対応。
・ロジック:子コンポーネント（Atoms）のインタラクションの連携。軽度のビジネスロジック（例: 入力値の検証）。
・状態:状態を持たないのが原則。ただし、必要に応じて、ローカルな一時状態を持つ場合もある（例: フォーカスの管理）。状態管理の責務は、Organisms または Pages に委譲。

3. Organisms (有機体)
・役割:Molecules と Atoms を組み合わせて、機能的なセクションを形成。例: ナビゲーションバー、検索フォーム、ダッシュボードのウィジェットなど。
・ロジック:UI セクション内のロジックを管理。子コンポーネント間のデータフロー。ユーザーアクションの処理（例: 検索ボタンが押されたら API リクエストを親に通知）。一部のビジネスロジックを持つことが許されるが、複雑なロジックは上位層に委譲。
・状態:必要な場合、セクション内で使用するローカル状態を管理。UI の制御（例: モーダルの開閉状態）。操作中のデータの一時保存（例: フォームの入力内容）。グローバルな状態（例: アプリ全体のテーマ）は Context API や Redux を通じて受け取る。

4. Templates (テンプレート)
・役割:ページのレイアウトや構造を定義。Organisms を配置して、全体的な UI の枠組みを提供。例: ヘッダー、サイドバー、メインコンテンツの配置。
・ロジック:ロジックは基本的に持たない。Organisms 間のデータの受け渡しや、テンプレート自体の構造に関する軽微なロジックのみ。
・状態:状態を持たない。必要なデータや状態は親コンポーネント（Pages など）から受け取り、Organisms に渡す。

5. Pages (ページ)
・役割:完全な画面を構築するためのエントリーポイント。Templates にデータやロジックを注入し、最終的な画面を形成。アプリケーションの中で一番上位に位置し、API コールやグローバル状態管理を行う。
・ロジック:ビジネスロジックや非同期処理を実行。データ取得（例: API コール）。状態の変化に応じてテンプレートや Organisms を動的に切り替える。アプリ全体に関わるロジックをここで処理する。
・状態:グローバルな状態やページ単位の状態を管理。ページ内のデータ（例: 検索クエリやフィルタ設定）。ページの初期化状態（例: ローディング状態、エラーハンドリング）。必要に応じて、状態管理ツール（例: Redux、Recoil）を利用。


# メモ化とパフォーマンス
## 再レンダリングの条件
①propsの変更
②ローカルstateの変更
③そのコンポーネントが使用しているグローバルstateの変更
③親コンポーネントの再レンダリング
これをもとにDOMツリーが更新される

## メモ化、その他不要なレンダリングを抑える手法
①React.memo
・基本的な仕組み:
親コンポーネント再レンダリングの際に渡すプロップスに変更がなければ子コンポーネントの再レンダリングをスキップする
・注意点：
react.memoは浅い比較を行う。親コンポーネント内で定義された配列やオブジェクトは毎回別のインスタンスとして扱われる。
つまり毎回参照の異なる配列やオブジェクトが生成されることで内容が同じでも別のものとしてpropsが渡されてしまうためusememoなどのhooksと組み合わせて使う必要がある。


②useMemo
・基本的な仕組み:
依存関係に変更がない場合再計算を行わずに以前の値を利用する。
再計算が行われると再レンダリングが起こる。
・使用例:
react.memoと組み合わせた不要な再レンダリングの防止。再レンダリング時のオブジェクトの再生成を防ぐ
```
    // オブジェクトをuseMemoでメモ化
    const config = useMemo(() => {
        return { theme: 'dark' };
    }, []); 
```
・特定の値の変更に依存して行われる関数の再実行(副作用の伴わない場合)
＊副作用:props,stateに基づいてUIを制御する処理以外の処理。API通信。タイマー管理など。タイミングの制御が難しいためuseEffectによって特別にレンダリング後に実行を行うように制御しなければならない。

③useCallback
・基本的な仕組み:
関数の再生成を防ぐ
・使用例:
関数をpropsとして渡すときにusememoと組み合わせて使用。
親コンポーネントが再レンダリングされても依存配列に変更がなければプロップスに変更は起こらないため不要な再レンダリングを防止できる。

④useRef
・基本的な仕組み:
値の保持。useMemoとの違いは依存配列を必要としないこと、値が更新されても再レンダリングが起こらないこと
・使用例:
ソケットインスタンスの再生成による不要な再接続を防止する

# redux
別記事にまとめる
JSON serverをモックサーバーとして使う時の小ネタ

# はじめに

今回は、JSON serverをモックサーバーとして使う時の小ネタを紹介します。

想定しているシーンとしては、フロントエンドの開発を行う際に、バックエンドのAPIがまだ完成していない場合に仮の値を返すためだけに使う場合です。

## JSON serverをモックサーバーとして使う時の小ネタ

- すべてのリクエストをGETメソッドとして受け付ける

すべてのリクエストをGETメソッドとして受け付けるようにすることで、POSTやPUTなどのリクエストをしても常に一定の値を返すようにすることができます。
たとえば、以下のような`db.json`があるとして、POSTを送信するとpostsは増えていきます。

```json
{
  "posts": [{ "id": 1, "title": "title", "author": "john" }]
}
```

`{ "id": 2, "title": "title2", "author": "john" }`をPOSTで追加すると、以下のようになります。

```json
{
  "posts": [
    { "id": 1, "title": "title", "author": "john" },
    { "id": 2, "title": "title2", "author": "john" }
  ]
}
```

これは不要な差分ですし、仮の値を返すためだけに使いたいのでpostsが増えていくのは避けたいです。

これに対処するため、すべてのリクエストをGETメソッドとして受け付けるようにしましょう。

```js:index.js
server.use((req, res, next) => {
  req.method = 'GET'; // すべてのリクエストをGETと解釈させる
  next();
});
```

こうすることで、POSTやPUTなどのリクエストをしても常に一定の値を返すようにすることができます。

- クエリパラメーターを無視する

こちらも、「すべてのリクエストをGETメソッドとして受け付ける」と同じようにクエリパラメーターを無視することで、本来クエリパラメーターによって結果がブレるところを返す値が変わらないようにすることができます。

```js:index.js
server.use((req, res, next) => {
  req.url = req.url.split('?')[0];
  next();
});
```

クエリパラメーターは?以降の文字列なので、それを削除することでクエリパラメーターを無視することができます。

- JSON serverのログを出力しない

JSON serverはリクエストごとにログを出力しますが、それを出力しないようにすることもできます。
私の開発環境では、フロントエンドと同じターミナルでJSON serverを起動しているので、ログが出力されると見づらくなってしまいます。

そこで以下の方法を使ってログを出力しないようにしています。

```js:index.js
const middlewares = jsonServer.defaults({ logger: false });

server.use(middlewares);
```

`jsonServer.defaults`に`logger: false`を渡すことで、ログを出力しないようにすることができます。

これでログが多少減るので、見やすくなると思います。

- サーバーが正常に起動したことを知らせる

通常、JSON serverはサーバーが起動したことを知らせるログを出力しますが、JSON serverのログは出力しないようにしてしまっているのでその点は不便になってしまっています。
そこで以下の方法を使ってサーバーが正常に起動したことを知らせるようにしています。

```js:index.js
server.listen(3001, () => {
  console.log('json-server: running on server !');
});
```

`server.listen`の第二引数にコールバック関数を渡すことができるので、`console.log`を用いてサーバーが正常に起動したことを知らせるようにしています。

- リクエスト受け取り時にその情報を出力する

ログが多すぎると困りますが、全く出ないのも困ります。
リクエスト受け取り時にその情報を出力するようにしておくと、リクエストがちゃんと来ていることがわかったり、リクエストの内容を確認することができるので便利です。

```js:index.js
server.use((req, res, next) => {
  res.on('finish', () => {
    const log = `json-server:  ${req.method} ${req.originalUrl} ${res.statusCode}`;
    console.log(log);
  });

  next();
});
```

このようにすることで、リクエスト受け取り時にその情報を出力することができます。
`req`にはリクエストの情報が、`res`にはレスポンスの情報が入っているので、それを使ってログを出力しています。

必要に応じて、欲しい情報をログに出力するようにできるのでとても便利です。
また、「json-server: 」という文字列をつけていることで、JSON serverのログだと区別しやすくするようにしています。

- CORSエラーを回避する

JSON serverを使っていると、CORSエラーが発生することがあります。
以下のようにすることで、CORSエラーを回避することができます。

```js:index.js
server.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Headers', '*');

  next();
});
```

`res.header`を使って、`Access-Control-Allow-Origin`と`Access-Control-Allow-Headers`を設定することでCORSエラーを回避することができます。
`http://localhost:3000`の部分は、適切なURLに置き換えてください。

## おわりに

いかがだったでしょうか？
１つでもお役に立てるものがあれば嬉しいです。

最後まで読んでいただき、ありがとうございました！
筋トレのためのトレーニングバンドを導電糸でデバイスにしてみた

## はじめに
導電糸は通電性のある糸で、伸縮性のある素材に縫い付けると、伸縮時に電気抵抗値が変化します。この性質については以前から知っていましたが、実際に自分で扱ったことがなかったため、試してみることにしました。

なお、導電糸の縫い方による抵抗値の比較については、こちらの記事で検証しています。

https://qiita.com/tendots/items/9b6102753347c798ec74


## リサーチ
導電糸をミシンでゴムバンドに縫い付け、縫い方による抵抗値の変化を計測しました。
複数のパターンで試した結果、私が持っているミシンで可能な縫い方の中で、最も抵抗値の変化が大きい方法を見つけました。

### 検証した縫製の一部
![名称未設定-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242072/6104349f-1478-dc2b-d492-495a00ec72fd.png)


### 最も抵抗値の変化が大きかった縫い方
![IMG_3115.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242072/dcdf3fc6-ba58-798e-83a4-cba38d1d8212.png)


これは「伸縮強化縫い」という、伸縮性のある素材に使われる「伸縮縫い」の一種です。
この縫い方で縫ったゴムバンドの切れ端（約5cm）は、
通常時は15Ω、伸長時には25Ω程度まで抵抗値が変化しました。
<iframe width="458" height="815" src="https://www.youtube.com/embed/VqxC7sXidoc" title="IMG 3130" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

なお、伸縮縫いを両端から2本渡したり、上下にジグザグに縫う方法も試しましたが、
効果はあまり見られませんでした。


## 実装
今回、この「伸縮」と「通電性」を活用して何か作れないかと考えました。その結果、伸縮回数をカウントできるトレーニングバンドを作ることにしました。

改めてゴムバンドに導電糸を縫い付け、最低限の検証が可能なトレーニングバンドを作成しました。



改めてゴムバンドに導電糸を縫い付けて最低限の検証ができるトレーニングバンドを作成しました。
![IMG_3128.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242072/e46654a0-750f-e5dc-5227-82805cedd69f.png)


縫い方が少し歪なのは、私の技術不足によるものです（涙）。
画像では、左上から右方向に縫い進め、再び左側の下へ戻るようにして横向きのU字形状になっています。この形状では、通常時400Ω、伸長時750Ω程度に抵抗値が変化しました。

M5StickC Plusを使用し、`AnalogRead()`で抵抗値の変化を取得しました。通常時と伸長時の値が約1860付近で変動していたため、この値を閾値として採用しました。以下は超簡易なプログラムです。



```
#include "M5StickCPlus.h"

int ct = 0;
int preA = 0;

void setup() {
  M5.begin();
  Serial.begin(115200);
}

void loop() {
  
  M5.update();
  int a = analogRead(26);//32(G33)
  //Serial.println(a);
  if(a < 1860 && preA > 1860){
    ct ++;
    Serial.println(ct);
  }
  if ( M5.BtnA.wasPressed() ) {
    Serial.println("Clear");
    ct = 0;
  }

  

  preA = a;
  delay(200);
}
```


実際に作成したデバイスの動作動画はこちらです。

<iframe width="458" height="815" src="https://www.youtube.com/embed/yXp7BJGz9os" title="IMG 3127" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

伸縮のたびに、奥の画面で回数がカウントされていく様子が確認できると思います！



## 感想
最低限、動作するものが作れました。
この仕組みを応用して、例えば伸縮時の動きと静電容量を組み合わせた姿勢推定なども可能かもしれません。
今回の検証はここまでとします
学祭でゲームをチーム開発した話

## はじめに

私の所属するMCCというサークルでは、毎年学祭に向けてゲームを開発しています。この記事では、今年どんなものを作ったのか、どのように作ったのか紹介し、振り返りをしていきたいと思います。技術面の話はほとんどしない予定です。

Unity側の技術的な話も部員が書いてくれたので、気になる方はそちらもご覽ください。

https://qiita.com/N-Island/items/fc26c250cdcb515c8006

また、リポジトリも公開されているのでぜひ。

https://github.com/tuatmcc/SchoolFestival2024_Unity/

https://github.com/tuatmcc/SchoolFestival2024_Frontend

## 作ったもの

今回作ったものは弾が跳ね返るマルチプレイシューティングゲームで、事前登録パートと、ゲームパートに分かれています。

### 事前登録パート

並んでいる間の待ち時間で事前登録をします。

1. 来場者は自身のスマートフォンでWebページにアクセスします
2. ニックネームを入力し、登録完了
3. そのままキャラメイクに入り、好きなモデル・髪色・アクセサリ等を選びます
4. 発行されたQRコードを持ってゲームへ→

![Frame 74.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2637844/813576ce-9b43-295d-526c-58267d634faa.jpeg)

### ゲームパート

お菓子の世界で4対4でグミを投げ合います。チーム戦で[^1]、最大4人までマルチプレイでき、残りのキャラはNPCとなります。

1. 発行されたQRコードを画面にかざし、ゲームに入ります
2. 待機ルームで所属チームを選びつつ、他のプレイヤーの参加を待ちます
3. チーム確定後、カウントダウンの後シューティングに入ります
4. 終了後、リザルト画面が表示されます

<iframe width="560" height="315" src="https://www.youtube.com/embed/7DXXWY4bBso?si=mDs6sp23LW7gY-7Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## 技術構成

ほんとうにざっくりと。

### WEBサイド

- Remix
- TypeScript
- Cloudflare Pages (ホスティング)
- Supabase (Auth, データーベース)

### ゲームサイド

- Unity
- C#
- Netcode for GameObjects (マルチプレイ)
- Supabase (データベース)

## 開発の流れ

何故これを作ったのか、誰がどのように作ったのか書きました。上手くまとまっていなくて読みづらいです。

### キックオフ

学園祭2ヶ月前ほどに、ようやくメンバー募集とアイデア出しを始めました[^2]。アイデアマンがいないのもあって時間がかかりましたが、

- **マルチプレイは楽しいし、Netcodeを使ってみたい**
- **WEB開発詳しい人いるし、組み合わせたらタスクも分散できて良さそう**
- **弾が反射するとか**

のようなアイデアから制作物を決定しました。今回の作品タイトル「RicoShot」は「ricochet(跳弾)」という英単語から来ています。

また、ゲームの世界観を共有する上で

- **フォールガイズのようなポップな感じ**

を目指し、後にお菓子の世界ということになりました。

### 役割分担

おおまかに以下のように分かれていました。

- **WEBサイド**: 1~3名ほど
    - デザイン・設計・実装など
    - コンポーネントの実装など
- **Unityサイド**: 3~8名ほど
    - 設計・マルチプレイの実装・主要インターフェースの実装など
    - シューティング部分のプロトタイプ作成
    - MLAgentを用いたNPCの作成
    - 様々な機能の実装
- **Blenderサイド**: 2名ほど
    - キャラクターモデル・アニメーション作成
    - 背景オブジェクト・ステージ作成

力のある人に丸投げしていた面も多かったですが、少しでも開発でコントリビュートした人を数えると**12名**もいます。去年は5名だけで作っていたので嬉しいですね。

### 進捗管理

毎週オフラインで集まり、共同編集ドキュメントに各自進捗を書いて報告し、次のタスク分担を相談・決定する会議を行ないました。

ただ、Unityの開発が1週間おきのタスク更新では間に合わず、本番2週間前あたりから

**「GitHubのIssueに順次タスクを書いていくから`誰かやって`タグのついたIssueをこなして欲しい」**

という雑な形式を取ることになりました。

## まとめ

今回のチーム開発で得られた知見です。一般的には目新しいものではありませんが......

- 開発は早めに始めるべき
- 週一の会議に頼らず、Discord でのリアルタイム性の高いコミュニケーションを主軸にした方が進めやすい
- 未知の技術を取り入れすぎるとタスクの割り振りや設計の見通しが立ちにくい (Netcode, MLAgent)
- デザインできる人がいると完成度が高まる。

## おわりに

この記事では開発面にフォーカスしているため触れていませんでしたが、学園祭当日の接客に手伝いに来てくれた方々の協力もあり、無事に出展することができました。ありがとうございます。

[^1]: 開発がギリギリ過ぎてリザルト画面でチームの勝敗を表示できていなかったので、本当にチーム戦か怪しい.
[^2]: ハッカソンや夏合宿などのイベントでスタートが遅れたという言い訳があります.
【入力フォーム】CSSの「:user-invalid」がかなり便利だった

つい先日CSSのとあるイベントで取り上げられたらしく、Xを眺めていたら`:user-invalid`という文字が割と大量発生してたので気になり調べてみました。私個人としては、みたことある気がするけど、まともに使ったことはありませんでした。

そんな方は本記事の内容をぜひご活用ください:raised_hand:

## :user-invalidとは
:user-invalidは、HTMLフォームにおいて状態を示すCSS疑似クラスの1つです。この疑似クラスは、ユーザーが実際に入力や操作を行った後に、その入力が無効であると判断された場合にのみ適用されます。

**主な特徴**
- フォーム要素（input, textarea, select等）に対して使用
- ユーザーの操作後にのみ適用される
- リアルタイムでのバリデーションフィードバックが可能

## 通常の:invalidと:user-invalidの比較
表で比較してみます。

| 擬似クラス名             | 説明                        |
|------------------|----------------------------------------------------------------------|
| **:invalid**     | ・ ページ読み込み直後から適用される<br>・ required属性のある空フィールドにも適用<br>・ ユーザーの操作を待たない |
| **:user-invalid**| ・ ユーザーが実際に操作した後にのみ適用<br>・ より自然なユーザー体験を提供<br>・ 初期表示時には適用されない |

みなさんご存知の通り、通常の`:invalid`だとページ読み込み直後から適用されるといった適用タイミングの融通の効かなさが有名です。その為JSでタイミングを調整したり、`:invalid`を使わずにカスタムで`:invalid`にあたるクラスや状態を作成したりという手間が必要でした。

それに対して、`:user-invalid`だとページ読み込み直後は起動適用されず、ユーザーの操作に応じて適用されるようになります。これだけ聞いても自分的にはかなり嬉しい機能です。

## 具体的な実装例
基本的には以下のように、inputのスタイルとは別に`:user-invalid`状態のスタイルを作成する形で実装します。
```style.css
/* 基本スタイル */
input {
    border: 2px solid #ccc;
    padding: 8px;
}

/* 無効な入力時のスタイル */
input:user-invalid {
    border-color: #ff0000;
    background-color: #ffebee;
}
```

上記の基本的な使い方をしつつ実際に作成してみると以下のようになります。
入力していただければわかると思いますが、初期状態・クリックするだけで何も入力してない状態だとエラー表示が出ないでいてくれます。

<p class="codepen" data-height="400" data-default-tab="css,result" data-slug-hash="wBwemoB"></p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

::: note warn
**ブラウザ互換性**
比較的新しい機能のため、ブラウザでサポート状況を見て使用しましょう。
必要に応じて`:invalid`との併用やフォールバックを検討するのも1つの方法かと思います。
とはいえIE終了後、モダンなバージョンであれば、どの主要ブラウザでも問題なく使用できる状況だと思いますが詳しく知りたい方は[こちら](https://caniuse.com/?search=%3Auser-invalid)をどうぞ
:::

## まとめ
今回は`:user-invalid`について取り上げました。
従来のCSSだけではできなかった絶妙な機能なので、今後も活用していきたいです！

本記事をご拝読いただきありがとうございました:relaxed:
自分で実装したくないので、V0にReact開発全部してもらった結果

ゴールはこの時と同じ、Amazonの画面を生成したい。

https://qiita.com/Jasmine_teeeeee/items/7773fc37f28f38b4081a

# 手順

## V0でコード生成

純粋に依頼してみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/6d1694c1-8771-a8b7-4c03-8277e6ec1d19.png)

Next.jsの面影が見えたので、再度依頼

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/ed549014-39bb-4f6e-dc01-52c493d496d8.png)

パット見よさそう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/548347db-8ecb-cd4d-98ec-0f3e0f0caaa5.png)

## ローカルで実行

次なにしたらいい？と質問したら、教えてくれたので、その通りにやってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/82d18771-310e-b586-75de-86f1ed7ffcaf.png)

何もないフォルダ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/c00da100-715b-fe72-04c6-a5ba31a96f02.png)

手順通り実施して、完成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/f5f0eb55-b2e3-98e9-a732-eccee8c6a916.png)

# 困ったポイント

いっぱいあった～～

## reactのバージョン

まず、
reactのバージョンを18.0.0にダウングレードする必要がありました。

Ｖ０が生成したコードがreact18の構造のようです。

## tsconfig.json手動作成

特に指定をしなかったので、
コードはTypeScriptで生成されましたが、そのインストールおよび設定ファイルが生成されなかったので、
手動インストール＆手動ファイル作成が必要でした。

# まとめ

最初からエディタにプラグインされているツールじゃないので、移植が面倒でした。

以下がおすすめ

https://qiita.com/Jasmine_teeeeee/items/7773fc37f28f38b4081a

https://qiita.com/Jasmine_teeeeee/items/a9533f8b0a855fb16eba
Python でブログカード機能を実装

# はじめに
本記事では、ブログやウェブサイトでよく見られる**ブログカード**機能を実装するために、外部のウェブページからそのページのメタデータ（タイトル、OG タグで指定された画像や説明文など）を取得する方法を紹介します。

ブログカードとは以下のようなものです。

https://qiita.com/shikuno_dev/items/f236c8280bb745dd6fb4

# 必要なツールとライブラリ

- **Python**: バージョンは 3.x を推奨
- **requests**: HTTP リクエストを簡単に送信するためのライブラリ
- **BeautifulSoup**: HTML および XML を解析するためのライブラリ

# 依存関係のインストール

必要なライブラリをインストールします。

```bash
pip3 install requests beautifulsoup4
```

# fetch_url_metadata 関数の実装

```python
import requests
from bs4 import BeautifulSoup

# 引数として URL を受け取り、その URL から取得したメタデータを含む辞書を返す
def fetch_url_metadata(url):
    try:
        # 指定された URL に対して HTTP GET リクエストを送信し、レスポンスを取得
        response = requests.get(url)

        if response.status_code != 200:
            # リクエストが失敗した場合、空のメタデータを返す
            return {
                "url": "",
                "title": "",
                "og_title": "",
                "og_image": "",
                "og_site_name": "",
                "og_description": "",
            }

        # レスポンスを UTF-8 でデコードし、BeautifulSoup で解析可能な形式に変換
        content = response.content.decode('utf-8', errors='ignore')
        soup = BeautifulSoup(content, 'html.parser')

        # メタデータの抽出
        title = soup.title.string if soup.title else ''
        og_title = soup.find('meta', property='og:title')
        og_image = soup.find('meta', property='og:image')
        og_site_name = soup.find('meta', property='og:site_name')
        og_description = soup.find('meta', property='og:description')

        metadata = {
            "url": url,
            "title": title,
            "og_title": og_title['content'] if og_title else '',
            "og_image": og_image['content'] if og_image else '',
            "og_site_name": og_site_name['content'] if og_site_name else '',
            "og_description": og_description['content'] if og_description else '',
        }

        return metadata
    except:
        # エラーが発生した場合、空のメタデータを返す
        return {
            "url": "",
            "title": "",
            "site_img": "",
            "og_title": "",
            "og_image": "",
            "og_site_name": "",
            "og_description": "",
        }

# 動作確認
if __name__ == '__main__':
    url = 'https://example.com'
    metadata = fetch_url_metadata(url)
    print(metadata)
```

# 動作確認

```bash
python3 get_meta_data.py

{'url': 'https://example.com', 'title': 'Example Domain', 'og_title': '', 'site_img': '', 'og_image': '', 'og_site_name': '', 'og_description': ''}
```

# 外部サイトのコンテンツを取得する際の注意点

- **利用規約の遵守**
  外部サイトのコンテンツを取得する前に、そのサイトの利用規約を確認し、遵守する必要があります。
- **法的な規制の遵守**
  コンテンツの使用に関する法的な制約や著作権についても留意する必要があります。
- **クロールの頻度制限**
  外部サイトからのデータを頻繁に取得する場合、そのサイトのサーバーに負荷をかけることになります。`robots.txt` ファイルに記載されたクローリングの許可や制限を尊重する必要があります。
- **セキュリティ**
  外部サイトからのデータを処理する際には、セキュリティ上のリスクにも留意してください。不正な入力や XSS 攻撃を防ぐ必要があります。
【2024年版】ITエンジニアに刺さる「ポッドキャスト6選」


> (941) ホントは、アドベントカレンダーって、あのそもそものやつ。お菓子が入っていてひとつずつ開けていくあのスタイルって、24 日までじゃないですか。
> (宮川) ああ、そうだね w
> (941) なんだけど、ひろむ[^1] さんが、なんか 25 日までって決めたから、日本のアドベントカレンダーでブログを書く文化はなぜかそこで 25 日になったという認識なんですよね僕の認識では。

[^1]: tokuhirom さんかな？

[2024/12/07Watercooler #26 (941)](https://rebuild.fm/portal/)
※サポータープログラムに加入すると聞けます

たしかに アドベントカレンダーが 25 日までって違和感が！**今さら気づいた！**
25 日はボーナストラックだったのだ！ということで 25 日の記事です。

いや～気づきがあるって、ほんとポッドキャストって素晴らしいですね。

以前、ポッドキャストのお話を寄稿したことがありました。

https://thinkit.co.jp/article/19592

おかげさまで、384 ブックマークもいただく人気記事となりました。

あれから 2 年半ほど経ちましたので、更新しておこうかなと思い書いた次第です。

定番 3 本、今年聞き始めたの 3 本、ってところで記録しておきます！
当時の記事には書きませんでしたが、おススメしているポイントとしては

-   ポジティブな語りが多いこと
-   更新頻度がそれなりにあること（せめて月 1 回は聞きたい）
-   考えさせられたり気づきがあること

あたりがあります。

ってところで 6 選です。

## Rebuild

https://rebuild.fm/

冒頭でも引用させてもらいましたが、
有料プランがあったり有料限定コンテンツがあったり、日本語 Podcast 界を牽引している感じがしますね。
（もちろん無料でもほぼ楽しめます）

## fukabori.fm

https://fukabori.fm/

ひとつのテーマを深掘りしていくというスタイルは結構稀有ですし、ボリュームも多いので聞きごたえ抜群ですな。

## EM.FM

https://creators.spotify.com/pod/show/em-fm

哲学っぽい部分もありますが、Engineering Manager の思考や意識が垣間見られてなにかと気づかされます。

## Qiita FM

https://art19.com/shows/qiitafm

我らが Qiita も、なんか気づいたらポッドキャストをやってましたｗ
月イチで Qiita アップデート情報とかも公開してくれたり、いろんなゲストを迎えて話を聞いたり、毎週くらい配信してたり、とても意欲的です。

## IT トリオの日常 ~エンジニア 3 人のゆる学びラジオ~

https://art19.com/shows/it-pitpa

弊社と某社の合同勉強会に参加した際、ちーずさんが「ポッドキャストやってまーす」とおっしゃっていたので聞くようになりました。起業されたり海外で働いたり大きな会社で働いたり、それぞれが悩みながら頑張っているサマを聞きつつ、自分を見つめ直しさせてもらったりしております。

## エンジニアの楽園 vim-jp ラジオ

https://vim-jp-radio.com/

2024 年 7 月に、「いつかラジオをやりたかった」という[tomoya](https://blog.tomoya.dev/)さんの声のもと立ち上がったのが vim-jp ラジオ。音のクオリティもさることながら、お呼びしているゲストが IT 業界というかプログラマー業界というか、その界隈の有名人ばかりでビックリです。まだ半年経ってないんですけど！月 4 で配信してる点も含め、素晴らしい限りです。

# というわけで

2 年半前の記事に比べるとかなりカジュアルに書いております。
結局は**聞いてみるのが一番**だと思いますので、とりあえずそれぞれのサイトを見てみて、気になる回を聞いてみるのが良いのではないでしょうか！