myoshi2891 · Aug 10, 2026 · Aug 8, 2026 · Aug 8, 2026 · Aug 8, 2026 · Aug 8, 2026
diff --git a/.agents/AGENTS.md b/.agents/AGENTS.md
@@ -0,0 +1,32 @@
+# Project Rules & Quality Mandates: Cloud Infrastructure Studies
+
+(最終更新日: 2026-08-09)
+
+本ファイルは、本プロジェクトにおけるコード実装・HTML移行・スタイリング・テスト駆動開発（TDD）の厳格な品質基準と運用ルールを規定する。
+
+## 1. デザイン完全移転原則（厳守）
+
+- **元HTMLの `:root` スタイル変数が表すデザイン値の100%全量移植**:
+  - 静的HTMLから Next.js への移行時、元HTMLの `<style>` に定義されている `:root` 変数（背景色 `--bg`, `--bg-panel`, `--bg-panel-2`, `--bg-code`、境界線 `--border`, `--border-soft`、アクセントカラー `--accent`, `--accent-2`、テキスト色 `--text`, `--text-muted`, `--text-faint` 等）が表す視覚デザイン値を簡略化したり自己流に置き換えてはならない。追加先の優先順位は、まず既存の `app/globals.css` の `@theme` トークンへ対応付け、表現できない新規テーマカラーだけをページ固有 CSS のページルートセレクタへ定義する。その CSS は対応する `page.tsx` または `layout.tsx` から直接 import する。
+  - 元HTMLの背景色グラデーション（`linear-gradient`）、ピル型バッジ（`border-radius: 999px`）、文字グラデーション（`background-clip: text`）、コールアウト枠線、ボタンデザイン、余白・フォントサイズは、既存のグローバルトークンと、既存トークンで表現できない場合に限るページ固有トークンの参照によって100%忠実に移転すること。
+
+## 2. Mermaid ダイアグラムの視認性と配色検証ルール
+
+- **黄色・明色ノードの黒文字強制適用**:
+  - Mermaid図解内で使用される黄色・明色ノード（`#ffe08a`, `#fbbc04`, `#ffd479`, `#ffba00` 等）は、暗色テーマ環境下でデフォルトの白文字 (`#ffffff`) が当たると文字が同化して判読不能になる。
+  - 新しい黄色系カラーコードを使用する際は、必ず [`components/MermaidDiagram.module.css`](../components/MermaidDiagram.module.css) の黒文字転換セレクタ（`.mermaidTarget :global(.node[style*="..."] .nodeLabel)` 等）にカラーコードを追加し、黒文字 (`#000000 !important`) で高コントラスト表示されることを確認すること。
+- **図解の拡大・枠外はみ出し防止**:
+  - `diagram-wrapper` および `mermaid-wrap` 内の SVG 要素には `max-width: 100% !important; height: auto !important;` を指定し、ヘッダーや画面枠をはみ出さないよう収めること。
+  - **例外**: `MermaidDiagram.tsx` で `preserveNaturalScale={true}` を指定した図は、SVG の自然倍率維持を優先して `max-width: none` とし、親ラッパーの `overflow-x: auto` で横スクロールを提供する。この場合、`diagram-wrapper` / `mermaid-wrap` から `max-width: 100% !important` を SVG に適用してはならない。
+
+## 3. TDD & コミットワークフローの鉄則
+
+- `Step 1 (Red)`: 要件・見出し・表セル・Mermaid図の `ariaLabel`・参考リンクを100%網羅するテストを先に作成し、失敗を確認してコミット。
+- `Step 2 (Green)`: テストを通過させる最小限の実装を行いコミット。
+- `Step 3 (Refactor)`: ルーティング統合 (`app/constants.ts`) およびドキュメント (`MIGRATION_PROGRESS.md`, `GEMINI.md`, `CLAUDE.md`) の更新を行いコミット。
+
+## 4. Cisco 移行元ファイルのアーカイブ規約（厳守）
+
+- Cisco の移行元 HTML / Markdown は、原本を保持したまま `archive/Cisco/html/` および `archive/Cisco/md/` の適切な下位ディレクトリへ保存すること。
+- `Gcl_Archive/Cisco` は作成・使用してはならない。既存の Cisco アーカイブやドキュメント参照を発見した場合は `archive/Cisco` へ統合すること。
+- アーカイブ移動と同じコミットで `MIGRATION_PROGRESS.md` 等の参照先を同期し、`Gcl_Archive/Cisco` が残っていないことをテストまたは検索で確認すること。
diff --git a/.agents/rules/css-cache-reset.md b/.agents/rules/css-cache-reset.md
@@ -0,0 +1,153 @@
+# globals.css 変更後のキャッシュリセットルール
+
+(最終更新日: 2026-08-10)
+
+## 問題
+
+`globals.css`（特に `@theme` ブロック）を変更した後、`.next` に古い CSS チャンクが残ると、CSS カスタムプロパティ（`--color-background` 等）が空文字に解決されてページのダークモードが消える。
+
+**症状チェック**（ブラウザコンソールで確認）:
+
+```js
+getComputedStyle(document.documentElement).getPropertyValue('--color-background')
+// "" が返る → CSS変数が未適用の症状（キャッシュ汚染とは未確定）
+// "#08090f" が返る → 正常
+```
+
+空文字の場合は `.next` を削除する前に、次を順に確認する:
+
+1. ブラウザの Network パネルで対象ページの CSS が 200 応答で読み込まれていること。
+2. 読み込まれた生成 CSS に `--color-background` の定義が含まれていること。
+3. ルートレイアウトから `app/globals.css` が import されていること。
+
+これらが正常でも古い CSS が配信される場合に、キャッシュ不整合として以下の削除・再起動を行う。
+
+## ルール
+
+### 必須トリガー
+
+以下のファイルを編集した後は **必ず** `.next` を削除して dev サーバーを再起動する:
+
+- `app/globals.css`
+- `app/**/*.css`（ページ固有スタイル）
+- `components/**/*.module.css` や `app/**/*.module.css`（CSS Modules スタイル）
+
+### 手順
+
+```bash
+# 1. PORT と、このポートで LISTEN 中の dev サーバーを fail-closed で取得
+dev_port=${PORT:?PORT を設定してください}
+if ! dev_pids=$(lsof -tiTCP:"$dev_port" -sTCP:LISTEN); then
+  echo '指定ポートの dev サーバー PID を取得できません。処理を中止します。' >&2
+  exit 1
+fi
+dev_pid=${dev_pids%%$'\n'*}
+[ -n "$dev_pid" ] || { echo 'dev サーバー PID が空です。処理を中止します。' >&2; exit 1; }
+
+# 2. 対象 PID のコマンドと cwd が、このプロジェクトの next dev --turbopack であることを確認
+if ! dev_command=$(ps -p "$dev_pid" -o command=); then
+  echo 'dev サーバーのコマンドを取得できません。処理を中止します。' >&2
+  exit 1
+fi
+if ! dev_cwd_record=$(lsof -a -p "$dev_pid" -d cwd -Fn); then
+  echo 'dev サーバーの cwd を取得できません。処理を中止します。' >&2
+  exit 1
+fi
+dev_cwd=${dev_cwd_record#n}
+if ! printf '%s\n' "$dev_command" | rg -q '(^|[ /])next dev --turbopack([[:space:]]|$)' || [ "$dev_cwd" != "$PWD" ]; then
+  echo '対象 PID はこのプロジェクトの next dev --turbopack ではありません。' >&2
+  exit 1
+fi
+
+# 3. 確認済みの dev サーバーだけを明示承認後に停止
+if [ -t 0 ]; then
+  printf 'PID %s を停止しますか? [y/N] ' "$dev_pid"
+  read -r confirm_stop
+  [ "$confirm_stop" = 'y' ] || [ "$confirm_stop" = 'Y' ] || exit 1
+elif [ "${CONFIRM_STOP_DEV_SERVER:-}" != 'yes' ]; then
+  echo '非対話実行では CONFIRM_STOP_DEV_SERVER=yes による明示承認が必要です。' >&2
+  exit 1
+fi
+
+# 承認待ちの間に PID が再利用されていないことを停止直前に再検証
+if ! current_dev_command=$(ps -p "$dev_pid" -o command=); then
+  echo '停止直前の dev サーバーコマンドを取得できません。処理を中止します。' >&2
+  exit 1
+fi
+if ! current_dev_cwd_record=$(lsof -a -p "$dev_pid" -d cwd -Fn); then
+  echo '停止直前の dev サーバー cwd を取得できません。処理を中止します。' >&2
+  exit 1
+fi
+current_dev_cwd=${current_dev_cwd_record#n}
+if [ "$current_dev_command" != "$dev_command" ] || [ "$current_dev_cwd" != "$dev_cwd" ] || \
+  ! printf '%s\n' "$current_dev_command" | rg -q '(^|[ /])next dev --turbopack([[:space:]]|$)'; then
+  echo '対象 PID の同一性を再確認できません。停止せず処理を中止します。' >&2
+  exit 1
+fi
+kill "$dev_pid" || exit 1
+
+# PID の終了確認前にキャッシュを削除・再起動しない
+# ps の終了コード 1（対象 PID なし）だけを「終了確認」とし、それ以外の失敗は中止する
+shutdown_attempt=0
+while :; do
+  if ps -p "$dev_pid" > /dev/null 2>&1; then
+    ps_status=0
+  else
+    ps_status=$?
+  fi
+  [ "$ps_status" -eq 1 ] && break
+  if [ "$ps_status" -ne 0 ]; then
+    echo 'dev サーバーの終了確認に失敗しました。キャッシュ削除と再起動を中止します。' >&2
+    exit 1
+  fi
+  shutdown_attempt=$((shutdown_attempt + 1))
+  if [ "$shutdown_attempt" -ge 50 ]; then
+    echo 'dev サーバーが期限内に終了しませんでした。再起動処理を中止します。' >&2
+    exit 1
+  fi
+  sleep 0.1
+done
+
+# 4. キャッシュ削除
+rm -rf .next
+
+# 5. dev サーバー再起動（検証済みのポートを明示的に使用）
+PORT="$dev_port" bun run dev
+```
+
+## 背景
+
+Next.js + Tailwind v4 の CSS コンパイルはチャンク単位でキャッシュされる。HMR は JS の変更には追従するが、`@theme` ブロックの変数定義変更はキャッシュ無効化が不完全なことがある。
+
+## 本番ビルド（Docker）でも同じ症状が出る場合
+
+dev サーバーでは正常でも Docker の本番ビルドで CSS 変数が空になるケースがある。
+
+原因を CSS チャンク分割と断定する前に、次を順に診断する:
+
+1. ソースの `@theme` と、生成 CSS の対象 CSS 変数を別々に確認する。
+
+   ```bash
+   rg '@theme' app
+   rg -- '--color-background' .next/static/css
+   ```
+
+2. 生成ページが参照する CSS の `preload` / `stylesheet` を確認する。
+
+   ```bash
+   rg 'preload|stylesheet' .next/server/app
+   ```
+
+3. ブラウザの Network パネルで、参照された CSS が 200 応答であり、応答本文に対象 CSS 変数が含まれることを確認する。
+
+**原因の仮説**: Next.js 本番ビルドのルート単位の CSS チャンク分割により、Tailwind v4 の `@theme` 出力が対象ページから参照されないチャンクへ分離されている可能性がある。ブラウザの "preloaded but not used" 警告はこの仮説を調べる手掛かりであり、それだけでは確定原因ではない。
+
+**恒久対策**: 変数定義は `@theme` ブロックに定義します。キャッシュによる不整合が発生した場合は、上記の手順に従ってキャッシュを削除し再起動してください。
+
+**Docker リビルド手順**（`globals.css` 変更後）:
+
+`package.json` の `docker:rebuild` スクリプトは、起動中のコンテナを停止し、本番イメージをビルドしてから、開発イメージを再ビルドして開発コンテナを起動する。
+
+```bash
+bun run docker:rebuild
+```
diff --git a/.agents/rules/migration-progress-sync.md b/.agents/rules/migration-progress-sync.md
@@ -0,0 +1,131 @@
+---
+paths:
+  - "app/**/*.tsx"
+  - "app/**/*.css"
+  - "MIGRATION_PROGRESS.md"
+---
+
+# MIGRATION_PROGRESS.md セッション終了前同期ルール
+
+(最終更新日: 2026-08-09)
+
+HTML → Next.js 移行セッションでは、**コンテキストが逼迫する前に**必ず以下を実施してセッションを終えること。
+
+## 実行タイミング
+
+<ai_agent_directive>
+**AI エージェントへの厳格な指示**: このプロトコルは提案ではなく絶対的な**ゲート条件（Gate Condition）**です。
+コミットはリポジトリの単一コミット認可方針と `.agents/rules/tdd-commit-workflow.md` に従い、ユーザーの依頼がコミットを明示または許可している場合にのみ実行してください。コミット前に `git status --short` と `git diff` を確認し、実装コミットには関連コードだけ、進捗同期コミットには関連する進捗ファイルだけを含めます。追加の認可が必要な場合に自律コミットしてはなりません。
+</ai_agent_directive>
+
+### 必須（毎ページ・例外なし）
+
+**1ページの `git commit` 完了直後、次の HTML を `Read` し始める前に即実施する。**
+
+これは任意の「区切り」ではなく、次ページ読み込みのための**ゲート条件**。
+`MIGRATION_PROGRESS.md` が未コミットの状態で次の HTML を読み始めることは禁止。
+
+### 追加トリガー
+
+- コンテキスト消費が大きくなってきた
+- ユーザーが新セッション開始を示唆
+- ユーザーが「セッション終了」「仕様書更新して」と言った
+
+## 手順
+
+### 1. ビルド確認
+
+```bash
+if ! bun run build; then
+  echo 'ビルドに失敗しました。進捗同期を中止します。' >&2
+  exit 1
+fi
+if ! bun run lint; then
+  echo 'Lint に失敗しました。進捗同期を中止します。' >&2
+  exit 1
+fi
+if ! progress_status=$(git status --short); then
+  echo 'worktree の状態を取得できません。進捗同期を中止します。' >&2
+  exit 1
+fi
+if [ -n "$progress_status" ]; then
+  echo '進捗同期前に worktree をクリーンにしてください。' >&2
+  exit 1
+fi
+if ! implementation_head=$(git rev-parse HEAD); then
+  echo '最新実装 HEAD を取得できません。進捗同期を中止します。' >&2
+  exit 1
+fi
+```
+
+`implementation_head` は進捗ファイルを編集する前の最新実装コミットであり、後続の進捗同期コミットとは区別する。
+
+### 2. `MIGRATION_PROGRESS.md` を更新
+
+更新対象フィールド:
+
+| フィールド | 更新内容 |
+|---|---|
+| `最新実装 HEAD` | 進捗ファイル編集前に保存した `implementation_head` + 実装コミットメッセージ要約 |
+| `前回進捗同期コミット` | 今回の更新前に完了していた直前の進捗同期コミット。新しい同期コミット自身の値ではなく、次回同期時に前回値として更新する |
+| `次の作業` | 次セッションで **最初に** 取り掛かるページ（例: `Gcp-ace-complete-advanced-guide.html 移行`） |
+| `ビルド状態` | `bun run build` / `bun run lint` の最新状態 |
+
+### 3. `## 次回セッションでの再開プロンプト` を同期
+
+`現在地` の値と一致するように再開プロンプト内の以下を書き換える:
+
+- `最新実装 HEAD: <hash>` の値（`implementation_head` と一致）
+- `前回進捗同期コミット: <hash>` の値（今回の更新前に完了していた直前の進捗同期コミットと一致）
+- `次の作業:` の説明（ページ粒度で具体的に）
+- 未移行 HTML の残数
+
+編集後、変更が `MIGRATION_PROGRESS.md` だけであることを確認する:
+
+```bash
+if ! progress_status=$(git status --short); then
+  echo 'worktree の状態を取得できません。コミットを中止します。' >&2
+  exit 1
+fi
+if [ "$progress_status" != ' M MIGRATION_PROGRESS.md' ]; then
+  echo 'MIGRATION_PROGRESS.md 以外の変更が含まれています。' >&2
+  exit 1
+fi
+```
+
+### 4. コミット
+
+```bash
+if [ "${COMMIT_AUTHORIZED:-}" != 'yes' ]; then
+  echo '進捗同期コミットには COMMIT_AUTHORIZED=yes による明示認可が必要です。' >&2
+  exit 1
+fi
+if ! git status --short; then
+  echo 'worktree の状態を取得できません。コミットを中止します。' >&2
+  exit 1
+fi
+if ! git add MIGRATION_PROGRESS.md; then
+  echo '進捗ファイルをステージできません。コミットを中止します。' >&2
+  exit 1
+fi
+if ! git diff --cached -- MIGRATION_PROGRESS.md; then
+  echo 'ステージ差分を取得できません。コミットを中止します。' >&2
+  exit 1
+fi
+if ! git commit -m "chore(docs): update MIGRATION_PROGRESS.md — <作業内容の1行要約>"; then
+  echo '進捗同期コミットを作成できません。後続処理を中止します。' >&2
+  exit 1
+fi
+if ! new_progress_sync_commit=$(git rev-parse HEAD); then
+  echo '作成した進捗同期コミットを取得できません。後続処理を中止します。' >&2
+  exit 1
+fi
+```
+
+各 Git 操作が失敗した場合は、その時点で編集・記録・後続処理を中止する。`new_progress_sync_commit` は `git commit` が成功した直後の `HEAD` を取得できた場合にのみ代入し、失敗前の古い `HEAD` を流用しない。今回作成した進捗同期コミットの識別子として実行結果・引き継ぎに記録し、今回コミットした `前回進捗同期コミット` や `最新実装 HEAD` を上書きしない。次回の進捗同期時に、この値を `前回進捗同期コミット` として記録する。
+
+## 禁止
+
+- HEAD 値をコミットせず新セッションに引き継ぐ（ズレが発生する）
+- 再開プロンプトと `現在地` が食い違ったままコミットする
+- ビルドエラーが残ったままコミットする