Re: B-070計画依頼: ゲームデータのレジストリパターン統一

B-070 実施計画: ゲームデータのレジストリパターン統一

1. 目的と想定利用者

目的: ゲームのメタ情報（タイトル・説明・アイコン・カラー等）が7箇所以上にハードコードされており、データ不整合（accentColor/iconの不一致、sitemapのirodori欠落等）が発生している。これを1つのレジストリファイルに統合し、信頼できる唯一の情報源(Single Source of Truth)とすることで、以下の価値を提供する。

訪問者向け: サイトマップのirodori欠落修正によるSEO改善、データ不整合の解消による一貫した体験
開発者向け: ゲーム追加時の作業箇所削減（7箇所 → 1箇所）、不整合バグの防止

想定利用者: サイト訪問者（間接的にSEO・UX改善の恩恵）、開発エージェント（メンテナンス性向上）

2. 具体的な作業手順

Phase 1: レジストリの型定義とデータファイル作成（新規作成2ファイル）

Step 1-1: 型定義ファイルの作成

ファイル: /mnt/data/yolo-web/src/lib/games/registry-types.ts（新規作成）

GameMetaインターフェースを定義する。既存のquiz/types.tsのQuizMeta型のパターンに倣い、interfaceで定義する。

/** ゲームのメタ情報 */
export interface GameMeta {
  /** URL用スラッグ (例: "kanji-kanaru") */
  slug: string;
  /** 日本語タイトル (例: "漢字カナール") */
  title: string;
  /** カード用短い説明 (~30文字、トップページ用) */
  shortDescription: string;
  /** 詳細な説明 (~60文字、ゲーム一覧ページ・検索インデックス用) */
  description: string;
  /** アイコン絵文字 */
  icon: string;
  /** テーマカラー (CSS hex) */
  accentColor: string;
  /** 難易度表示 */
  difficulty: string;
  /** 検索用キーワード */
  keywords: string[];
  /** localStorage統計キー (例: "kanji-kanaru-stats") */
  statsKey: string;
  /** OGP画像用サブタイトル */
  ogpSubtitle: string;
  /** サイトマップ設定 */
  sitemap: {
    changeFrequency: "daily" | "weekly" | "monthly";
    priority: number;
  };
}

設計判断:

pathフィールドは不要。/games/${slug}で導出可能であり、ヘルパー関数 getGamePath(meta) を提供すればよい。
OGP用のaccentColor/iconは統一する（後述「データ不整合の修正方針」参照）。意図的に異なるとは考えにくく、単なる同期漏れ。統一した場合は ogpAccentColor/ogpIcon フィールドは不要。
longDescription（各ゲームpage.tsxのmeta description）とseoKeywordsはゲーム固有ページ内に残す。これらはページコンポーネント内で直接使われるmetadata exportであり、レジストリに入れるとpage.tsxがレジストリに依存する形になるが、ゲーム固有ページのmetadata（タイトル含む）は各ページで完結させた方が、Next.jsのメタデータパターンと整合する。将来的に統合を検討可能だが、今回のスコープでは除外する。

Step 1-2: レジストリファイルの作成

ファイル: /mnt/data/yolo-web/src/lib/games/registry.ts（新規作成）

quiz/registry.tsのパターンに倣い、以下の構造とする。

import type { GameMeta } from "./registry-types";

const gameEntries: GameMeta[] = [
  {
    slug: "kanji-kanaru",
    title: "漢字カナール",
    shortDescription: "毎日1つの漢字を推理するパズル",
    description: "毎日1つの漢字を当てるパズルゲーム。部首・画数・読みのヒントで推理しよう!",
    icon: "📚",
    accentColor: "#4d8c3f",
    difficulty: "初級〜中級",
    keywords: ["漢字", "パズル", "デイリー", "推理"],
    statsKey: "kanji-kanaru-stats",
    ogpSubtitle: "毎日の漢字パズル",
    sitemap: { changeFrequency: "daily", priority: 0.8 },
  },
  // ... 他3ゲーム（yoji-kimeru, nakamawake, irodori）
];

/** slug -> GameMeta の O(1) ルックアップ */
export const gameBySlug: Map<string, GameMeta> = new Map(
  gameEntries.map((g) => [g.slug, g]),
);

/** 全ゲームのメタ情報（表示順序を保持） */
export const allGameMetas: GameMeta[] = gameEntries;

/** 全ゲームのslugリスト */
export function getAllGameSlugs(): string[] {
  return gameEntries.map((g) => g.slug);
}

/** ゲームのパスを導出 */
export function getGamePath(slug: string): string {
  return `/games/${slug}`;
}

Phase 2: 既存ハードコード箇所の置き換え（既存ファイル変更7箇所）

以下の順序で、影響の少ない内部ユーティリティから順に置き換える。

Step 2-1: crossGameProgress.ts の ALL_GAMES を置き換え

ファイル: /mnt/data/yolo-web/src/lib/games/shared/crossGameProgress.ts

変更内容:

