KAWAKAMI Lab.

同人サークルの紹介・作品展示と、日替わりの育成ウマ娘占い。Next.js 15 / React 19 / TypeScript。

開発・確認

npm ci
npm run dev

開発サーバーは http://localhost:3000 。Node.js 22 LTSを推奨。

npm run check  # CSV/JSON整合性、型、Lint、占いロジックの回帰テスト
npm run build
npm start

構成

• app/page.tsx、components/Site.tsx：トップ。760px以下はcomponents/lab/、761px以上はcomponents/pc/。
• components/shared/：PC・スマホ共通の部品（art.tsxの画像枠・ロゴ、Crystal.tsxの水晶球、PageViewer.tsxの試し読み）。
• lib/data.ts：作品、プロフィール、イベント、SNS。PC・スマホ共通。
• lib/use-site-effects.ts：ローディング・表示アニメーション・スクロール進捗・作品ビューア・背面スクロール固定。use-dialog-focus.ts：ダイアログ内のフォーカス管理。swipe.ts：スワイプ判定。
• app/styles/base.css：全ページ共通の色・フォント・要素リセット（ルートレイアウトで読み込み）。
• app/styles/desktop.css：PC、mobile-base.css：スマホ、mobile.css：mobile-base.cssを760px以下に限定して読み込む。
• app/globals.css：画面切り替え、画像枠、試し読み。crystal.css：共通の水晶球。
• app/fortune/：占い・共有結果・OG画像。トップとはグローバルCSSが異なるため、ページ間は通常のリンクで移動。
• lib/fortune-data.ts：抽選、共有コードの復元。fortune-store.ts：ブラウザ保存。
• public/images/：配信用画像。Images/：Git対象外の元画像。画像加工の自動スクリプトは未整備。

同じCSSファイルを、あるページでは@import … screen and (max-width: 760px)、別のページでは条件なしで読み込まないこと。ビルド時に1つにまとめられ、どちらかの条件が失われる（PC表示にスマホ用CSSが効く等）。

データ更新と共有URL互換性

character.csvのname / name_en、scenario.csvとitem.csvのname、運勢名CSVのcommentを読み込む。No.とcategoryは抽選に使わない。

npm run data:generate
npm run data:check

dev/build開始前にも生成する。開発中にCSVを編集したら再生成する（CSVの自動監視はない）。ルートのその他のCSVも運勢コメントとして処理するため、無関係なCSVは置かない。

共有コードはYYYYMMDD-rank-item-uma-scenario-message。数字は配列の添字。既存の行の削除・変更・並べ替え・途中挿入を避け、末尾へ追加する。 生成時に既存JSONとの前方一致を検査し、互換性を壊す更新を拒否する。生成JSONを手で書き換えて検査を回避しない。英語名の修正は可能。

古いコメント番号なしのコードと、現在は抽選しない「吉」も維持する。F_RANKSの既存順序も変更しない。訂正で既存候補の意味を変える必要がある場合は、先にデータのバージョン管理と旧コード復元の移行設計を行う。

作品の追加時は注目作品の参照とヒーローの年・仕様表示、統計も確認する。イベントは古い順、頒布実績は売り子参加を含まない固定値。

占いの保存

端末のローカル日付で1日1回、育成ウマ娘のみ5回まで再抽選する。同日中は同じ候補を繰り返さない。localStorageキーlab-fortune:v1と保存形式を維持する。

日付変更、復帰、別タブの保存変更を反映し、日付をまたいだ未完了抽選は取り消す。ブラウザ保存不可の場合はメモリ内で継続する。複数タブの変更は同期するが、localStorageにはトランザクションがないため、別タブの厳密に同時の書き込みをサーバーのようには排他制御しない。回数制限はアカウント単位の保証ではない。

公開設定

Vercel以外では環境変数SITE_URL=https://公開ドメインを設定する。VercelではVERCEL_PROJECT_PRODUCTION_URLを使用でき、SITE_URLが優先される。どちらも未指定なら開発用http://localhost:3000を使う。

画面のWebフォントと共有OG画像のフォント取得はGoogle Fontsに依存する。OG画像は有効なコードについて長期キャッシュするため、既存候補を変更しない。ネットワーク障害時のOG生成失敗は監視対象。

リリース前の手動確認

• PC/スマホで作品を開く、試し読み、矢印・スワイプ、Escape、Tabでの移動と閉じた後のフォーカス復帰。
• 320px〜760pxで再抽選ボタンが「育成ウマ娘」「再抽選」の2行になること。
• 初回抽選、再読み込み、5回再抽選、別タブ同期、午前0時をまたぐ操作。
• 有効な共有URL、不正URL、OG画像、日本語の長いシナリオ名。
• ナビゲーション、問い合わせ先（既存Xアカウント）、公開URLのメタデータ。