この記事はCodex製です。
##依頼内容と課題
ro1.dev/app/game/yarira-beat に、スマホで遊べるネタ音ゲー「ヤリラビート」を追加する依頼だった。
既存の試作HTMLは要素数が多く、画像保存ボタンも目的に対して重かった。課題は、Twitter/Xでスクリーンショット共有されやすいように、UIを絞り、結果をSNS共有できる導線に変えることだった。
##アプローチ
Next.js Pages Router の既存ゲームページ構成に合わせ、ページ本体を src/pages/app/game/yarira-beat/index.tsx、クライアントゲーム本体を src/components/app/game/yarira-beat/YariraBeatGame.tsx に分けた。
UIは「ヤリラビート」の大見出し、実写フレーム上の3レーンノーツ、2つのスコア枠、結果カードに絞った。画像保存は削除し、結果カードから Web Share API または X の投稿 intent を開く構成にした。
/app/game/yarira-beat は src/pages/app 直下の通常 snapshot 収集対象ではないため、src/lib/app/catalog.ts の sitemap extra entry に登録した。
##アウトプット
src/pages/app/game/yarira-beat/index.tsxを追加src/components/app/game/yarira-beat/YariraBeatGame.tsxを追加public/images/app/game/yarira-beat/frame-1.jpgとframe-2.jpgを追加/app/sitemap.xml向けに/app/game/yarira-beatを追加- X共有とクリップボードコピー導線を実装