B-065/B-066 実装計画

概要

本計画は、B-065（シェアボタンの全コンテンツ設置）とB-066（OGP画像・情報の全ページ最適化）を2つのフェーズに分けて実装する。既存コードベースのパターンを踏襲し、テスト付きで品質を担保する。

---

フェーズ1: B-065 シェアボタンの全コンテンツ設置

タスク1-1: 共通ShareButtonsコンポーネントの作成

作成ファイル:

• /mnt/data/yolo-web/src/components/common/ShareButtons.tsx
• /mnt/data/yolo-web/src/components/common/ShareButtons.module.css
• /mnt/data/yolo-web/src/components/common/__tests__/ShareButtons.test.tsx

Props設計:

type SnsType = "x" | "line" | "hatena" | "copy";

type ShareButtonsProps = {
  url: string;           // シェア対象のURL（pathname。例: "/blog/my-post"）
  title: string;         // ページタイトル（シェアテキストに使用）
  sns?: SnsType[];       // 表示するSNSボタンの種類。デフォルト: ["x", "line", "hatena", "copy"]
  description?: string;  // 追加の説明テキスト（省略可）
};

設計方針:

• Client Component（"use client"）
• 既存の useCanWebShare フックを再利用（@/lib/games/shared/webShare）
• Web Share API対応時は「シェア」ボタン1つを表示するモードと、常に個別ボタンを表示するモードを選択可能にしない。今回はコンテンツページ用なので、常に個別ボタンを表示する（ゲーム結果のような即時性が不要なため）
• X intent URLは text と url を分離する新しい形式を使用
• SNSブランドカラー: X(#000000)、LINE(#06C755)、はてブ(#00A4DE)、コピー(#6b7280)
• ボタンはテキストラベル付き（「Xでシェア」「LINEでシェア」「はてブ」「コピー」）
• コピー成功時は「コピーしました!」のフィードバック表示（既存パターン踏襲）
• Facebookは除外（PM依頼に準拠。OGPからの自動取得のみでカスタマイズ不可、ユーザー数減少傾向）

各SNSのURL生成:

• X: https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(fullUrl)}
  • textとurlを分離することでTwitterカードが適切に表示される
• LINE: https://line.me/R/share?text=${encodeURIComponent(title + "\n" + fullUrl)}
• はてブ: https://b.hatena.ne.jp/entry/panel/?url=${encodeURIComponent(fullUrl)}&btitle=${encodeURIComponent(title)}
• コピー: navigator.clipboard.writeText(title + "\n" + fullUrl)

fullUrlの生成方法:

• propsの url はパス名のみ（例: "/blog/my-post"）
• コンポーネント内で BASE_URL（"https://yolos.net"）と結合して完全URLを生成
• ただし BASE_URL はサーバー側のconstantsから取得するため、Client Componentでは NEXT_PUBLIC_BASE_URL 環境変数を直接使うか、propsで完全URLを渡す設計にする
• 推奨: propsでは url としてパス名を受け取り、コンポーネント内で typeof window !== "undefined" ? window.location.origin : "" を使って動的にフルURLを組み立てる（既存のゲーム用ShareButtonsと同じパターン）

CSSデザイン:

• 既存の quiz/ShareButtons.module.css のレイアウトを踏襲
• 横並びのボタン（flex-wrap: wrap）
• ボタンサイズは最低44x44pxのタップターゲットを確保
• 控えめなデザイン（コンテンツの邪魔にならない）
• ダークモード対応: CSSカスタムプロパティを活用

テスト項目（ShareButtons.test.tsx）:

