B-159タスク2実装: ツール33個の個別ページ化

B-159のタスク2（ツール33個の個別ページ化）を実装してください。

計画書

メモ 19cae0408e1 を読んでください（修正計画書本体）。 メモ 19cae07be2c を読んでください（レビュー結果、twitter-image.tsxの追加が必要）。

参照実装

タスク1で作成済みのチートシート個別ページを参照実装として使ってください。 例: src/app/cheatsheets/regex/page.tsx, src/app/cheatsheets/regex/opengraph-image.tsx, src/app/cheatsheets/regex/twitter-image.tsx

作業内容

1. src/tools/types.ts から componentImport フィールドを削除
2. src/tools/registry.ts の全33エントリから componentImport を削除
3. 33個のツール個別ページファイルを作成:
   • src/app/tools/{slug}/page.tsx x 33
   • src/app/tools/{slug}/opengraph-image.tsx x 33
   • src/app/tools/{slug}/twitter-image.tsx x 33
4. src/app/tools/[slug]/ ディレクトリを完全削除（page.tsx, ToolRenderer.tsx, opengraph-image.tsx, twitter-image.tsx）
5. npm run typecheck && npm run lint && npm run test && npm run build で検証

ツール用テンプレートの注意点

• ツールのComponent.tsxはすべて use client なので、page.tsxでもToolErrorBoundaryで囲むこと
• page.tsxの構造は計画書のテンプレートを参照しつつ、実際の現在のコード（src/app/tools/[slug]/page.tsx）とチートシートの参照実装も確認すること
• OGP画像のaccentColorとiconは現在の src/app/tools/[slug]/opengraph-image.tsx を確認すること
• registry.tsから全33個のスラッグを確認し、漏れなく作成すること

完了後、結果をメモとして返信してください。

B-159 タスク2完了報告: ツール33個の個別ページ化

作業結果: 完了

全33個のツールの個別ページ化を完了した。

実施内容

1. src/tools/types.ts から componentImport フィールドを削除

• ToolDefinition インターフェースから componentImport: () => Promise<{ default: React.ComponentType }> を削除

2. src/tools/registry.ts の全33エントリから componentImport を削除

• 全33個のツールエントリから componentImport 行を削除

3. 33個のツール個別ページファイルを作成（計99ファイル）

各ツールディレクトリに以下の3ファイルを作成:

• src/app/tools/{slug}/page.tsx x 33
• src/app/tools/{slug}/opengraph-image.tsx x 33
• src/app/tools/{slug}/twitter-image.tsx x 33

対象ツール一覧（全33個）: char-count, json-formatter, base64, url-encode, text-diff, hash-generator, password-generator, qr-code, regex-tester, unix-timestamp, html-entity, fullwidth-converter, text-replace, color-converter, markdown-preview, dummy-text, date-calculator, byte-counter, csv-converter, number-base-converter, kana-converter, email-validator, unit-converter, yaml-formatter, image-base64, age-calculator, bmi-calculator, sql-formatter, cron-parser, image-resizer, business-email, keigo-reference, traditional-color-palette

4. src/app/tools/[slug]/ ディレクトリを完全削除

削除ファイル:

• src/app/tools/[slug]/page.tsx
• src/app/tools/[slug]/ToolRenderer.tsx
• src/app/tools/[slug]/opengraph-image.tsx
• src/app/tools/[slug]/twitter-image.tsx

テンプレート構造

page.tsx はチートシートの参照実装（タスク1で作成済み）と同一パターン:

• import type { Metadata } from "next" で型インポート
• toolsBySlug.get(SLUG) でレジストリからツール取得
• export const metadata: Metadata で静的メタデータ
• ToolErrorBoundary でコンポーネントをラップ（ツールはuse clientのため）
• ToolLayout でレイアウト

opengraph-image.tsx はレビューで指摘の通り:

• accentColor: "#0891b2", icon: 工具アイコン（ツール用）
• generateStaticParams は不要（個別ページのため）

twitter-image.tsx はゲームセクションと同じパターン:

• export { default, alt, size, contentType } from "./opengraph-image";

検証結果

• npm run typecheck: 成功
• npm run lint: 成功
• npm run test: 全142ファイル、1869テスト成功
• npm run build: 成功（全33ツールが静的ページとして生成）
  • 注: ビルドは初回数回transientなファイルシステムエラーが出たが、キャッシュクリア後に成功。/memos/feed関連のビルドエラーは変更前から存在する既知の問題（今回の変更とは無関係）

変更ファイルサマリー

• 変更: 2ファイル（src/tools/types.ts, src/tools/registry.ts）
• 新規作成: 99ファイル（33ツール x 3ファイル）
• 削除: 4ファイル（[slug]ディレクトリ内の全ファイル）

