OmniAICreator/Qiita-1.07M huggingface dataset:
鍵導出について(NIST SP 800-108)

# 背景
備忘録のため鍵導出について理解した内容を残す。

# 鍵導出とは
・鍵導出(key derivation)とは、マスタ鍵と呼ばれる秘密の値から秘密鍵(共 通鍵暗号アルゴリズムの共通鍵あるいは公開鍵暗号アルゴリズムのプライベート鍵)を導出する手法である。導出された秘密鍵は導出鍵と呼ばれる。

・鍵導出では、秘密値を不可逆関数(導出関数)に入力して導出鍵を生成する。 導出関数は他の導出鍵から導出鍵を推定できるものであってはならない。導出鍵の強度は導出に用いられるアルゴリズムやマスタ鍵の強度よりも大きくはならない。

参考情報：

https://www.ipa.go.jp/archive/security/reports/crypto/gmcbt80000005w91-att/000013895.pdf

https://www.ipa.go.jp/security/crypto/guideline/gmcbt80000005u7d-att/ipa-cryptrec-gl-3004-1.0.pdf

:::note info
鍵導出のメリット：
* ローカルで（鍵生成機能を使うことなく）鍵更新ができる
* 鍵確立プロトコルを利用しなくてもそれぞれのエンティティが独自に同じ秘密データを使って同じ暗号鍵を生成することができる
:::

:::note warn
鍵導出のデメリット：
* 入力データと出力データ（生成された暗号鍵）との間に相関が残っている可能性がある
※鍵導出機能により作られる暗号鍵は、「（乱数生成器ではなく）ある種の計算方法」に従って生成されるため。

* 入力データの種類によっては十分なエントロピー量が確保できない可能性がある。
※複雑なパスワードを利用するのが困難であるため。
:::

これらの弱点による暗号鍵の予測可能性を少しでも低減するため、信頼できる鍵導出方法（SP 800-108 や SP 800-132、SP 800-135）を使うのが望ましい。

# NIST SP 800-108

https://nvlpubs.nist.gov/nistpubs/SpecialPublications/NIST.SP.800-108r1-upd1.pdf

## 3. Pseudorandom Function (PRF)
擬似乱数関数（PRF）は、鍵導出関数を構築するための関数。
{PRF(s, x) | s ∈ S} は、インデックス（シード）sと入力xを持つ関数で構成される。

暗号鍵Kinがシードとして扱われる場合、すなわちs = Kinの場合、PRFの出力は鍵として使用できる。
鍵導出に関して、HMAC、CMAC、KMACをPRFとして使用することが推奨される。

鍵導出関数で使用するPRFを選択する際、HMACまたはKMACを使用することを検討すること。
※AESがプラットフォームで唯一実装されている場合やCMACを使用することにリソース上の利点がある場合を除く。

## 4.1 KDF in Counter Mode
カウンターモードでは、カウンター値を変更しながらPRFを複数回実行し、その結果を結合して最終的な鍵材料を生成する。
この手法は並列処理が可能であり、効率的に鍵導出ができる。また、カウンター値が異なるため、各反復で得られる出力が独立しており、セキュリティ上の問題を防ぐことができる。

パラメータ:
• h – PRFが生成する出力のサイズ（ビット単位）
　例：HMAC-SHA256を使用する場合、出力長は256ビット
• r – カウンターiの二進表現の長さ（ビット単位）
　※カウンターが長いほど、より安全に処理することができる。

入力：Kin、Label, Context, L

Kin：鍵導出関数PRFに入力として使用される鍵
Label：導出された鍵の目的を識別する文字列
Context：導出された鍵に関連する情報を含むビット列。この情報には、鍵を導出する当事者が知っているノンスを含むこともある。
L：導出された鍵 Kout のサイズ（ビット単位）

Process：
1. n := [L/h]
1. n > 2^r −1の場合、終了
1. i = 1 からn回, aとbを繰り返す
a. ![スクリーンショット 2025-02-11 15.31.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1878269/e6d1e5f1-1a65-5d88-43bd-b34b11400a7b.png)
b. result := result || K(i).
1. Kout = 左からLbit

![スクリーンショット 2025-02-11 15.28.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1878269/588fcdfd-106a-6475-14ee-2f9bd954965a.png)


## 例

h = 256bit
r = 8bit
L = 512bit
PRF = HMAC-SHA256
Label = 00000001
Fixed input data = 0xFFFF

--
n = 512/256 = 2
n > 2^r - 1 → 2 > 255
→ 2回反復する

![スクリーンショット 2025-02-11 15.51.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1878269/57c2bbcb-0066-7dca-93de-a93ee9183d21.png)
はじめての OpenAI API： APIキーの取得から実行まで

# はじめに
OpenAI APIを使用することで、GPT-4などの強力な言語モデルを自分のアプリケーションに組み込むことができます。最近になってOpenAIの学習を始めたため、自分用の備忘録も兼ねて、APIの設定から基本的な使用方法まで順を追って説明していきます。なお、本記事の内容は2025年2月時点の情報です。APIの仕様は変更される可能性があるため、最新の仕様については本家のドキュメントをご参照ください。

## 1. APIキーの取得と管理

まず最初のステップは、OpenAIからAPIキーを取得することです。これは以下の手順で行えます：

