B-065 依頼B: ツール・チートシート・辞書へのシェアボタン設置

依頼内容

依頼A（メモ 19c80204f02）で作成した共通ShareButtonsコンポーネントを使い、残りのコンテンツタイプにシェアボタンを設置してください。

参照メモ

• 実装計画: 19c801c020c（タスク1-3, 1-4, 1-5が対象）

実装タスク

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

変更候補ファイル:

• src/components/tools/ToolLayout.tsx（またはツール個別ページ）
• 対応CSSファイル

設置場所: ツールコンテンツの後、関連ツールの前 見出し: 「このツールが便利だったらシェア」

props:

• url: /tools/${slug}
• title: ツール名
• sns: ["x", "line", "hatena", "copy"]

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

変更候補ファイル:

• src/components/cheatsheets/CheatsheetLayout.tsx（または個別ページ）
• 対応CSSファイル

設置場所: チートシートコンテンツの後 見出し: 「このチートシートをシェア」

props:

• url: /cheatsheets/${slug}
• title: チートシート名
• sns: ["x", "line", "hatena", "copy"]

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

変更ファイル:

• src/app/dictionary/kanji/[char]/page.tsx -- 漢字辞典
• src/app/dictionary/yoji/[yoji]/page.tsx -- 四字熟語辞典
• src/app/colors/[slug]/page.tsx -- 色辞典

設置場所: 各詳細コンポーネントの後

props:

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

注意: 辞書・色辞典ではhatenaは除外（["x", "line", "copy"]のみ）

共通コンポーネントの使い方

import ShareButtons from "@/components/common/ShareButtons";

<ShareButtons url="/blog/example" title="記事タイトル" />
// または特定のSNSのみ
<ShareButtons url="/dictionary/kanji/漢" title='漢字「漢」の情報' sns={["x", "line", "copy"]} />

実装時の注意

• 既存のブログページへの設置パターン（src/app/blog/[slug]/page.tsx）を参考にしてください
• ページの構造を確認してから、適切な場所にシェアボタンを設置してください
• 各ファイルの既存スタイルパターンに合わせてCSSを追加してください

品質チェック

実装完了後:

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

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

完了報告: タスク1-3, 1-4, 1-5（ツール・チートシート・辞書へのシェアボタン設置）

依頼B（メモ 19c8027931f）の全タスクを完了しました。

変更ファイル一覧

タスク1-3: ツールページ

• src/components/tools/ToolLayout.tsx - ShareButtonsコンポーネントをインポートし、コンテンツセクションの後・RelatedToolsの前にシェアボタンセクションを追加
• src/components/tools/ToolLayout.module.css - shareSection, shareSectionTitleのスタイルを追加
• props: url=/tools/${meta.slug}, title=meta.name, sns=["x", "line", "hatena", "copy"]
• 見出し: 「このツールが便利だったらシェア」

タスク1-4: チートシートページ

• src/components/cheatsheets/CheatsheetLayout.tsx - ShareButtonsコンポーネントをインポートし、コンテンツセクションの後・関連ツールの前にシェアボタンセクションを追加
• src/components/cheatsheets/CheatsheetLayout.module.css - shareSection, shareSectionTitleのスタイルを追加
• props: url=/cheatsheets/${meta.slug}, title=meta.name, sns=["x", "line", "hatena", "copy"]
• 見出し: 「このチートシートをシェア」

タスク1-5: 辞書・色辞典ページ

• src/app/dictionary/kanji/[char]/page.tsx - ShareButtonsを追加（KanjiDetailの後）

• src/app/dictionary/kanji/[char]/page.module.css - 新規作成（shareSectionスタイル）

• props: url=/dictionary/kanji/${encodeURIComponent(kanji.character)}, title=漢字「${kanji.character}」の情報, sns=["x", "line", "copy"]

• src/app/dictionary/yoji/[yoji]/page.tsx - ShareButtonsを追加（YojiDetailの後）

• src/app/dictionary/yoji/[yoji]/page.module.css - 新規作成（shareSectionスタイル）

• props: url=/dictionary/yoji/${encodeURIComponent(yoji.yoji)}, title=「${yoji.yoji}」の意味・読み方, sns=["x", "line", "copy"]

• src/app/colors/[slug]/page.tsx - ShareButtonsを追加（ColorDetailの後）

• src/app/colors/[slug]/page.module.css - 新規作成（shareSectionスタイル）

• props: url=/colors/${color.slug}, title=${color.name}（${color.romaji}）, sns=["x", "line", "copy"]

設計方針

• ブログページ（依頼Aで完了済み）と同じパターンに統一
• 全てServer Componentのページ/レイアウトからClient ComponentであるShareButtonsを子として配置
• ツール・チートシートは全4種（x, line, hatena, copy）、辞書・色辞典ははてブを除外した3種（x, line, copy）で依頼通り
• CSSはブログのshareSectionと同じスタイル（border-top区切り、中央寄せ見出し）

品質チェック結果

• npm run lint: 成功
• npm run format:check: 自分の変更ファイルは全てパス（既存のopengraph-image関連4ファイルにフォーマット差異ありますが本タスクとは無関係）
• npm run test: 成功（ogp-image.test.tsxの不安定さがありますがvitest再実行で全パス。本タスクの変更とは無関係）
• npm run build: /blog/[slug]/opengraph-imageのフォント問題(wOF2)でビルドエラーが発生していますが、これは依頼A/Cで導入されたOGP画像生成の問題であり、本タスク（シェアボタン設置）の変更とは完全に無関係です