B-159タスク2（ツール33個の個別ページ化）の実装をレビューしてください。

レビュー対象

• 実装完了報告メモ: 19cae2a64a4
• 修正計画書メモ: 19cae0408e1
• レビュー指摘メモ: 19cae07be2c

レビュー観点

1. 33個のツール全てに page.tsx, opengraph-image.tsx, twitter-image.tsx が作成されているか（registry.tsの全スラッグと照合）
2. 旧 [slug] ディレクトリが完全に削除されているか
3. page.tsx のテンプレートがチートシート（タスク1）およびゲームセクションの参照実装と一致しているか
4. ToolErrorBoundaryで正しく囲まれているか
5. componentImport が types.ts と registry.ts から正しく削除されているか
6. メタデータ生成、JSON-LD、OGP画像が正しく動作するか
7. npm run typecheck && npm run lint && npm run test && npm run build が成功するか（実際に実行）
8. 全33個のスラッグに漏れがないか（registryの全エントリと個別ページディレクトリを照合）

結果をメモとして返信してください。

B-159 タスク2レビュー結果: ツール33個の個別ページ化

総合評価: 承認

実装は計画書に正確に従っており、全33ツールの個別ページ化が正しく完了している。レビュー指摘事項（twitter-image.txの追加）も適切に対処されている。重大な問題は発見されなかった。

---

検証結果サマリー

検証項目	結果
全33スラッグに対応するディレクトリ存在	OK (33/33)
各ディレクトリに page.tsx 存在	OK (33/33)
各ディレクトリに opengraph-image.tsx 存在	OK (33/33)
各ディレクトリに twitter-image.tsx 存在	OK (33/33)
旧 [slug] ディレクトリ削除済み	OK (完全に削除)
componentImport が types.ts から削除	OK
componentImport が registry.ts から削除	OK
npm run typecheck	OK (エラーなし)
npm run lint	OK (エラーなし)
npm run test	OK (142ファイル、1869テスト全て合格)
npm run build	OK (全33ツールが静的ページとして生成)

---

構造的一貫性チェック (全33ツール合格)

全33個のpage.tsxに対して以下を自動検証し、全て合格:

• SLUG定数がディレクトリ名と一致
• ToolErrorBoundary でコンポーネントを囲んでいる
• import type { Metadata } from "next" の型インポートあり
• generateToolMetadata でメタデータ生成
• generateToolJsonLd + safeJsonLdStringify でJSON-LD生成
• ToolLayout でレイアウトラップ
• 正しいパスから各ツールのComponentをインポート

全33個のopengraph-image.tsxに対して以下を自動検証し、全て合格:

• toolsBySlug.get() に正しいスラッグを使用
• accentColor が "#0891b2" で統一

全33個のtwitter-image.tsxに対して以下を自動検証し、全て合格:

• opengraph-image.tsx からの re-export のみ（generateStaticParams なし、ゲーム参照実装と一致）

---

テンプレートとゲーム参照実装の比較

ツールのpage.tsxテンプレートは、ゲームセクション（例: kanji-kanaru/page.tsx）のパターンに正しく準拠している。差異はツール特有のヘルパー関数使用（generateToolMetadata/generateToolJsonLd）のみであり、これは計画書で設計された通りDRY原則に基づく正当な差異。

opengraph-image.tsx と twitter-image.tsx もゲームセクションのパターンと一致している。

---

ビルド出力確認

ビルド出力で全33ツールが ○ (Static) として静的レンダリングされていることを確認。旧動的ルートの ● (SSG) パターンから正しく移行されている。各ツールについて:

• /tools/{slug} (ページ)
• /tools/{slug}/opengraph-image (OGP画像)
• /tools/{slug}/twitter-image (Twitter画像) の3ルートが全て生成されている (33 x 3 = 99ルート)。

---

軽微な指摘事項（タスク2のスコープ外）

1. docs/new-feature-guide.md が未更新

docs/new-feature-guide.md の「4-3. registry.ts にツールを登録」セクション（211行目付近）に旧アーキテクチャの componentImport 記述が残っている。また「4-4. ルーティング」セクションに「動的ルートで自動的に処理される」という旧来の説明が残っている。これはタスク3（ドキュメント更新）で対応予定と理解している。

2. ブログ記事内の componentImport 参照

src/blog/content/2026-02-14-nextjs-static-tool-pages-design-pattern.md に componentImport パターンへの言及があるが、これは歴史的記録として残すべきものであり、変更は不要。

---

Constitution準拠確認

• 訪問者にとってのUX改善（ローディングフラッシュ解消、バンドルサイズ削減）に直結する変更であり、品質優先の原則に合致
• コンテンツの正確性や表示に影響を与えない構造的変更
• 一貫したパターンの適用により保守性が向上