- [OpenAIのウェブサイト](https://platform.openai.com/settings/organization/api-keys)にアクセス
- APIキーを生成し、安全な場所に保管
- APIキーは極めて重要な認証情報なので、公開レポジトリ等には保管しない

## 2. 環境設定

APIキーを利用するため、以下の2つの方法があります：

### 方法1：環境変数の使用

OSの環境変数としてAPIキーを設定する方法です。MacやWindowsそれぞれの設定方法があります。詳細については、[ドキュメント](https://platform.openai.com/docs/quickstart?desktop-os=macOS#create-and-export-an-api-key)を参照してください。

①Mac

```powershell
export OPENAI_API_KEY="your_api_key_here"
```

②Windows

```powershell
setx OPENAI_API_KEY "your_api_key_here"
```

### 方法2：.envファイルの使用

より柔軟で管理しやすい.envファイルを使用する方法です。python-dotenvライブラリを使用することで、簡単に環境変数を管理できます。.envという名前のファイルを作成し、以下の内容を記載します。

```bash
OPENAI_API_KEY=your_api_key_here
```

## 3. 必要なライブラリのインストール

OpenAI APIを使用するために必要な主なライブラリは以下の通りです：

- openai - OpenAIの公式Python SDK
- python-dotenv - 環境変数管理用

```bash
pip install openai python-dotenv
```

## 4. 基本的な使用例

OpenAI APIでは、テキスト生成から画像認識まで、様々なタスクを実行できます。APIキーによるOpenAI APIへのアクセスが可能かどうか、以下のような簡単なPythonコードで確認します。応答が返ってきたら成功です。

```python
import os
from dotenv import load_dotenv
from openai import OpenAI

# .envファイルの内容を読み込む
load_dotenv()
# 環境変数からAPIキーを取得
api_key = os.getenv("OPENAI_API_KEY")

# OpenAIクライアントの初期化
client = OpenAI(api_key=api_key)

# OpenAI APIに質問を送信
chat_completion = client.chat.completions.create(
    messages=[
        {
            "role": "user",
            "content": "Hi there!",  # ユーザーからのメッセージ
        }
    ],
    model="gpt-4o-mini",  # 使用するモデル名
)
# 応答を取得して表示
response = chat_completion.choices[0].message.content
print(f"ChatGPT: {response}")
```

##
LuaとOpenRestyの環境構築メモ

# 概要

Luaを学ぼうと思い、APIを作りたくなったので環境構築したメモです。


## 実装
### Dockerfile
```Dockerfile
FROM openresty/openresty:alpine

COPY nginx.conf /usr/local/openresty/nginx/conf/nginx.conf
COPY lua/script.lua /usr/local/openresty/nginx/lua/script.lua

EXPOSE 8080

CMD ["openresty", "-g", "daemon off;"]
```

### docker-compose
```docker-compose.yml
version: '3.8'

services:
  openresty:
    build: .
    ports:
      - "8082:8080"
    volumes:
      - ./nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf
      - ./lua/script.lua:/usr/local/openresty/nginx/lua/script.lua
```

### nginx.conf
```nginx.conf
worker_processes 1;

events {
    worker_connections 1024;
}

http {
    server {
        listen 8080;
        server_name localhost;

        location /api {
            # キャッシュを無効にすることで、毎回リクエストを処理する（実質ホットロード）
            lua_code_cache off;
            content_by_lua_file /usr/local/openresty/nginx/lua/script.lua;
        }
    }
}
```

### script.lua
```lua/script.lua
local function evaluate_hand(hand)
    -- ポーカーの役判定ロジックをここに実装
    return "役の名前"
end

local hand = {"AS", "KS", "QS", "JS", "10S"} -- 例としてロイヤルフラッシュ
ngx.say(evaluate_hand(hand))
```

## 実行
```sh
docker-compose up -d
```
```sh
curl localhost:8082/api
```

## テスト(未完)
`busted`を入れて単体テストもしようと思ったのですが、インストールに詰まってしまったためできたら追記します。
credoに "There should be no unused return values for Enum functions" と警告される時は、関数の戻り値に使っていない値があるのが問題なので、空の代入で回避する

ほぼタイトルの通りです。

## コード例

例えば次のようなコードを考えてみます。

```elixir
defmodule Sample do
  @moduledoc false
  def code({to_return, side_effect}) do
    Enum.reduce(side_effect, fn
      1, _acc -> IO.puts("side effect")
      _, _ -> 0
    end)

    to_return
  end
end
```

このコードの意図することとしては、 `side_effect` で与えられたデータ列を元に、 `IO.puts` のような副作用のあるコードを実行した後、 `side_effect` から生成したデータ自体は捨ててしまうという感じです。

このコードに credo をかけると、次のような警告が出ます。

```elixir
% mix credo
Checking 3 source files ...

  Warnings - please take a look                                                 
┃ 
┃ [W] ↗ There should be no unused return values for Enum functions.
┃       lib/sample.ex:4:5 #(Sample.code)

Please report incorrect results: https://github.com/rrrene/credo/issues

Analysis took 0.03 seconds (0.01s to load, 0.02s running 55 checks on 3 files)
3 mods/funs, found 1 warning.

Showing priority issues: ↑ ↗ →  (use `mix credo explain` to explain issues, `mix credo --help` for options).
```

ちなみにこのコードの例だと、 次のように `Enum.each` を使えば警告は解消されます。

```elixir
defmodule Sample do
  @moduledoc false
  def code({to_return, side_effect}) do
    Enum.each(side_effect, fn
      1 -> IO.puts("side effect")
      _ -> 0
    end)

    to_return
  end
end
```

ただ、私がもともとやりたかったのは、 `Enum.reduce` でデータを集計しつつ、エラーが分かったときに標準出力に出したかったのですよね。

## 解決方法

次のように空の代入を入れると、credoは警告を出しません。

```elixir
defmodule Sample do
  @moduledoc false
  def code({to_return, side_effect}) do
    _ =
      Enum.reduce(side_effect, fn
        1, _acc -> IO.puts("side effect")
        _, _ -> 0
      end)

    to_return
  end
end
```
【Git】マージ済みブランチをローカルから一括削除するコマンド

リモートで既にマージしているブランチをWindowsで一括削除する方法が無かったので作成ました。

この記事は以下のサイトを参考にしています。Linuxをお使いの方は以下のサイトを参照してください。

https://zenn.dev/nekonado/articles/git-housekeeping

## コマンドの使い方

:::note warn
**注意**
このコマンドを実行したことにより、作成中のコードが消失するなどの損害が発生しても筆者は一切責任を負いません。
:::

:::note alert
**コマンド実行前に必ず全ブランチの変更（コミット）をリモートにプッシュしてください！！！**
:::

1. コマンド実行前に、必ずデフォルトブランチ（mainブランチなど）にチェックアウトする
    - 未コミットのファイルの対応などユーザーの判断が必要になることもあるので、チェックアウトは自動化していない
1. 以下のコマンドを実行する
    ```powershell:ブランチ削除コマンド
    $encTemp = [Console]::OutputEncoding; try { [Console]::OutputEncoding = [Text.Encoding]::UTF8; git fetch -p && git pull && git branch -vv | Select-String "^\s*(.+?)\s+?[0-9a-f]+?\s+?\[.+?: gone\]" | ForEach-Object { $_.Matches.Groups[1].Value } | % { git branch -d $_ };} finally { [Console]::OutputEncoding = $encTemp; }
    ```

## コマンドの説明

- `$encTemp = [Console]::OutputEncoding;`
    - 後述のパイプ内文字コード変更のために、既存の文字コード設定をバックアップしています
- `try`
    - 例外処理のトライ
- `[Console]::OutputEncoding = [Text.Encoding]::UTF8;`
    - パイプ内の文字コードをUTF-8に変更しています
    - これをしないと、後述の`git branch`の結果を[Select-String](https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.utility/select-string)に処理させることができません
- `git fetch -p`
    - リモートブランチの変更を同期（フェッチ）しています
    - 削除されたリモートブランチの状態もここで取得しています
- `git pull`
    - デフォルトブランチの変更をプルします
    - これをしないと後述のブランチ削除処理が不完全になった記憶（うろ覚え）
- `git branch -vv`
    - ブランチの一覧を出力します
- `Select-String "^\s*(.+?)\s+?[0-9a-f]+?\s+?\[.+?: gone\]"`
    - 出力されたブランチ一覧から、リモートでマージ済みのブランチ名を抽出します
- `ForEach-Object { $_.Matches.Groups[1].Value } | % { git branch -d $_ };`
    - 前処理で抽出したブランチ名を使用して、そのブランチを全て削除します
- `finally`
    - tryと一緒に使用しているfinally句
    - 途中でエラーが発生しても必ず実行する処理を後ろに記載しています
- `[Console]::OutputEncoding = $encTemp;`
    - 最初に変更した文字コードの設定を元に戻します
🌎 Terraform の 基本的なコマンド

# 📌 はじめに
Terraform を使ってインフラを構築する際、基本となるコマンドの流れを解説します。この流れを理解することで、どの記事でもスムーズに Terraform を実行できるようになります。

# 📌  プロジェクトの初期化

Terraform を実行する前に、プロジェクトを初期化します。

```sh
terraform init
```

🔹 主な処理

- プロバイダーのダウンロード（AWS などのクラウドと連携するためのプラグインを取得）
- バックエンドの設定（S3 やローカルに状態管理ファイルを保存）※ terraform.tfstate
- モジュールの取得（定義されたモジュールをダウンロード）

# 📌 実行プランの作成

Terraform が適用する変更内容を事前に確認します。

```sh
terraform plan
```

# 📌 インフラの適用 

Terraform の設定に基づき、リソースを作成・更新します。

```sh
terraform apply
```

🔹 代表的なオプション

| オプション                     | 説明                                        |
|--------------------------------|-------------------------------------------|
| `-auto-approve`               | 確認なしで適用 |
| `-target=module.モジュール名`  | 指定したモジュールのみ適用 / 削除 |


# 📌 インフラの削除

作成したリソースを削除する場合は、以下のコマンドを実行。

```sh
terraform destroy
```

🔹 代表的なオプション

| オプション                     | 説明                                        |
|--------------------------------|-------------------------------------------|
| `-auto-approve`               | 確認なしで適用 |
| `-target=module.モジュール名`  | 指定したモジュールのみ適用 / 削除 |
🌎 Terraform でAWSを触るための 最初の main.tf を作成する手順

# 📌 `main.tf` とは？

Terraform では、リソース定義のメインとなるファイルを `main.tf` に記述します。

このファイルに、プロバイダーの設定やリソースの定義を記述し、Terraform に適用します。

# 📌 事前に準備するもの

##### AWSアカウント

AWSを利用するために AWSアカウント を作成しておきましょう。

##### Terraform

インストールしていない場合は以下を参考にインストールします。

https://qiita.com/nobumory/items/f662f648679e5326fef4

##### AWS CLI

インストールしていない場合は以下を参考にインストールします。

https://qiita.com/nobumory/items/e408fd13e82f8390df95

##### VS Codeプラグイン

VSCodeを利用している方は HashiCorp Terraformというプラグインをインストールしましょう。

# 📌 `main.tf` を作成する手順

まず、新しいディレクトリを作成し、その中に `main.tf` を作成します。

```sh
mkdir sandbox-terraform
cd sandbox-terraform
touch main.tf
```

次に、`main.tf` に以下のような最小限の設定を記述します。

```hcl
# AWS プロバイダーの設定
# Terraform が操作する AWS のリージョンを指定
provider "aws" {
  region = "ap-northeast-1" # 東京リージョン
}
```

# 📌 さいごに

この記事では main.tf というファイルを作成しただですが、これこそが Terraform の学習を始める 最初の一歩 です 💪

ここから一歩ずつ進めていきましょう、本当にお疲れ様でした 🎉
`The disk "..." wasn't ejected because one or more programs may be using it`の解決

# 発端
外付けHDDでいろいろやったあとディスクを安全に取り出そうとしたら,
`The disk "..." wasn't ejected because one or more programs may be using it`
と出てくる, しかし特に何もしてない
何もしてないのに壊れたと同じ感じ

さて, これがなぜ出てくるのだ...?

# 解決手段
ターミナル等で以下を実行, なお`<ストレージ名>`はそのディスクの名前
```sh
$ sudo lsof | grep /Volumes/<ストレージ名>
```
これに出てきたもの(≒タスク)を消してく
```
$ sudo kill -9 <PID>
```
この<PID>は上のlsofの結果で出てきたリストの, 左から2つ目の数字

# lsofでわかったこと
なんか...QuickLook動き続けている...
見終えたはずなのに, 動き続けている
もしかしてこいつのせいでずっと抜くことができなかったのか?
QuickLookをkillしたら一瞬で取り出せた

Finderを強制終了(再起動)したときに同時に消えているのか? QuickLookって
今は解決したし, また今度同様のことが起きたら探ってみよう

# 参考文献(URLのみ)
https://www.reddit.com/r/applehelp/comments/egwv25/comment/lwjdgyr/
(最終閲覧日: 2025-0228)

# 関係ない話
英語しかない話題を日本語で解説しておくと自分があとで英文読まなくて済むのでみんなやるべき
基本情報技術者試験備忘録

# プロフィール
・情報系学部の四年生
・大手ITコンサルタント企業に内定
・プログラミング歴10年

# 受験した経緯
内定先で入社前アセスメント試験があった。試験はTrack社の物で、基本情報技術者試験範囲の問題と、プログラミングの問題が出た。基本情報技術者試験範囲の問題は300人中13位、プログラミングの問題は300人中1位(満点)だった。
内定先の配属は未定で、入社後の本試験の結果を参考に配属が決まるとのこと。本試験では英語の試験も追加されるが、自分は周りの内定者と比較した時英語力はそこまで高くない(周りは留学生や留学経験者ばかり)ので、少なくとも自信のあるIT系の試験ではもっと良い成績を取れるようにしておいた方がベターだと考えた。勉強の機会を作るためにも、基本情報技術者試験を取ってみることに。

# 勉強開始前の自分の実力
とりあえず基本情報技術者試験過去問道場で科目Aの過去問を100問ぐらい解いてみたところ、正答率は70%程だった。既に合格ラインには達していたが、残り30%を埋めるための勉強をすることにした。マネージメント系やストラテジ系、セキュリティ系の分野で意味の分からない英略語や単語が沢山出てきてその辺りが課題だなと感じる。
この時点では、基本情報技術試験は、情報系の仕事をしていたり、情報系の学部に通っていれば、特に勉強してなくても合格ラインには乗るんじゃないかという印象を抱く。

# 勉強法
とりあえず網羅的な知識を得るために参考書を一冊読むことにした。買ったのはこれ。

[令和07年 イメージ＆クレバー方式でよくわかる かやのき先生の基本情報技術者教室](https://amzn.asia/d/fckqK9W)

イメージ&クレバー方式という聞いたことのない言葉の響きで選んだ。実際に届いた本を見てみたら、イメージ方式というのはイラスト付きの意味で、クレバー方式というのは「〇〇とくれば～〇〇」という形式で要点が書いてあるというだけのただのダジャレだった。

10時間くらいかけて一通り内容を読み、ある程度頭に入ったところで過去問をぶん回したところ、正答率は90%ぐらいになった。

# 試験当日
CBT形式なので会場のパソコンで受ける。科目Aでは、過去問と全く同じ問題が2割ほど出題された他、3~4問ほど教科書に載っていないと思われる範囲の問題が出てきた。また、自分が苦手な、意味から英略語を答える問題が1割ほど出題された。
科目Bの方は流石に余裕だった。競プロでB問題を解けるレベルなら普通に満点を取れると思う。セキュリティ系の問題では、過去問が出てきたほか、選択肢だけ見ればメタ的に分かるボーナス問題も出てきた(試験規約で規制されているので内容については言えないが)。

試験後に結果が表示される。科目Aは790点で科目Bは1000点。

正直、科目Aは過去問より難しかったと感じた。過去問を回した時の感覚では、流石に9割以上取れると踏んでいたが、CBT形式になってから色々と問題が追加されて難化している気がする。ノー勉だったら650点くらいしか取れてなかったんじゃないかなという印象。

# おわり
基本情報技術者試験はIT系のバックグラウンド知識があればかなり簡単ではある。でも試験でしか出ないような単語とかも結構あるので、自信があってもノー勉で挑むのは無謀かなという印象。本職の人なら2~3時間過去問を回すか読書すれば余裕を持って合格できると思います。

似た境遇の人の参考になれば幸いです。
ターミナル・コマンドプロンプトとは

`ターミナル（Terminal）`と`コマンドプロンプト（Command Prompt）`はどちらも、キーボードで**コマンドを入力して、パソコンを操作するツール**です。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237839/e4d9196d-2a8b-4242-ab9e-04edf78e705d.png)

 
普段みなさんがマウスで操作している、フォルダの`新規作成`や、`移動・削除`など、ありとあらゆることは、実はコマンドの入力で操作ができます。
加えて、プログラムの`インストール`や`実行`、`サーバー操作`などもできるため、コマンド操作はプログラマにとっての必須スキルです。 
 
使うパソコン（環境）によって違いがあります。  

### **ターミナル（Terminal）**  
🔹 **MacやLinux**で使われるコマンド入力のツール  
🔹 `bash` や `zsh` などの「シェル」と呼ばれるプログラムを使っています  
🔹 例: `ls`（ファイル一覧を表示）、`cd`（フォルダ移動）、`git`（Gitコマンド）  

### **コマンドプロンプト（Command Prompt）**  
🔹 **Windows** に標準搭載されているコマンド入力のツール  
🔹 主に **Windows用のコマンド** を使います
🔹 例: `dir`（ファイル一覧を表示）、`cd`（フォルダ移動）、`echo`（文字を表示）  

### **PowerShellとの違いは？**  
Windowsには `PowerShell` という、より高機能なツールもあります。PowerShellは **コマンドプロンプトの進化版** で、より多くの処理を自動化できます。  

### **まとめ**  
✅ **Mac/Linux → ターミナル**  
✅ **Windows → コマンドプロンプト（またはPowerShell）**  
✅ どちらも「コマンドを入力してコンピュータを操作する」ためのツール！
プルリクエスト（Pull Request, PR）とは

プルリクエスト（Pull Request, PR）とは、**GitHub上で、「この変更をプロジェクトに反映してほしい！」と他の人へ提案する仕組み**です。  

例えば、チームでプログラムを開発するときは、GitHubに大元のコードを載せておき、それを各自自分のパソコンにコピー（クローン）して、機能追加や改善などのプログラミングを進めます。

大元はよく`main`と呼ばれます。各作業者は、自分で名前を付けたブランチ（枝分かれしたコピー）を用意して、作業を進めます。
例えば、大元の`main`に対して、`fix_1`、`fix_2`など名前をつけた、ブランチを作ります。

`fix_1`、`fix_2`で、作業した内容を、大元の`main`に反映させるときの「反映リクエスト」、これがプルリクエスト（PR）です。

まとめると、直接大元のコードを変更すると問題が起こるかもしれないため、**ブランチを作成して変更を加え、プルリクエストで、レビュー（確認）を受けた後にマージ（統合）** します。  

### **プルリクエストの流れ**  
1️⃣ **新しいブランチを作成**（機能追加やバグ修正のため）  
2️⃣ **コードを変更し、コミット**（変更履歴を記録）  
3️⃣ **GitHubでプルリクエストを作成**（変更を提案）  
4️⃣ **レビューを受ける**（チームメンバーがコードを確認）  
5️⃣ **問題なければマージ**（メインのコードに統合）  

プルリクエストを使うことで、**安全にコードを管理しながらチーム開発ができる** ようになります！
DockerとGit連携


:::note warn
この記事はプログラミング初心者が自分のメモ用として書いている記事です。
そのため、誤った情報が記述されている可能性があります。
自己判断で読み進めてください
:::
Dockerコンテナ内で git がインストールされているか確認

```
root@be96f8ff3ea8:/# docker exec -it password_manager_container bash

bash: docker: command not found
インストールされていないことを確認
```

なければコンテナ内でインストール
```
apt update && apt install -y git
```

GitHub で SSH 設定を行う
```
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```

SSHエージェントを起動

```
root@be96f8ff3ea8:/# eval "$(ssh-agent -s)"
Agent pid ⚫︎⚫︎⚫︎⚫︎
```

 SSHキーをGitHubに登録
公開鍵を表示する。
cat ~/.ssh/id_rsa.pub
表示されたキーを GitHub の設定 > SSH and GPG keys で追加。

SSH接続の確認
以下のコマンドを実行し、GitHubとの接続を確認。
```
ssh -T git@github.com
```

Gitの初期設定を行う
```
git config --global user.name "Githubで登録した名前"
git config --global user.email "Githubで登録したメール"

```

コンテナ内でスクリプトを管理するディレクトリに移動してgit init 
あとはいつも通り、ブランチの切り替え

```
root@be96f8ff3ea8:/# git checkout -b pullrequest
```

GitHubリモートリポジトリを追加
```
git remote add origin git@github.com:kb8864/DockerTest.git
```
gitpush

## エラーが発生
```
root@be96f8ff3ea8:/bin# git push origin pullrequest
The authenticity of host 'github.com (20.27.177.113)' can't be established.
ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? 
Host key verification failed.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```

Dockerコンテナ内でGitHubのSSHホストキーが認識されていないために発生しているらしい

### 対策
まず、GitHubの公式ホストキーをDockerコンテナ内に追加して、github.com のホストキーが信頼できるものとして登録
```
ssh-keyscan github.com >> ~/.ssh/known_hosts

```

次に、GitHubとSSH接続できるかを確認

```
ssh -T git@github.com
```

再度gitpushを行う
```
remote: Resolving deltas: 100% (163/163), done.
To github.com:kb8864/DockerTest.git
 * [new branch]      pullrequest -> pullrequest
branch 'pullrequest' set up to track 'origin/pullrequest'.
```
GitHubとは？

**GitHub**とは、Gitで管理したファイルを**インターネット上で管理・共有できるサービス**です。  

Gitを使うとローカル（自分のPC）でプログラムの変更履歴を管理できますが、GitHubを使うと **ウェブ上でプログラムを保存・共有** できるので、チーム開発やバックアップに便利です。  

### **GitHubの主な機能**  
✅ **リモートリポジトリ**：Gitのデータをオンラインに保存（リモート＝自分のPCの外）  
✅ **共同開発**：複数人で同じプロジェクトを管理しやすい  
✅ **プルリクエスト（PR）**：変更を提案し、レビューを受けられる  
✅ **オープンソース**：世界中の開発者がコードを公開・貢献できる  

Gitが「履歴管理の道具」なら、GitHubは「その履歴をネットで共有する場所」です！
個人的備忘録：基本的なブランチ変更に関する git checkout や git branch コマンドを体系的にまとめてみた

## はじめに
Gitで作業を進める際、適切なブランチ管理はとても重要です。

:::note info
**特に、異なる機能を開発する場合や、リモートの変更を取り込むときには、ブランチの切り替えを正しく行う必要があります。**
:::

この記事では、ブランチの変更に関する基本的なコマンドを紹介します。***スムーズな開発のために、ぜひ活用してください。***

## 書こうと思ったきっかけ
Gitを使い始めたばかりの方や、ブランチ操作に慣れていない人にとって、基本的なコマンドを覚えるのは大変です。

:::note warn
***特に、リモートブランチをローカルに取り込んだり、新しいブランチを作成したりする際に、間違えてしまうこともあります。***
:::

そこで、よく使うコマンドをまとめておけば、困ったときにすぐ参照できると思い、この記事を書きました。

### 基本的なブランチ変更

ブランチを変更する際には、`git checkout` または `git switch` を使用します。  

`checkout` は古いバージョンの Git で使用されてきましたが、Git 2.23 以降では `switch` が推奨されるようになっています。

```sh
git checkout ブランチ名
```

**例**

```sh
git checkout feature-branch
```

### リモートブランチをローカルにチェックアウトする

リモートブランチをローカルに作成し、切り替える場合は、以下のコマンドを使います。

この操作は、新しくクローンしたリポジトリでまだローカルに存在しないブランチを使用したいときに便利です。

```sh
git checkout -b ブランチ名 origin/ブランチ名
```

**例**

```sh
git checkout -b feature-branch origin/feature-branch
```

### 現在のブランチを確認

現在のブランチを確認するには、以下のコマンドを使います。

```sh
git branch
```

**すべてのリモート・ローカルブランチを表示：**

```sh
git branch -a
```

### ブランチを作成して切り替え
新しいブランチを作成し、すぐに切り替えるには、以下のコマンドを使います。

```sh
git checkout -b new-branch
```

### 変更前にコミットまたはスタッシュ
ブランチを変更する前に、作業中の変更を保存しておくことを推奨します。

そのままブランチを切り替えると、競合が発生する可能性があるため、`stash` を活用するのが便利です。
```sh
git stash  # 変更を一時的に保存
git checkout 他のブランチ
git stash pop  # 保存した変更を復元
```

このコマンドを使えば、スムーズにブランチを切り替えることができます！ 

## まとめ
Gitのブランチ変更は、開発をスムーズに進めるために欠かせません。

基本的な `checkout` や `switch` のコマンドを理解し、必要に応じてリモートブランチの取得やスタッシュを活用しましょう。

:::note alert
**作業前に現在のブランチを確認することも忘れずに。**
:::

これらのコマンドを身につけることで、より効率的なバージョン管理ができるようになります！
Gitとは

Gitとは、ファイルの**変更履歴を管理**するツールです。

プログラムやドキュメントは作成中に、「前のバージョンに戻したい！」と思うことがあります。
Gitを使うと、プログラムの過去の変更を記録し、好きな時に戻したりできます。

またGitで管理されたファイルは、チームで共有して、共同作業ができます。
システムはチーム（複数のメンバー）で作るので、Gitで管理することがほとんどです。
 
主な特徴：
✅ 履歴管理：過去の変更を記録し、いつでも戻れる
✅ 共有：GitHubなどと組み合わせると、チームで効率的に作業できる
 
※GitHubは、Gitで管理しているファイルを共有できるツールです
XAMPPのPHPバージョン切り替えを簡単に！

## はじめに

XAMPPを利用してローカル開発を行っていると、PHPのバージョンを変更する機会が多くあります。しかし、XAMPPではデフォルトでPHPのバージョンを簡単に切り替える仕組みがないため、手動での設定変更が必要になります。

「XAMPPのPHPバージョン切り替えが面倒くさい！」と感じたことはありませんか？

特に、複数のプロジェクトを扱っている場合、それぞれ異なるPHPバージョンが求められることがあります。そのたびにXAMPPの設定を変更するのは手間がかかり、開発の生産性を下げてしまいます。

そこで、**簡単にPHPとApacheのバージョンを切り替えられるツール**を開発しました！

## XAMPP PHPバージョン切り替えツールとは？

このツールを使用すると、XAMPP内で複数のPHPバージョンを簡単に切り替えることができます。Apacheのバージョンも同時に切り替えられるため、環境ごとに適切な設定を維持しながら作業が可能です。

例えば、**PHP 7.4とPHP 8.1を簡単に切り替えられる**ので、

- 旧バージョンでの互換性テスト
- 最新バージョンへの移行確認
- プロジェクトごとの環境維持

が手軽にできます。

Githubリンクはこちら

https://github.com/wataxox/xampp_change_php

## 事前準備

ツールを使用する前に、以下の準備を行ってください。

### 1. XAMPPの別バージョンの取得方法

複数のPHPバージョンを使用するためには、それぞれのバージョンを公式サイトからダウンロードする必要があります。

1. [XAMPP公式サイト](https://www.apachefriends.org/jp/index.html) にアクセスします。
2. 「ダウンロード」ページから、必要なPHPバージョンを含むXAMPPのZIPをダウンロードします。
3. 解凍後、`php`と`apache`フォルダを下記のようにリネームして下さい。

PHPバージョンが7.4の場合
php7.4 apache7.4

PHPバージョンが8.1の場合
php8.1 apache8.1

### 2. XAMPPのフォルダ構成を整える

XAMPPのフォルダ内に、各バージョンのPHPとApacheを下記のようなディレクトリ構造で配置してください。
C:\
└── xampp\
　　　　├── php7.4
　　　　├── apache7.4
　　　　├── php8.1
　　　　└── apache8.1

**注意事項**

- 上記のフォルダ名以外の形式には対応していないため、正確に設定してください。
- XAMPPのデフォルトの`php`フォルダは削除せず、バックアップを取っておくことを推奨します。

### 3. ツールを管理者権限で実行する

- シンボリックリンクを変更するためには**管理者権限**が必要です。
- ツール実行時に「管理者として実行」を選択してください。
- `UAC（ユーザーアカウント制御）`が有効になっている場合、許可を求められることがあります。

## 使い方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2841176/14795ac5-b703-4b2a-8a14-845d8d1fc7cc.png)


1. **「切り替えるPHPのバージョンを選択」** から切り替えたいバージョンを選ぶ。
2. **「切り替え」ボタン** を押す。
3. Apacheが再起動し、指定したバージョンに変更される。
4. **「再読み込み」ボタン** を押すと、XAMPPフォルダ内のPHPバージョンを再スキャンし、新しいバージョンがある場合はリストに追加される。

ツールのUIは直感的に操作できるデザインになっているため、初心者でも安心して使えます！

## 注意点

- **XAMPPが動作中の場合は、Apacheを停止してから切り替えてください。**
- PHPのバージョンを切り替えた後、**必要に応じてApacheを手動で再起動してください。**
- **phpMyAdminの設定ファイル（config.inc.php）** はバージョンごとに異なる可能性があるため、適宜確認・調整してください。
- PHPの拡張モジュール（`extensions`フォルダ）もバージョンによって異なるため、特定のモジュールが必要な場合は事前にチェックしてください。

## まとめ

このツールを使用すれば、XAMPPのPHPバージョンを簡単に切り替えることができます。

複数のPHPバージョンで開発を行う場合、手動での設定変更の手間を大幅に削減できるため、**開発の効率化に大きく貢献**します！

「手動で切り替えなんてもうやってられない！」という方は、ぜひこのツールを試してみてください。

これで、ストレスなく開発環境を整えられますね！ 🎉

不具合や質問事項があればお気軽にコメント下さい！
VSCodeのエクスプローラーに`.git`ディレクトリを表示したいのです…。

# はじめに

ふと、そういえばVSCodeのエクスプローラーに`.git`ディレクトリが表示されていないな…。
個人的に表示されていてほしいな…。
と思ったので、その設定方法です。

# 環境

- Windows11
- WSL2
- VSCode

# 設定

## 手で設定

VSCodeの設定画面を開く。
上部の検索条件の項目に`files.exclude`を入力する。
`**/.git`を削除する。

で表示されると思います。

## devcontainer.jsonで設定

調べた時に触っていたのがdevcontainer環境だったので、devcontainer.jsonに記述する場合です。

```diff:devcontainer.json
	"customizations": {
		"vscode": {
			"settings": {
+				"files.exclude": {
+					"**/.git": false, // falseにしたらOK
+					"**/.svn": true,
+					"**/.hg": true,
+					"**/CVS": true,
+					"**/.DS_Store": true,
+					"**/Thumbs.db": true
+				}
			}
		}
	},
```

`settings.json`でも同様の設定できそうですかね？

# おわりに

`.git`を表示するなんて！
と言われるかもしれませんが、個人的には隠れている方がなんとなく気持ち悪いので表示したい…という記事でした。

# 参考

ありがとうございました。

https://qiita.com/tianshanminato965/items/e7cc0cc0cbe5f37d8ac6
MIT App Inventorでテキスト認識OCRを行う方法（プログラミング必要無し）

## はじめに
以前，Qiitaでテキスト認識の記事を書いたが，そこではプログラミングを必要としていた．
**今回はブロックのみでOCRを行う方法**を見つけたので記事にした．やはり，プログラミングを行うよりも断然楽！！！

## アプリ概要
アプリで写真を撮影するとテキスト認識を行い，スクリーンに認識したテキストが表示される．

## 拡張機能
以下のサイトからダウンロードし，mit app inventorの拡張機能としてアップロードする．
https://bit.ly/ocr_scan_image

## デザイナー画面
![スクリーンショット 2025-02-11 135654.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/31ba84bc-9a32-a63c-2210-0db9e050388d.png)


|機能|内容|
|:-:|:-:|
|image1|撮影した画像の表示|
|Button1|クリックするとカメラが起動し写真撮影，その後テキスト認識|
|Label1|テキスト認識の結果を表示する|
|Camera1|撮影を行うコンポーネント|
|TextRecognition1|テキスト認識を行うコンポーネント，外部機能のためダウンロードし，Extensionからをアップロード|

## ブロック画面
### カメラ起動

![blocks (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/422d41ce-a1b7-e99a-80e8-8b33380612b0.png)![blocks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/f600fb46-f96c-86ef-03d2-9c8879c8a3b4.png)


### カメラ撮影後に処理されるブロック
image1に撮影した写真を表示し，テキスト認識を行う．
![blocks (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/42508365-013c-e552-7556-748fdfbd838c.png)


### テキスト認識が成功したときに実行されるブロック
認識したテキストをLabel1に表示する．
![blocks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/c68b3228-9764-af90-79d5-fee56d8dd598.png)


## 実行結果
### 認識したいテキスト
![スクリーンショット 2025-02-11 140154.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/31a51140-7e6f-ab3e-257b-ce822d13d89d.png)
### 実行画面
![Screenshot_2025-02-11-14-01-27-050_edu.mit.appinventor.aicompanion3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/b785151b-0be7-bcdd-de57-6257c0b953c9.jpeg)

### 結果
![スクリーンショット 2025-02-11 142819.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/a8b71025-0072-f944-885a-826071b08b91.png)
めちゃ認識してくれている！！！日常で使用できるほどの精度．
pc画面のテキストを認識したので手書きだと精度がどうなるだろうか．

## おわりに
MIT App InventorでのOCRはプログラミングしないと実装できないかと思っていたが，ブロックでできることをしれた．また，認識精度も非常に高く，日常での使用が可能なものであった．ん～～もっと早く知りたかった...ノーコードは素晴らしい！！
画像ファイル（jpeg, png, gif, webp, svg など）だけを選択できるように制限

# ①accept="image/*"
accept="image/*" は、HTMLの <input> 要素で使用される属性で、ユーザーが画像ファイル（jpeg, png, gif, webp, svg など）だけを選択できるように制限するためのものです。

## 使い方
```
<input type="file" accept="image/*">
```

## 詳細
・accept="image/*" を指定すると、ファイル選択ダイアログで画像ファイルのみが選択可能になります。
・image/* は、すべての画像フォーマット（image/png, image/jpeg, image/gif など）を許可するワイルドカードです。


# ②バリデーション：image
ファイルは画像（jpg、jpeg、png、bmp、gif、svg、webp）であるか確認できる。
```/Applications/MAMP/htdocs/Laravel/EXP-alert/app/Http/Requests/ItemFormRequest.php
public function rules()
{
    return [
        'image_path' => ['image', 'max:2048']
    ];
}
```

https://readouble.com/laravel/9.x/ja/validation.html#rule-image
[番外編 #SPECIAL] 「Qiita Advent Calendar 2024」に入賞

<!--
 <font color="c00000"></font> 赤
-->
## はじめに
皆様お疲れ様です。
今回の **「番外編」** では<font color="c00000"> **「特別編」** </font>ということで以前**Qiita Advent Calendar 2024**の授賞式がありましたのでそれについて紹介いたします。

公式のBLOGは下記よりご覧くださいませ！

https://blog.qiita.com/adventcalendar-2024-qiitapresents-winners/

まず初めに今回の[**Qiita イベント**](https://blog.qiita.com/adventcalendar-2024-qiitapresents-winners/)では<font color="c00000">**「はじめてのアドベントカレンダー いいね賞」**</font>を達成することができました！
![スクリーンショット 2025-02-11 140751.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/cf5f9a54-a7fb-e4fb-3c76-3e289858bc3e.png)

いいね賞の記事はこちらをご覧ください。

https://qiita.com/aoiku/items/d8736673b2a65f54fc93


率直に嬉しかったです。
自分自身の成果として残せたということや、今後の活動により一層励みになる機会となりました。2025も楽しんで参りたいと思います。

今回のイベントでも色々な賞がありました。（完走賞やいいね、抽選など）
受賞者の方に敬意を表して改めましておめでとうございます:bouquet:
## おわりに

さて、今回**Qiita Advent Calendar 2024**で頂いたプレゼントを紹介します。

今回は **「Qiita Tシャツ」** をいただくことができました。前はこのようにQiitaのロゴが入っております。ユニークかつシンプルなデザインが魅力的です！
![S__11280403_0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/b275f508-e72c-6bbd-2b00-996e98b588d7.jpeg)

ちなみに後ろ側はQiita猫のシルエットが！可愛いらしいですね。
![S__11280401_0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/4125fcfc-b896-ad6f-490c-08a4eb23a888.jpeg)


今回は[番外編]の中でも特別編ということで[**Qiita Advent Calendar 2024**](https://blog.qiita.com/qiitaengineerfesta-2024-presents/)の振り返りを紹介しました。
最後まで読んで頂きありがとうございました！
>過去の番外編は下記よりご覧くださいませ

https://qiita.com/aoiku/items/bebee0d898a4971a3146

https://qiita.com/aoiku/items/bebee0d898a4971a3146

https://qiita.com/aoiku/items/19cf51605f80c60d4004

https://qiita.com/aoiku/items/c500c4cb65499d11027a

https://qiita.com/aoiku/items/24a63ba63349c07a235c

https://qiita.com/aoiku/items/586f74ac39e1c9e3f816

https://qiita.com/aoiku/items/06059f13aa6782cb7ab8

https://qiita.com/aoiku/items/02b1e4ba816e4910d488

https://qiita.com/aoiku/items/8185c15c75d864586cbc

https://qiita.com/aoiku/items/d8736673b2a65f54fc93

https://qiita.com/aoiku/items/d4df4eea2bd697353575

https://qiita.com/aoiku/items/2544b1af7dd90d86c647
Pythonのsys.pathとは？

# はじめに
開発をしているとよく目にする`sys.path`について、きちんと理解できていなかったので学習メモです。

# `sys.path`とは
Pythonは`import`文を使ってモジュールを読み込みます。
その際、Pythonは「どのフォルダの中を探せばいいのか？」をリストで管理しています。
このリストが`sys.path`です。

```python
import sys
print(sys.path)
```
実行結果の例
```bash
['/Users/user/project',
 '/Users/user/.pyenv/versions/3.10/lib/python3.10',
 '/Users/user/.pyenv/versions/3.10/lib/python3.10/site-packages']
 ```
 このようにPythonはsys.pathに書かれたフォルダの中からパッケージを探します。

 # `sys.path`が作成・追記されるタイミング
 ### 1. Pythonの起動時
- `python`コマンドで対話型シェルを起動時
- Pythonファイルを実行時
- `python -m module`でモジュールを実行時

pythonを起動すると自動的に`sys.path`が作成され、以下のような情報を元にリストが作成されます。
- スクリプトのあるディレクトリ(現在のディレクトリ)
- 標準ライブラリのディレクトリ(例: /usr/lib/python3.10)
- `site-packages`のディレクトリ(インストールされたパッケージの保存場所)
- (設定されている場合のみ)`PYTHONPATH`環境変数に指定されたディレクトリ
- 
### 2. `PYTHONPATH`環境変数が設定されたとき
`PYTHONPATH`環境変数を設定すると、そのディレクトリも`sys.path`に追加されます。

### 3. `sys.path.append()`で手動追加したとき
Pythonのスクリプト内で`sys.path.appen()`を使うと、指定したディレクトリが`sys.path`に追加されます。　
```python 
import sys
sys.path.append("/path/to/custom/module")
```

# `sys.path`を確認するといいケース
### 1. NotModuleFoundエラーが発生したとき
```python
import mymodule #ModuleNotFoundError
```
このようなエラーが発生したときは、`sys.path`を確認し、対象モジュールのディレクトリが`sys.path`に含まれているかチェックしましょう。
```python
import sys
print(sys.path)
```
### 2. カスタムモジュールを正しくインポートできないとき
プロジェクトの独自モジュールをインポートしようとしたとき、`sys.path`にそのディレクトリが含まれているか確認します。
### 3. パッケージのインストール後に`import`できないとき
`pip install`したはずのパッケージが`import`できない場合、`sys.path`に`site-packages`のディレクトリが含まれているかを確認します。
```python
import sys
print([p for p in sys.path if "site-packages" in p])
```
Windowsのフォントの英語名を調べる(2)

[Windowsのフォントの英語名を調べる](https://qiita.com/Cladophlebis/items/bdcc1c79d32547a2ca26) では`System.Drawing.Text.InstalledFontCollection`からフォントを調べたわけですが、こちらでは`System.Windows.Media.Fonts`を使ってフォント名を調べます。

## PowerShellコンソールで調べる方法
前の記事と似たような感じですがこちらもPowerShellで一覧表を作ります。

### スクリプト
```powershell
& {
    "|英語名|日本語名|タイプフェイス数|"
    "|-------|------|"
    Add-type -AssemblyName PresentationCore
    $ifc = [System.Windows.Media.Fonts]::SystemFontFamilies | Sort-Object -Property Source
    $ifc | ForEach-Object {
        $ename = $_.FamilyNames["en-US"]
        $jname = $_.FamilyNames["ja-JP"]
        $faceCount = $_.FamilyTypeFaces.Count
        $info = "|" + $ename + " | " + $jname +"|" + $faceCount + "|"
        $info
    }
}
```

### 出力結果(抜粋)
|英語名|日本語名|タイプフェイス数|
|-------|------|------|
|Arial | |8|
|Bahnschrift | |30|
|Comic Sans MS | |6|
|Consolas | |6|
|IPAexGothic | IPAexゴシック|4|
|IPAexMincho | IPAex明朝|4|
|IPAGothic | IPAゴシック|4|
|IPAKielSeven | |4|
|IPAMincho | IPA明朝|4|
|IPAPGothic | IPA Pゴシック|4|
|IPAPMincho | IPA P明朝|4|
|Meiryo | メイリオ|6|
|Meiryo UI | Meiryo UI|6|
|Microsoft Himalaya | |4|
|Microsoft JhengHei | |6|
|Microsoft JhengHei UI | |6|
|Microsoft New Tai Lue | |4|
|Microsoft PhagsPa | |4|
|Microsoft Sans Serif | |4|
|Microsoft Tai Le | |4|
|Microsoft YaHei | |6|
|Microsoft YaHei UI | |6|
|Microsoft Yi Baiti | |4|
|MS Gothic | ＭＳ ゴシック|4|
|MS Mincho | ＭＳ 明朝|4|
|MS PGothic | ＭＳ Ｐゴシック|4|
|MS PMincho | ＭＳ Ｐ明朝|4|
|MS UI Gothic | MS UI Gothic|4|
|Yu Gothic | 游ゴシック|8|
|Yu Gothic UI | |10|
|Yu Mincho | 游明朝|6|

こちらは日本語名が設定されていないフォントも多いです。
日本語環境の[設定]>[個人用設定]>[フォント]画面では、日本語名が設定されたフォントファミリーは日本語名で、無い場合は英語名で表示されるようです。
一方[en-us]Microsoft JhengHei には [zh-hk]微軟正黑體 、[zh-tw]微軟正黑體 が設定されていました。日本語環境では英語名で表示されていますが、おそらく中国語(繁体字)の環境ではこのフォント名が表示されるのでしょう。

各フォントファミリーに含まれるタイプフェイス数を見ると、こちらはより新しい方式のため、`System.Drawing.Text.InstalledFontCollection` で分割されていたファミリーが1つにまとめられていることがわかります。
【初学者向け】StatefulWidgetとは？

StatefulWidgetとはなんでしょうか？

状態を持つWidgetという認識で間違いありませんが、少し大雑把すぎます。私もFlutterを勉強する中でStatefulWidgetの理解に時間をかけてしまっていたので、私自身も含めて初学者向けにStatefulWidgetについて認識を共有しようと思います。

カウンターアプリを例に解説します。
```dart
class ProductCard extends StatefulWidget {
  // 外部から渡される値（設定）を定義
  final String productName;
  final int price;
  final Color backgroundColor;

  // コンストラクタで値を受け取る
  const ProductCard({
    super.key,
    required this.productName,
    required this.price,
    this.backgroundColor = Colors.white,
  });

  // Stateクラスを作成（1回だけ実行）
  @override
  State<ProductCard> createState() => _ProductCardState();
}

class _ProductCardState extends State<ProductCard> {
  // 変更される値（状態）を定義
  bool isFavorite = false;

  @override
  Widget build(BuildContext context) {
    // widget.を使ってWidgetクラスの値を参照
    return Card(
      color: widget.backgroundColor,
      child: Column(
        children: [
          Text(widget.productName),
          Text('${widget.price}円'),
          // 状態に基づいて表示を変更
          IconButton(
            icon: Icon(
              isFavorite ? Icons.favorite : Icons.favorite_border
            ),
            onPressed: () {
              setState(() {
                isFavorite = !isFavorite;  // 状態を更新
              });
            },
          ),
        ],
      ),
    );
  }
}
```
StatefulWidgetには2つのクラスが存在します。
## StatefulWidgetクラス
- 外部から設定を受け取る
    - 例ではproductName、price、backgrounfColorがこれに当たります
    - コンストラクタで値を受け取り、Stateクラス内に適用します
- createStateを実行しStateクラスを作成
    - 1度だけ実行し、Stateを作成

## Stateクラス
- 状態を持つ値を管理
    - 例ではisFavoriteがこれに当たります
- build()で画面を構築
- setStateを実行するとbuild()が再実行され、UIが更新される
   - setStateがなくても値は変更しますが、画面には反映されません
### 注意点
状態を持つ値、すなわち変数の定義位置に注意してください。
```dart
class _ProductCardState extends State<ProductCard> {
  // 本来の状態定義位置

  @override
  Widget build(BuildContext context) {
    // ここで状態を定義してはいけない
    return Card(
```
build()内で変数を定義すると、setStateが実行されるたびに変数が初期値になってしまいます。
例ではボタンをタップするとisFavoriteが反転（true↔︎false）しますが、定義位置がbuild内にある場合UIが変更されません。
※具体的にはタップした時点では値は変更されていますが（setState実行前）、setStateが実行されると初期値に戻るため結果的にUIに変更が生じません。

# まとめ
- 変更可能な状態（データ）を持つことができる
- 状態の変更には必ずsetState()を使う
- UIの更新は自動的に行われる
- StatefulWidgetとStateクラスの2つで1セット

## 発展的な使い方
- 複数の状態を持つWidget
- 親Widgetからのデータ受け渡し
- アニメーションの制御
- フォームの状態管理
タスクキルあるある

# はじめに

PC触ってたら、ファンの音がうるさいことってよくありますよね。

このあたりでタスクキルしようって思っても、「めんどくさい」とかなること多々ありますよね。
この辺で愚痴みたいになっちゃいますがあるあるな話でもしてみます。

# タスクキル

PCがうるさいそこのあなた。
まずはWindowsタスクバーから「task」とでも打ってみてください。
「タスクマネジャー」がでてきます。

とりあえず以下の手順に従っとけばそこそこ音は収まるかと。。

1. Microsoftの検索エンジンを左クリックで終了。
2. Webexを左クリックで終了。
3. 「Antimal Software Exucutable」と「エクスプローラ」以外の、現在メモリを使用中のものから左クリックで終了する。

※1 Antimal Software Exucutableはタスク終了できないです。
※2 エクスプローラは終了するとメニュー画面が真っ黒になります。
　　この場合、無理やり電源を消すしかなくなるので終了させないであげてください！

こういうアプリを終了させる行為を「タスクキル」と呼びます。

はい。長々とすみません…以上です。
コマンドライン操作の備忘録

# コマンドライン操作の備忘録
現在独学で勉強をしているため、学んだことを備忘録として残していこうと思います。
今回が初めて記事を書くのでアドバイスなどありましたら是非よろしくお願いします！
## 学んだコマンド
+ touch
+ cat
+ mkdir
+ cd
+ pwd
+ ls
+ mv
+ cp
+ rm
### touchコマンド
touchコマンドはファイルを作成するコマンド。
touchの後にファイル名を入力することで空ファイルを作成可能です。
```touch.cmd
$ touch "ファイル名"
```

### catコマンド
catコマンドはファイルの中身を表示するコマンド。
catの後にファイル名を入力することで対象ファイルの中身を表示できます。
```cat.cmd
$ cat "ファイル名"
```

### mkdirコマンド
mkdirコマンドは空のディレクトリを作成するコマンド。
mkdirの後にディレクトリ名を入力することで空ディレクトリを作成可能です。
```mkdir.cmd
$ mkdir "ディレクトリ名"
```

### cdコマンド
cdコマンドはディレクトリを移動するコマンド。
cdの後に移動先ディレクトリ名を入力することでディレクトリ間の移動が可能です。
```cd.cmd
$ cd "ディレクトリ名"
```

### pwdコマンド
pwdコマンドはカレントディレクトリを表示するコマンド。
pwdと入力することでルートディレクトリからカレントディレクトリまでの階層の表示が可能です。
```pwd.cmd
$ pwd
```

### lsコマンド
lsコマンドはディレクトリの中身を表示するコマンド。
lsと入力することでカレントディレクトリの中のファイルやディレクトリが一覧で表示可能です。
(表示されるのは１子階層のみ)
```ls.cmd
$ ls
```

### mvコマンド
mvコマンドはファイルを移動させるコマンド。
mvの後に移動させたいファイル名、移動先ディレクトリ名を入力することでディレクトリ間の移動が可能です。
```mv.cmd
$ mv "ファイル名""移動先ディレクトリ名"
```
ファイル名をディレクトリにすることでディレクトリごとの移動が可能です。
```mv-dir.cmd
$ mv "ディレクトリ名""移動先ディレクトリ名"
```
mvコマンドはファイル名を変更することも可能です。
mvの後に現在のファイル名、変更後のファイル名を入力することで変更できます。
```mv-name.cmd
$ mv "現在のファイル名""変更後のファイル名"
```

### cpコマンド
cpコマンドはファイルをコピーするコマンド。
cpの後にコピーするファイル名、新しいファイル名を入力することでコピーすることが可能です。
```cp.cmd
$ cp "コピーするファイル名""新しいファイル名"
```
オプションをつけるとディレクトリをコピーすることができます。
```cp-dir.cmd
$ cp -r"コピーするディレクトリ名""新しいディレクトリ名"
```

### rmコマンド
rmコマンドはファイルをコピーするコマンド。
rmの後に削除したいファイル名を入力することで削除することが可能です。
```rm.cmd
$ rm "削除したいファイル名"
```
rmコマンドもcpと同様にオプションをつけることが可能です。ディレクトリを削除することができます。
```rm-dir.cmd
$ rm -r"削除したいディレクトリ名"
```
【Unity6】【ECS】MonoBehaviorからSubScene内にエンティティを追加する

# 概要
掲題の通りです。
Unity ECS を扱うにあたってちょっとハマったので備忘として掲載しておきます。
ちなみにECSは全然詳しくないです。使えたら強力なのでしょうが、バージョン変わるたびに色々と変わってサードパーティのライブラリが利用できなくなったりしちゃうんで、まだまだ発展途上な気はしますね・・・

また情報があまりなく試行錯誤でやってるため、もっとスマートなやり方もあるかも。

# 動作環境

* Windows 11
* Unity 6
   * com.unity.entities v1.3.9
   * com.unity.entities.graphics v1.3.2
   * com.unity.collections　v2.5.2
   * com.unity.physics v1.3.9

# やりたいこと
MonoBehavior側からEntityManagerを呼び出し、ECSのWorldにEntityを追加したい。
たとえばボタンを押下した時にEntityを作るというようなことですね。とてもよくあるユースケースと思います。

# 最初やってたこと
先人たちの方法を倣って以下のようにしてました。

```c#
public void OnClickButton() {
    // EntityManagerの取得
    var entityManager = World.DefaultGameObjectInjectionWorld.EntityManager;
    // Entityを作成
    var entity = entityManager.CreateEntity();
    // Componentを追加
    entityManager.SetName(entity, "SolderSpawnCommand");
    entityManager.AddComponentData(entity, new SolderSpawnCommand {
        MilitaryType = MilitaryType.archar,
        Count = 10
    });
}
```

これでも作成はされますが、SubSceneの外側に作成されてしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163629/e236d15b-fb10-7830-34b5-35b74dfe057b.png)

すぐに削除するような一時的なコンポーネントならそれでも問題はないのですが、一定時間存在し続ける場合に問題が発生します。

# 何が問題か
シーン遷移した際にも、SubSceneの外側に作成されたEntityは存在し続けます。
SubScene内のEntityであれば、シーンのライフサイクルと同期してくれるのか、シーン遷移時に合わせて削除されます（※）。
しかしSubSceneの外側に作成されたEntityは、シーン遷移しても残り続けるため、また同じシーンを読みだした時に副作用が発生してしまいます。

※ ただ、スクリプト上からSubSceneを作成した場合はシーン遷移時に手動で削除するようなことしないといけないのかもですが（未検証）

# 解決方法
どうも、SubSceneが作成される際、 ~~`SceneSectionData`~~ というコンポーネントが作成されます（こちらのライフサイクルはSubSceneのロードとアンロードと同期してます）。
そして、新たに作成する Entity に以下のComponentを追加することで、SubScene内のデータとして扱われるようになるようです。

* SceneSection
* SceneTag

<font color="red">(2/11 22時修正)
SubSceneで階層ウィンドウのチェックを入れてる場合はなぜかSceneSectionDataができないみたい。。なので代わりにSceneReferenceとSceneEntityReferenceを取得するようにします</font>

なので、上記のコードを以下に書き換えます。

```c#
public void OnClickButton() {
    // EntityManagerの取得
    var entityManager = World.DefaultGameObjectInjectionWorld.EntityManager;
    // Entityを作成
    var entity = entityManager.CreateEntity();
    // SceneSectionDataの取得
    // SubSceneが一つだけの場合はそれぞれSingletonとして取得できる
    var sceneQuery = entityManager.CreateEntityQuery(typeof(SceneReference));
    var entityQuery = entityManager.CreateEntityQuery(typeof(SceneEntityReference));
    var entityReference = entityQuery.GetSingleton<SceneEntityReference>();
    var sceneReference = sceneQuery.GetSingleton<SceneReference>();

    // Componentを追加
    entityManager.SetName(entity, "SolderSpawnCommand");
    entityManager.AddComponentData(entity, new SolderSpawnCommand {
        MilitaryType = MilitaryType.archar,
        Count = 10
    });
    // 以下を追加
    entityManager.AddSharedComponent(entity, new SceneSection() {
        SceneGUID = sceneReference.SceneGUID
    });
    entityManager.AddSharedComponent(entity, new SceneTag() {
        SceneEntity = entityReference.SceneEntity
    });
}
```

これで実行することで、SubSceneの管理下におかれるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163629/829f6ea7-9cda-3aa5-7fef-043a3729e71f.png)
Scala 環境構築 VSCode+Metals

## この記事について

VSCode環境でScalaの原始的なプログラムを実行するまでの手順です。

## Scalaのインストール

Scalaの公式サイトのインストーラーからインストールします。

https://docs.scala-lang.org/ja/getting-started/index.html

インストーラーによるインストールが完了したら、`cs setup` コマンドで関連ツールのインストールを行います。

## プロジェクトの作成

対象のディレクトリでsbtコマンドを使ってプロジェクトを作成します。

Scala3の場合は`sbt new scala/scala3.g8`です。直後にプロジェクト名を要求されますので入力します。

## プログラムの実行

※VSCode, Metalsはインストール済みであることを前提とします。

VSCodeでプロジェクトディレクトリを開き、Main.scalaを開きます。
@の上くらいに`run`があるのでクリックすると実行されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3969557/93c6c651-d845-7cf0-1c89-a0e947b43882.png)

Terminalに結果が出力されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3969557/0257f0be-7f43-5d54-9257-aa21291c5968.png)

以上です。
rex0220 計算式プラグイン スペース項目にレコードの概要表示

[計算式プラグイン](https://qiita.com/rex0220/items/ae83c6d5ce50ff7a9a73)でスペース項目にレコードの概要を表示してみます。

# 概要

スペース項目にレコードの概要を表示してみました。
散らばった項目をまとめて表示することで、概要を把握しやすくなります。
モバイル表示では、スクロール量が少なくなりわかりやすいと思います。

※計算式プラグインとタブ表示プラグインを利用

- pc版表示とモバイル版表示

![2025-02-11_13h04_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/52373899-2067-2be9-5424-2695a1dea2d3.png)

- 詳細画面の項目から概要作成

![2025-02-11_13h07_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/4f82ede0-c08c-0b7c-cffb-af39dd6bf38e.png)

# 操作例：　レコード切り替え

![2025-02-11_13h17_35.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/5201fcfa-d946-de3c-67bd-4df76bd9185f.gif)

# アプリ設定

kintone アプリストアの案件管理（営業支援パック）にスペース項目を追加します。
スペース項目には、要素IDをつけてください。

# 計算式プラグイン設定

各タグに、STYLE関数で書式指定が出来ます。

- 初回商談日：　未入力時は背景色指定
- 数値項目は、FIXED 関数で書式指定、 右寄せ、100万以上を赤表示
- 日付項目は、DATE_FORMAT 関数で書式指定

![2025-02-11_13h20_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/9346d3d2-5731-ca2f-732e-3cbd20597bcc.png)

```.js
OPTION: 

// sp1:(sp1) SPACER
LET(
  label, TAGS_HTML(
    TAG("style", JOIN(ARRAY(
        ".custom-table { width: auto; table-layout: auto; border-collapse: collapse; }",
        ".custom-table td { border: 1px solid darkgray; padding: 4px 6px; }",
        ".custom-table td:first-child { white-space: nowrap; color: blue; }",
        ".custom-table td:last-child { word-break: break-word; }",
    ), NEWLINE(),1)),
    TAG("div", "概要")
  ),
  table, TAGS_HTML(
  TAG("table", 
    ATTR("class", "custom-table "),
    STYLE("border-collapse", "collapse"),
    TAG("tr", TAG("td", "顧客名"), TAG("td", 顧客名)),
    TAG("tr", TAG("td", "部署名"), TAG("td", 部署名)),
    TAG("tr", TAG("td", "担当者名"), TAG("td", 担当者名)),
    TAG("tr", TAG("td", "案件名"), TAG("td", 案件名)),
    TAG("tr", TAG("td", "確度"), TAG("td", 確度)),
    TAG("tr", TAG("td", "初回商談日"), TAG("td", DATE_FORMAT(初回商談日),
      IF(NOT(初回商談日),STYLE("background-color:#f9bba5;")))),
    TAG("tr", TAG("td", "提案プラン"), TAG("td", 提案プラン)),
    TAG("tr", TAG("td", "オプション"), TAG("td", オプション)),
    TAG("tr", TAG("td", "商談担当者"), TAG("td", 商談担当者)),
    TAG("tr", TAG("td", "プラン費用"), TAG("td", FIXED(プラン費用),
      STYLE("text-align:right;"), IF(プラン費用>1000000,STYLE("color:red;")))),
    TAG("tr", TAG("td", "オプション費用"), TAG("td", FIXED(オプション費用),
      STYLE("text-align:right;"), IF(オプション費用>1000000,STYLE("color:red;")))),
    TAG("tr", TAG("td", "合計費用"), TAG("td", FIXED(合計費用),
      STYLE("text-align:right;"), IF(合計費用>1000000,STYLE("color:red;")))),
    TAG("tr", TAG("td", "受注予定日"), TAG("td", DATE_FORMAT(受注予定日))),
    TAG("tr", TAG("td", "詳細"), TAG("td", 詳細)),
  )),
  ARRAY(label,"",table,"")
)
```
【MacBook】Slack の通信がなぜか遅いときの対処法

# はじめに

Wi-Fiの速度は遅くないのに、なぜか Slack の通信速度が遅かったので、調査しました。

# 対処法

✅ **1. ファイアウォール設定の見直し**
- もしブロックされている場合は、「外部からの接続を許可」に変更する

✅ **2. キャッシュをクリアする**
- Slack のアプリでキャッシュが溜まっていると動作が遅くなることがある
  - Slackを開く → `Command + Shift + K` でキャッシュを削除

✅ **3. ネットワーク設定を調整**


- **DNSをGoogleやCloudflareに変更**
  - **Google DNS (8.8.8.8 / 8.8.4.4)**
  - **Cloudflare DNS (1.1.1.1 / 1.0.0.1)**

# 結果

上記のやり方で、1と2をやっても直らなかったので、3を実行しました。

# 3の手順

**MacでDNSをGoogle (8.8.8.8)やCloudflare (1.1.1.1) に変更する方法**

#### ✅ **1. システム設定を開く**
1. 画面左上の **Appleメニュー（）** をクリック
2. **「システム設定」** を開く（macOS Ventura以降の場合）
   - macOS Monterey以前の場合は **「システム環境設定」**
3. **「ネットワーク」** を選択

#### ✅ **2. 接続中のネットワークを選択**
1. Wi-Fiを使っている場合は **「Wi-Fi」** をクリック
   - 有線（Ethernet）なら **「LAN」** を選択
2. 接続中のネットワーク（例: 自宅のWi-Fi）をクリック

#### ✅ **3. DNS設定を変更**
1. 「詳細...」をクリック
2. **「DNS」** タブを選択
3. **「＋」ボタン** を押して、以下のDNSアドレスを追加

   **Google DNS**
   ```
   8.8.8.8
   8.8.4.4
   ```
   **または Cloudflare DNS**
   ```
   1.1.1.1
   1.0.0.1
   ```
4. 「OK」をクリック

#### **4. 設定を適用**
1. **「適用」ボタン** を押して設定を保存
2. **Wi-Fiをオフ→オンにする**（またはPCを再起動）


#### **5. 変更を確認する**
1. ターミナルを開く (`Command + Space` → `terminal` と入力)
2. 以下のコマンドを実行し、新しいDNSが適用されているか確認
   ```
   nslookup google.com
   ```
3. **Server** の項目が `8.8.8.8` や `1.1.1.1` になっていればOK！

# 終わりに
最終的にDNSの設定を変更したことで、通信速度が改善されました！
Raspberry Pi の NTFS の USB HDD に Mac から Time Machine バックアップ

2024年7月で OS (Buster) の更新が終わっていたので、NAS を作り直しました。

- 個人で使用するので普段使いのアカウントを流用
- Mac と Windows からアクセス
- NTFS だけど ACL は使用しない

類似記事多数で、自分のが最高だというつもりはありません。備忘録を兼ねています。


## Raspberry Pi Imager

Headless で運用するので Raspberry Pi OS Lite (64-bit) を選択。

authorized_keys のところは、ssh-keygen で作成した .ssh/id_ed25519.pub の中身を書く (欄が小さいけどパスではなく中身を書く)。


## 外付け HDD のマウント

ssh で接続し、何はともあれ `sudo apt update` & `sudo apt full-upgrade`

`ls -l /dev/disk/by-uuid/` の結果から、sda1 は 8E62C9DD62C9C9E3

`id -u` `id -g` はともに 1000。

これらの情報をもとに fstab に記述を追加するのだけど、NTFS のせいでマウント オプションまわりが難しい。以下を参考にした。

https://askubuntu.com/a/113746

`man ntfs-3g` `man mount` も参考になった。

`UUID=8E62C9DD62C9C9E3 /mnt/usbhdd     ntfs-3g defaults,uid=1000,gid=1000,fmask=133,dmask=022,windows_names` とした。この fmask、dmask により普通のパーミッションに見える。windows_names は Widnows で使えない名前のものが作成されないようにしてくれる。

```console
$ sudo systemctl daemon-reload # fstab の変更を読み込み
$ sudo mkdir /mnt/usbhdd
$ sudo mount -a
```

でマウントできることを確認。


## samba のインストール

```console
$ sudo apt install samba
```

以前は avahi-daemon をインストールしたり samba 用の設定を記述したり大変だった記憶があるが、今はもともとインストールされているし samba が設定してくれる。


## smb.conf の編集

vi は上下キーが使えないし地味。nano のほうがカラフル。

/etc/samba/smb.conf の以下の箇所の行頭に ; を追加して、map to guest のデフォルトである never にする。

```
map to guest = bad user
```

[global] セクションの最後に `vfs objects = fruit` を追加する。[global] に追加せず他のセクションで使うと `testparm -s` で警告が出る。

[homes] の設定によりホーム ディレクトリーが共有される。使う予定はないけれど一応残す。

最後に以下を追加する。

```smb.conf
[usbhdd]
   path = /mnt/usbhdd
   browseable = yes
   read only = no
   guest ok = no
   valid users = hanotch
   vfs objects = fruit streams_xattr
   fruit:aapl = yes
   fruit:time machine = yes
```

変更したら `testparm -s` で確認し、`sudo service smbd restart`。

`vfs objects = streams_xattr` をつけないと NTFS の streams を記録できず、昔は Edge からダウンロードして保存できなかったらしい。

vfs objects の説明は man を参考にする。

https://www.samba.org/samba/docs/current/man-html/vfs_fruit.8.html

https://www.samba.org/samba/docs/current/man-html/vfs_streams_xattr.8.html


## Samba ユーザーの設定

```console
$ sudo smbpasswd -a "$USER"
```


## Mac からの接続

Finder の 移動 > サーバへ接続 で smb://hanotch@raspberrypi.local に接続できることを確認

システム設定 > 一般 > Time Machine で バックアップディスクを追加 から usbhdd を選択して ディスクを設定


## HDD のスピンダウンの設定

hdparm や sdparm で済む場合が多いようなのだけど、うちの HDD は `hdparm -y` は効くのに `hdparm -S` は効かない。

そこで hd-idle をインストールして設定する。

```console
$ sudo apt install hd-idle
$ sudo echo 'HD_IDLE_OPTS="-i 30 -a sda1 -l /var/log/hd-idle.log"' >> /etc/default/hd-idle
$ sudo service hd-idle restart
```
【最終手段】CloudflarePagesでnextjsデプロイするときに毎回エラーが出てくるときの最終手段

## はじめに
今回紹介するこの方法は、まさに**最終手段**です。
個人間での利用以外であまり使用しないことをお勧めします。

## 試した環境
私が試した環境は、

```text
Framework: Nextjs
Language: TypeScript
module: 以下参照
```

```package.json

{
  "name": "yurinoki-bbs.com",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-toast": "^1.2.6",
    "@supabase/supabase-js": "^2.48.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.475.0",
    "next": "15.1.6",
    "next-themes": "^0.4.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-markdown": "^9.0.3",
    "sonner": "^1.7.4",
    "supabase": "^2.9.6",
    "tailwind-merge": "^3.0.1"
  },
  "devDependencies": {
    "@cloudflare/next-on-pages": "^1.13.7",
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.6",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.7.3",
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1"
  }
}
```

まぁこんな感じのモジュールを使って試しました。
これ以外の環境では試していないので実際にこの対処法が使えるかはわからないことをご了承ください。

## 対処法
### その１
まず、一回普通にCloudflarePagesでデプロイします。
この時重要なのは、**たぶん一回は必ず失敗する**ということです。
失敗したらデプロイの設定に飛んで
``バインディング`` -> ``互換性フラグ``という設定に、
```text
nodejs_compat
```
というのを追加してください。
これがないとnodejsに関するapiが使えない**らしい**です。

### その2
``next.config.ts``に以下の設定を加えてください。
これはeslintのエラーや警告を無視する設定です
```ts
const nextConfig: NextConfig = {
  /* config options here */

  eslint: {
    ignoreDuringBuilds: true
  }
};
```

私の場合はこうなりました。
```next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */

  eslint: {
    ignoreDuringBuilds: true
  }
};

export default nextConfig;
```

はい、この設定以外何もないです（）

### その3

``tsconfig.json``の``compilerOptions``に以下の設定を加えてください
```json
"noImplicitAny": false
```
これは、コード内で``any``型を許容するという設定です。
私の場合、コード内で``any``を使っていたのでこれが必須でしたが、``any``を使っていない人は別に必須ではありません

### その4
``eslint.config.mjs``を以下にしてください。
これの書き方に関しては私さっぱりなのでコメントなどで教えてもらえれば改善するかもです
```eslint.config.mjs
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

export default [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    rules: {
      "@next/next/no-async-client-component": "off",
      "@typescript-eslint/no-explicit-any": "off",
      "@typescript-eslint/no-unsafe-function-type": "off",
      "@typescript-eslint/no-unused-vars": "off",
      "react-hooks/exhaustive-deps": "off",
      "@next/next/no-sync-scripts": "off"
    },
  }
];
```

これは、eslintですべてのエラー、警告をスルーするといった設定です。
***非推奨です***

## 読んでいただきありがとうございました
この設定をし、私はデプロイに成功しましたが、皆様がこれで動くとは限りません。
この設定は、公開するサービスで絶対に使わないでください。

読んでいただきありがとうございました。