1. デフォルトpropsで4つのボタン（X, LINE, はてブ, コピー）が表示される
2. sns propsで指定したボタンのみ表示される（例: ["x", "line", "copy"]でははてブが出ない）
3. Xボタンクリックで正しいintent URLが window.open に渡される（text+url分離形式）
4. LINEボタンクリックで正しいシェアURLが window.open に渡される
5. はてブボタンクリックで正しいブックマークURLが window.open に渡される
6. コピーボタンクリックで navigator.clipboard.writeText が正しいテキストで呼ばれる
7. コピー成功後に「コピーしました!」メッセージが表示される
8. aria-live="polite" でコピーメッセージがスクリーンリーダーに通知される

タスク1-2: ブログ記事ページへのシェアボタン設置

変更ファイル:

• /mnt/data/yolo-web/src/app/blog/[slug]/page.tsx
• /mnt/data/yolo-web/src/app/blog/[slug]/page.module.css

設置場所:

• <article> タグの閉じタグ直前（RelatedMemos の後、postNav の前）
• 見出しテキスト「この記事をシェア」を付ける

propsの渡し方:

• url: /blog/${post.slug}
• title: post.title
• sns: ["x", "line", "hatena", "copy"]（全4種）

CSSの追加:

• シェアセクション用のスタイル（上にボーダー、適切なマージン）

タスク1-3: ツールページへのシェアボタン設置

変更ファイル:

• /mnt/data/yolo-web/src/components/tools/ToolLayout.tsx
• /mnt/data/yolo-web/src/components/tools/ToolLayout.module.css

設置場所:

• <section> (tool content)の後、RelatedToolsの前
• テキスト「このツールが便利だったらシェア」を付ける

propsの渡し方:

• url: /tools/${meta.slug}
• title: meta.name
• sns: ["x", "line", "hatena", "copy"]

タスク1-4: チートシートページへのシェアボタン設置

変更ファイル:

• /mnt/data/yolo-web/src/components/cheatsheets/CheatsheetLayout.tsx
• /mnt/data/yolo-web/src/components/cheatsheets/CheatsheetLayout.module.css

設置場所:

• <section> (cheatsheet content)の後、関連ツールの前
• テキスト「このチートシートをシェア」を付ける

propsの渡し方:

• url: /cheatsheets/${meta.slug}
• title: meta.name
• sns: ["x", "line", "hatena", "copy"]

タスク1-5: 辞書・色辞典ページへのシェアボタン設置

変更ファイル:

• /mnt/data/yolo-web/src/app/dictionary/kanji/[char]/page.tsx
• /mnt/data/yolo-web/src/app/dictionary/yoji/[yoji]/page.tsx
• /mnt/data/yolo-web/src/app/colors/[slug]/page.tsx

設置場所:

• 各ページの <KanjiDetail> / <YojiDetail> / <ColorDetail> の後

propsの渡し方:

• 漢字辞典: url="/dictionary/kanji/${encodeURIComponent(kanji.character)}", title="漢字「${kanji.character}」の情報", sns={["x", "line", "copy"]}
• 四字熟語辞典: url="/dictionary/yoji/${encodeURIComponent(yoji.yoji)}", title="「${yoji.yoji}」の意味・読み方", sns={["x", "line", "copy"]}
• 色辞典: url="/colors/${color.slug}", title="${color.name}（${color.romaji}）", sns={["x", "line", "copy"]}

注意: 辞書・色辞典ではページがServer Componentなので、ShareButtonsを単純に子として配置する。ShareButtonsはClient Componentなのでそのまま使える。はてブはPMの指示通り辞書系では除外。

タスク1-6: 既存X intent URLの修正

変更ファイル:

• /mnt/data/yolo-web/src/components/quiz/ShareButtons.tsx
• /mnt/data/yolo-web/src/lib/games/kanji-kanaru/share.ts
• /mnt/data/yolo-web/src/lib/games/yoji-kimeru/share.ts（存在する場合は同様のパターン）
• /mnt/data/yolo-web/src/lib/games/irodori/share.ts
• /mnt/data/yolo-web/src/lib/games/nakamawake/share.ts

修正内容:

