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

完了報告: 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ページ静的生成成功)