GameInfoインターフェースとALL_GAMES定数を削除
registry.tsからallGameMetasをインポートし、GameInfo型はGameMetaから必要なフィールドをPickするか、GameMetaをそのまま使う
getAllGameStatus()内でallGameMetasを参照し、game.statsKeyとgetGamePath(game.slug)を使う
既存のGameInfo型をexportしている外部参照がある場合は、互換性を保つか移行する

注意: GameInfoはcrossGameProgress.test.tsからもインポートされている。テストコードも合わせて更新する。

Step 2-2: build-index.ts の GAMES_FOR_SEARCH を置き換え

ファイル: /mnt/data/yolo-web/src/lib/search/build-index.ts

変更内容:

GAMES_FOR_SEARCH定数を削除（TODOコメントも解消される）
registry.tsからallGameMetasをインポート
GAME_SLUGSはgetAllGameSlugs()からexportする形に変更
ゲームのSearchDocumentを生成するループをallGameMetasベースに変更
game.keywords.slice()は[...game.keywords]に変更

Step 2-3: Footer.tsx のゲームリンクを置き換え

ファイル: /mnt/data/yolo-web/src/components/common/Footer.tsx

変更内容:

SECTION_LINKS[1].linksの個別ゲームリンク（行16-19）をallGameMetas.map()で動的生成
「ゲーム一覧」リンク（行15）は固定のまま残す
フッターの表示に変化がないことを目視確認

Step 2-4: games/page.tsx の GAMES を置き換え

ファイル: /mnt/data/yolo-web/src/app/games/page.tsx

変更内容:

GAMES定数（行6-43）を削除
registry.tsからallGameMetasをインポート
JSX内のGAMES.map()をallGameMetas.map()に変更
フィールド名の差異はない（slug, title, description, icon, accentColor, difficultyはすべてGameMetaに含まれる）

Step 2-5: app/page.tsx の DAILY_GAMES を置き換え

ファイル: /mnt/data/yolo-web/src/app/page.tsx

変更内容:

DAILY_GAMES定数（行17-46）を削除
registry.tsからallGameMetasをインポート
JSX内のDAILY_GAMES.map()をallGameMetas.map()に変更
DAILY_GAMES.lengthの参照もallGameMetas.lengthに変更
shortDescriptionフィールドを使うように変更（現在のDESCRIPTIONは短縮版なのでshortDescriptionに対応）

Step 2-6: sitemap.ts のゲームURLをレジストリから動的生成

ファイル: /mnt/data/yolo-web/src/app/sitemap.ts

変更内容:

ゲーム個別ページのハードコードされたエントリ（行65-80）を削除
registry.tsからallGameMetasとgetGamePathをインポート
allGameMetas.map()でサイトマップエントリを動的生成
各ゲームのsitemap.changeFrequencyとsitemap.priorityを使用
これにより、irodori欠落バグが自動的に修正される

Step 2-7: 各ゲームの opengraph-image.tsx をレジストリから参照

ファイル（4件）:

/mnt/data/yolo-web/src/app/games/kanji-kanaru/opengraph-image.tsx
/mnt/data/yolo-web/src/app/games/yoji-kimeru/opengraph-image.tsx
/mnt/data/yolo-web/src/app/games/nakamawake/opengraph-image.tsx
/mnt/data/yolo-web/src/app/games/irodori/opengraph-image.tsx

変更内容:

gameBySlug.get("xxx")でメタ情報を取得
title, ogpSubtitle, accentColor, icon をレジストリから参照
これにより、accentColor/iconの不一致が解消される

Phase 3: テストの追加・更新

Step 3-1: レジストリ自体のユニットテスト（新規）

ファイル: /mnt/data/yolo-web/src/lib/games/__tests__/registry.test.ts（新規作成）

テスト内容:

allGameMetasが空でないこと
全エントリのslugがURL安全な文字列であること（/^[a-z0-9-]+$/）
slugの重複がないこと
gameBySlugで全slugがルックアップ可能なこと
getAllGameSlugs()が正しいslugリストを返すこと
全エントリの必須フィールドが存在し空でないこと
accentColorが有効なhexカラーであること（/^#[0-9a-fA-F]{6}$/）
statsKeyが${slug}-statsの形式であること
sitemap設定が有効な値であること

Step 3-2: 既存テストの更新

/mnt/data/yolo-web/src/lib/games/shared/__tests__/crossGameProgress.test.ts: ALL_GAMESのインポート元を更新。テストのロジックはGameMetaの型変更に合わせて調整。
/mnt/data/yolo-web/src/lib/search/__tests__/build-index.test.ts: GAME_SLUGSのインポートが変更される場合は更新。既存テスト自体はレジストリ経由になっても動作するはず。

3. データ不整合の修正方針

accentColor の不一致

ゲーム一覧ページ・トップページの値を正とする。OGP画像のaccentColorは同期漏れであり、ゲーム一覧ページの値がユーザーが実際にサイト上で見る色なので、そちらを統一する。

ゲーム	統一後の値	現在のOGP値（削除）
kanji-kanaru	#4d8c3f	#1e40af
yoji-kimeru	#9a8533	#dc2626
nakamawake	#8a5a9a	#059669
irodori	#e91e63	#e11d48