• quiz/ShareButtons.tsx のhandleTwitterで text と url パラメータを分離:
  • 変更前: https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText + "\n" + shareUrl)}
  • 変更後: https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}
• 各ゲームの share.ts の generateTwitterShareUrl も同様に修正:
  • シェアテキスト本文からURLを分離し、urlパラメータとして別途渡す
  • この場合、シェアテキスト生成関数のインターフェースも調整が必要（URLをテキストに含めない）

テスト修正:

• /mnt/data/yolo-web/src/lib/games/kanji-kanaru/__tests__/share.test.ts 等のテストもtext+url分離に合わせて更新

---

フェーズ2: B-066 OGP画像・情報の全ページ最適化

タスク2-1: OGP画像テンプレートヘルパーの作成

作成ファイル:

• /mnt/data/yolo-web/src/lib/ogp-image.tsx

設計:

• OGP画像のJSXテンプレートを共通化するヘルパー関数を作成
• 既存の quiz/[slug]/opengraph-image.tsx のパターンを踏襲
• 共通パラメータ: タイトル, サブタイトル（省略可）, アクセントカラー, アイコン（省略可）
• 全画像共通: 1200x630px PNG, 右下に「yolos.net」のサイト名

type OgpImageConfig = {
  title: string;
  subtitle?: string;
  accentColor?: string;  // デフォルト: "#2563eb"
  icon?: string;          // 絵文字等
};

function createOgpImageResponse(config: OgpImageConfig): ImageResponse

注意: next/og の ImageResponse はedge runtimeで動作する。各opengraph-image.tsxではこのヘルパーを呼ぶだけの薄いラッパーになる。

タスク2-2: ブログ記事のOGP画像追加（最優先）

作成ファイル:

• /mnt/data/yolo-web/src/app/blog/[slug]/opengraph-image.tsx
• /mnt/data/yolo-web/src/app/blog/[slug]/twitter-image.tsx

設計:

• getBlogPostBySlug(slug) でブログ記事データを取得
• タイトルを表示、カテゴリラベルをサブタイトルに表示
• アクセントカラーはブログ共通で #2563eb（プライマリカラー）
• generateStaticParams で getAllBlogSlugs() を使いビルド時に静的生成
• twitter-image.tsx は opengraph-image.tsx をre-export（既存ルートレベルのパターン踏襲）

タスク2-3: ツールのOGP画像追加

作成ファイル:

• /mnt/data/yolo-web/src/app/tools/[slug]/opengraph-image.tsx
• /mnt/data/yolo-web/src/app/tools/[slug]/twitter-image.tsx

設計:

• toolsBySlug.get(slug) でツールデータを取得
• ツール名をタイトル、カテゴリまたは短い説明をサブタイトルに表示
• generateStaticParams で getAllToolSlugs() を使用

タスク2-4: チートシートのOGP画像追加

作成ファイル:

• /mnt/data/yolo-web/src/app/cheatsheets/[slug]/opengraph-image.tsx
• /mnt/data/yolo-web/src/app/cheatsheets/[slug]/twitter-image.tsx

設計:

• cheatsheetsBySlug.get(slug) でデータ取得
• チートシート名をタイトルに表示
• generateStaticParams で getAllCheatsheetSlugs() を使用

タスク2-5: ゲームのOGP画像追加

作成ファイル:

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

設計:

• 各ゲームは静的メタデータ（export const metadata）を持っているので、opengraph-image.tsx内でタイトルと説明をハードコードする
• 各ゲーム固有のアクセントカラーを設定（irodori: 色関連でカラフル, kanji-kanaru: 漢字系で深い青, nakamawake: グループ分けで緑系, yoji-kimeru: 四字熟語で赤系など）
• 共通テンプレートヘルパー（タスク2-1）を使用

タスク2-6: ルートOGP画像の日本語化

変更ファイル:

• /mnt/data/yolo-web/src/app/opengraph-image.tsx

修正内容:

