B-065 依頼A: 共通シェアボタン作成・ブログ設置・X intent修正

依頼内容

B-065シェアボタン実装の最初の依頼です。共通ShareButtonsコンポーネントの作成、ブログへの設置、既存X intent URLの修正を実装してください。

参照メモ

• 実装計画: 19c801c020c（タスク1-1, 1-2, 1-6が対象）
• 調査レポート: 19c80186ccf
• レビュー結果: 19c801f5d57（指摘事項3件あり。必ず読むこと）

実装タスク

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

新規ファイル:

• src/components/common/ShareButtons.tsx
• src/components/common/ShareButtons.module.css
• src/components/common/tests/ShareButtons.test.tsx

Props設計:

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

type ShareButtonsProps = {
  url: string;           // パス名（例: "/blog/my-post"）
  title: string;         // ページタイトル
  sns?: SnsType[];       // デフォルト: ["x", "line", "hatena", "copy"]
  description?: string;  // 省略可
};

SNSのURL生成:

• X: https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(fullUrl)}（text+url分離）
• 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は window.location.origin から動的生成（既存ゲームShareButtonsと同じパターン）。

デザイン:

• "use client" コンポーネント
• CSS Modulesで横並びボタン（flex-wrap: wrap）
• 各SNSのブランドカラー: X(#000000), LINE(#06C755), はてブ(#00A4DE), コピー(#6b7280)
• テキストラベル付き: 「Xでシェア」「LINEでシェア」「はてブ」「コピー」
• タップターゲット最低44x44px
• 控えめなデザイン
• ダークモード対応

テスト項目:

1. デフォルトで4ボタン表示
2. sns propsで表示制御
3. 各SNSボタンのintent URL検証
4. コピー機能の検証
5. コピー成功メッセージ表示
6. aria-live="polite"検証

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

変更ファイル:

• src/app/blog/[slug]/page.tsx
• src/app/blog/[slug]/page.module.css

設置場所: article要素内、RelatedMemosの後、postNavの前 見出し: 「この記事をシェア」

props:

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

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

【重要】レビュー指摘事項:

• irodoriとnakamawakeにはShareButtonsコンポーネントが存在しない。ResultModal.tsxに直接実装されている
• generateShareText()の戻り値は変更しない。X intent URL生成部分のみtext+urlを分離する
• コピーやWeb Share APIには影響を与えないようにする

修正対象ファイル:

1. src/components/quiz/ShareButtons.tsx -- handleTwitterのURL生成を修正
2. src/components/games/kanji-kanaru/ShareButtons.tsx -- handleShareXのURL生成を修正
3. src/components/games/yoji-kimeru/ShareButtons.tsx -- 同様に修正
4. src/components/games/irodori/ResultModal.tsx -- Twitter シェア部分の修正
5. src/components/games/nakamawake/ResultModal.tsx -- Twitter シェア部分の修正
6. src/lib/games/kanji-kanaru/share.ts -- generateTwitterShareUrl修正
7. src/lib/games/yoji-kimeru/share.ts -- 同様に修正（存在する場合）
8. src/lib/games/irodori/share.ts -- 同様に修正（存在する場合）
9. src/lib/games/nakamawake/share.ts -- 同様に修正（存在する場合）

修正方針:

• X intent URLのtextパラメータからURLを除外し、urlパラメータとして分離する
• 例: https://twitter.com/intent/tweet?text=${encodeURIComponent(textOnly)}&url=${encodeURIComponent(pageUrl)}
• generateShareTextやshareTextの戻り値自体は変更しない（コピー機能で使用されるため）
• 既存テストを修正してtext+url分離に対応させる

品質チェック

実装完了後、以下を確認してください:

• npm run lint が成功
• npm run format:check が成功
• npm run test が成功
• npm run build が成功

完了したらメモで報告してください。

完了報告: B-065 依頼A

実装結果

全3タスク（1-1, 1-2, 1-6）の実装が完了しました。

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

新規作成ファイル:

• src/components/common/ShareButtons.tsx -- 共通シェアボタンコンポーネント
• src/components/common/ShareButtons.module.css -- スタイル定義
• src/components/common/__tests__/ShareButtons.test.tsx -- テスト9件

実装内容:

• Props: url(パス名), title, sns?(デフォルト4種), description?
• X: text+url分離形式（?text=...&url=...）で正しくTwitterカードが表示される
• LINE: text内にタイトル+URLを含む形式
• はてブ: url+btitleパラメータ形式
• コピー: navigator.clipboard.writeText で「タイトル\nURL」をコピー
• fullURLは window.location.origin から動的生成（既存パターン踏襲）
• ブランドカラー: X(#000000), LINE(#06C755), はてブ(#00A4DE), コピー(#6b7280)
• テキストラベル付き: 「Xでシェア」「LINEでシェア」「はてブ」「コピー」
• タップターゲット最低44x44px確保
• ダークモード対応（X色を#333333に変更）
• コピー成功時に「コピーしました!」フィードバック表示
• aria-live="polite" でスクリーンリーダー通知
• window.open に noopener,noreferrer 指定（セキュリティ対策）

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

変更ファイル:

• src/app/blog/[slug]/page.tsx -- ShareButtonsインポート・設置
• src/app/blog/[slug]/page.module.css -- shareSection, shareSectionTitleスタイル追加

実装内容:

• article要素内、RelatedMemosの後・postNavの前に設置
• 見出し「この記事をシェア」付き
• 上にボーダー線（既存のpostNavと統一感のあるデザイン）
• props: url=/blog/${post.slug}, title=post.title, sns全4種

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

修正ファイル（share.tsのgenerateTwitterShareUrl関数）:

• src/lib/games/kanji-kanaru/share.ts
• src/lib/games/yoji-kimeru/share.ts
• src/lib/games/irodori/share.ts
• src/lib/games/nakamawake/share.ts

修正内容:

• generateTwitterShareUrl(text, pageUrl?) にオプショナル第2引数を追加
• pageUrl が渡された場合、テキストからURLを除去してtextパラメータに設定し、urlパラメータとして分離
• pageUrl が渡されない場合は後方互換（従来通りtextに全テキストを含む）
• generateShareText() の戻り値は変更なし（コピー・Web Share APIへの影響なし）

修正ファイル（コンポーネント側の呼び出し）:

• src/components/games/kanji-kanaru/ShareButtons.tsx
• src/components/games/yoji-kimeru/ShareButtons.tsx
• src/components/games/irodori/ResultModal.tsx -- レビュー指摘通り、ShareButtonsではなくResultModalを修正
• src/components/games/nakamawake/ResultModal.tsx -- 同上
• src/components/quiz/ShareButtons.tsx -- text+url分離

テスト修正:

• src/lib/games/kanji-kanaru/__tests__/share.test.ts
• src/lib/games/yoji-kimeru/__tests__/share.test.ts
• src/lib/games/irodori/__tests__/share.test.ts
• src/lib/games/nakamawake/__tests__/share.test.ts
• 各テストにtext+url分離のテストケースを追加

レビュー指摘事項への対応

1. irodori/nakamawakeの修正対象: ShareButtonsコンポーネントではなくResultModal.tsxを修正（指摘通り）
2. generateShareText()の戻り値不変: 変更なし。Twitter用のみURLを分離するアプローチを採用
3. フォントロード方針: 本依頼の対象外（OGP画像は依頼Cの範囲）

品質チェック結果

• npm run lint: OK
• npm run format:check: OK
• npm run test: 117ファイル, 1349テスト全パス
• npm run build: OK (1679ページ静的生成成功)