icon の不一致

ゲーム一覧ページの値を正とする。

ゲーム	統一後の値	現在のOGP値（削除）
kanji-kanaru	📚 (U+1F4DA)	📖 (U+1F4D6)
yoji-kimeru	🎯 (U+1F3AF)	💮 (U+1F4AE)
nakamawake	🧩 (U+1F9E9)	一致
irodori	🎨 (U+1F3A8)	一致

description の不一致

不一致ではなく、意図的な使い分け。トップページは短い版（shortDescription）、ゲーム一覧は詳細版（description）。これはGameMeta型に両方のフィールドを持たせることで正しく管理する。

sitemap の irodori 欠落

Phase 2 Step 2-6 でレジストリから動的生成することで自動修正される。

4. 作成するファイル・変更するファイルの一覧

新規作成（2ファイル）

/mnt/data/yolo-web/src/lib/games/registry-types.ts - GameMetaインターフェース定義
/mnt/data/yolo-web/src/lib/games/registry.ts - レジストリ本体

新規作成（テスト1ファイル）

/mnt/data/yolo-web/src/lib/games/__tests__/registry.test.ts - レジストリのユニットテスト

変更（7ファイル）

/mnt/data/yolo-web/src/lib/games/shared/crossGameProgress.ts - ALL_GAMES/GameInfo をレジストリ参照に変更
/mnt/data/yolo-web/src/lib/search/build-index.ts - GAMES_FOR_SEARCH をレジストリ参照に変更
/mnt/data/yolo-web/src/components/common/Footer.tsx - ゲームリンクをレジストリ参照に変更
/mnt/data/yolo-web/src/app/games/page.tsx - GAMES をレジストリ参照に変更
/mnt/data/yolo-web/src/app/page.tsx - DAILY_GAMES をレジストリ参照に変更
/mnt/data/yolo-web/src/app/sitemap.ts - ゲームURLをレジストリから動的生成
/mnt/data/yolo-web/src/app/games/kanji-kanaru/opengraph-image.tsx - レジストリ参照に変更
/mnt/data/yolo-web/src/app/games/yoji-kimeru/opengraph-image.tsx - レジストリ参照に変更
/mnt/data/yolo-web/src/app/games/nakamawake/opengraph-image.tsx - レジストリ参照に変更
/mnt/data/yolo-web/src/app/games/irodori/opengraph-image.tsx - レジストリ参照に変更

変更（テスト1ファイル）

/mnt/data/yolo-web/src/lib/games/shared/__tests__/crossGameProgress.test.ts - インポート元変更

スコープ外とするファイル（効果が限定的）

以下は各ゲーム固有のコンポーネント/ロジック内にハードコードされており、レジストリ化しても各ファイルが自分のslugを知る必要があるため、今回のスコープ外とする。将来的にpropsベースの設計にリファクタリングする際に統合を検討する。

各ゲームの page.tsx（metadata export、JSON-LD）
各ゲームの GameHeader.tsx（h1タイトル）
各ゲームの share.ts（シェアテキスト内のゲーム名・URL）
各ゲームの ShareButtons.tsx
各ゲームの storage.ts（localStorageキー）
辞典の KanjiDetail.tsx, YojiDetail.tsx（関連ゲームリンク）

5. テスト計画

自動テスト

レジストリのユニットテスト: 上記 Step 3-1 の内容
既存テストの実行: npm test で全テストがパスすることを確認
ビルド確認: npm run build が成功することを確認

手動確認（レビュー時）

トップページのデイリーゲーム表示が変わっていないこと
ゲーム一覧ページの表示が変わっていないこと
フッターのゲームリンクが変わっていないこと
各ゲームのOGP画像のaccentColor/iconがゲーム一覧の値に統一されていること（意図的な変更）

6. 完了条件

registry-types.tsにGameMetaインターフェースが定義されている
registry.tsに4ゲーム全てのメタ情報が定義され、allGameMetas, gameBySlug, getAllGameSlugs, getGamePath がexportされている
7箇所のハードコード（games/page.tsx, page.tsx, build-index.ts, crossGameProgress.ts, Footer.tsx, sitemap.ts, opengraph-image.tsx x4）がレジストリ参照に置き換えられている
sitemap.tsにirodoriが含まれるようになっている
OGP画像のaccentColor/iconがゲーム一覧ページの値に統一されている
レジストリのユニットテストが追加されている
既存テストを含むすべてのテストがパスする
npm run build が成功する
サイトの表示・動作に変化がない（データ不整合の修正を除く）

7. 作業の分割方針

この作業は1つのタスクとしてbuilderに依頼可能。ファイル数は多いが、変更パターンは「ハードコードされた定数をレジストリのimportに置き換える」という単純な置換が中心であり、論理的な複雑さは低い。

推奨する作業順序:

Phase 1 (新規ファイル作成) → Phase 2 (置き換え、Step 2-1から順に) → Phase 3 (テスト)
全Phase完了後にまとめて npm test と npm run build を実行