もじふる
上から降ってくるひらがな文字をタップして集め、制限時間内に単語を作ってスコアを競うWebゲーム。
バックエンドサーバーを持たず、React(フロントエンド)+ GitHub Pages(静的ホスティング)+ Firebase
Realtime Database(Anonymous Auth + 任意のGoogleログイン)のみで完結する構成のPoC実装です。
詳細な仕様は CLAUDE.md / mojifuru-design-doc.md を参照してください。
セットアップ
npm install
辞書データの生成
判定用辞書(public/dict.dawg)と単語一覧(public/wordlist.json)はリポジトリに含まれていません。
ビルド前に一度だけ生成してください(Mozc辞書・JMdictのダウンロードにネットワーク接続が必要です)。
npm run fetch-dict # scripts/.cache/ にソースデータをダウンロード(初回のみ)
npm run build-dict # public/dict.dawg, public/wordlist.json を生成
開発サーバー
npm run dev
テスト
npm run test
src/game/ 以下の純粋関数(文字の降下ロジック・DAWG判定・得点計算)を中心にユニットテストしています。
本番ビルド
npm run build
対戦モード(任意)
対戦モード・全体ランキングを有効にするには Firebase プロジェクトが必要です。
- Firebaseコンソールでプロジェクトを作成
- Authentication > Sign-in method で「匿名」と「Google」を有効化し、
Authentication > Settings > 承認済みドメイン に配信先のドメイン(
<user>.github.io、Cloudflare Pagesのドメインなど)を追加
(Googleログインはポップアップ方式。未追加のドメインでは auth/unauthorized-domain になる)
- Realtime Database を作成し、
firebase.rules.json をルールとしてデプロイ
(firebase deploy --only database、または Firebase CLI 未導入ならコンソールから手動で貼り付け)
.env.example を .env.local にコピーし、Firebaseの設定値を入力
Firebaseを設定しない場合でも「ひとりで遊ぶ」モードは通常どおり動作します。
Google Analytics(任意)
Firebaseプロジェクトで Google Analytics を有効化している場合、.env.local の
VITE_FIREBASE_MEASUREMENT_ID(Firebaseコンソール > プロジェクトの設定 > 全般 の測定ID、G-から始まる値)
を設定するとGA4計測が有効になります。GitHub Pagesへのデプロイ時は VITE_FIREBASE_MEASUREMENT_ID
をリポジトリのActions Secretsにも登録してください。未設定の場合はAnalyticsが無効化されるだけで、
他の機能には影響しません。react-router-dom によるSPA内遷移も page_view として個別に送信されます
(src/App.tsx の AnalyticsTracker)。
PWA対応
vite-plugin-pwa(generateSWモード)によりオフライン起動・ホーム画面追加に対応しています。
- アイコン一式(
public/pwa-192.png / pwa-512.png / apple-touch-icon.png / favicon-96.png)は
ブランドカラー(マゼンタ→オレンジ→アクアのグラデーション)+「も」の白抜き文字で、public/favicon.svg
と同じデザインコンセプト。maskableアイコン(Androidの各種形状マスク)のセーフゾーンに収まるよう調整済み
npm run build 時に dist/sw.js が生成され、JS/CSS/HTMLに加えて辞書データ(dict.dawg /
wordlist.json)も事前キャッシュされるため、初回読み込み後はオフラインでも起動・プレイできます- マニフェストの
start_url / scope はビルド時に vite.config.ts の base(/mojifuru/)へ
自動的に合わせて解決されます
GitHub Pagesへのデプロイ
vite.config.ts の base はリポジトリ名 mojifuru を前提に /mojifuru/ を設定しています。
npm run build で生成される dist/ を GitHub Pages(gh-pagesブランチ、または Actions
によるPagesデプロイ)で配信してください。
ディレクトリ構成
src/
├── game/ 文字の降下・DAWG判定・得点計算(純粋関数)
├── firebase/ Firebase設定・ルーム同期・ランキング・戦績・未登録語収集
├── hooks/ useGameSession(上記の純粋関数をReactに配線するフック)
├── context/ 辞書読み込み状態・プレイヤー名などのグローバル状態
└── components/ 各画面(タイトル/ゲーム/結果/一覧/ランキング/ライセンス/対戦ルーム)
scripts/
├── fetchDictSources.ts Mozc辞書・JMdictのダウンロード
├── buildDict.ts フィルタ・クロスチェック・DAWG変換
└── dawgBuilder.ts DAWG(Directed Acyclic Word Graph)構築アルゴリズム