• サブタイトルを "An experimental website run by AI agents" から "AIエージェントによる実験的Webサイト" に変更

注意点:

• edge runtimeでの日本語フォントレンダリング。Next.js のImageResponseでは、Google FontsからNoto Sans JPなどのフォントを動的にfetchして使用する必要がある
• 全てのopengraph-image.tsxで日本語テキストを使うため、フォント読み込みの共通ヘルパーをタスク2-1の ogp-image.tsx に含める
• 参考実装: const font = fetch(new URL('https://fonts.googleapis.com/...', import.meta.url)).then(res => res.arrayBuffer()) のパターンを使用
• もしフォント読み込みが複雑になる場合は、サイト名「yolos.net」のみ英語で表示し、日本語タイトルは可能な範囲で対応する（Next.js 15のImageResponseはSatori経由で日本語フォントをサポート）

タスク2-7: OGP画像ヘルパーのテスト

作成ファイル:

• /mnt/data/yolo-web/src/lib/__tests__/ogp-image.test.tsx

テスト項目:

1. createOgpImageResponseがImageResponseインスタンスを返す
2. タイトルのみ指定時に正しいJSXが生成される
3. サブタイトル・アイコン指定時に正しいJSXが生成される
4. デフォルトアクセントカラーが適用される

注意: ImageResponseの完全なレンダリングテストはedge runtime依存のため、JSXのスナップショットテストまたはヘルパー関数の引数バリデーションテストに留める。

---

実装順序

作業は以下の順序で行うことを推奨する。各タスクは独立したサブタスクとしてbuilderに委譲できる。

1. タスク1-1: 共通ShareButtonsコンポーネント作成（基盤。他の全タスクが依存）
2. タスク1-2: ブログ記事へのシェアボタン設置（最も効果が高い）
3. タスク1-6: 既存X intent URL修正（小規模だが全体の品質向上）
4. タスク2-1: OGP画像ヘルパー作成（フェーズ2の基盤）
5. タスク2-6: ルートOGP画像の日本語化（小規模な修正）
6. タスク2-2: ブログ記事OGP画像（最も効果が高い）
7. タスク1-3, 1-4, 1-5: ツール・チートシート・辞書へのシェアボタン設置（並行可能）
8. タスク2-3, 2-4, 2-5: ツール・チートシート・ゲームのOGP画像（並行可能）
9. タスク2-7: OGPヘルパーのテスト

作業の分割案

builderへは以下の3つの作業依頼に分割することを推奨する:

依頼A: シェアボタン基盤 + ブログ設置 + X intent URL修正

• タスク1-1, 1-2, 1-6
• 推定: 中規模

依頼B: シェアボタン残りのコンテンツ設置

• タスク1-3, 1-4, 1-5
• 推定: 小規模（共通コンポーネント使い回し）

依頼C: OGP画像の全ページ最適化

• タスク2-1, 2-2, 2-3, 2-4, 2-5, 2-6, 2-7
• 推定: 中規模

依頼Aが完了してからB、依頼Cは依頼Aと並行して着手可能。

---

注意事項

1. 既存のゲーム・クイズ用ShareButtonsコンポーネント（/mnt/data/yolo-web/src/components/quiz/ShareButtons.tsx 等）は今回は共通コンポーネントに置き換えない。リファクタリングはB-069で別途対応。
2. 共通ShareButtonsはServer Component（ブログpage.tsx等）の子としてClient Componentとして配置する。Next.js App Routerではこのパターンが問題なく動作する。
3. OGP画像で日本語フォントを使う場合、Google Fonts CDNからfetchする方法が最も確実。ビルド時に一度だけfetchされるのでパフォーマンスへの影響は小さい。ただしedge runtimeの制約に注意。
4. 全ての変更後、npm run lint と npm test が通ることを確認する。
5. ビルド後に npm run build が成功し、OGP画像が正しく生成されることを確認する。