ドラクエのように、ゲームを楽しみながら英語を学ぶ。
中学生向けの、絵単語 × ボス戦 × 毎日続くしくみの英単語学習アプリ（英検5級・4級対応）
画像を見て、独自のソフトキーボードでつづりを入力。単語をマスターするとボスが現れ、覚えた単語で攻撃して倒します。
🎮 ゲームとして続く
- ボス戦 — 単語をマスターした数に応じてボスが出現。日本語の意味に合う英単語を選んで攻撃する。全語マスターで魔王戦（＝その級をコンプ）
- ストーリー — 章仕立ての会話で「ことばを奪われた世界」を旅する。案内役の「せんせい」つき
- XP・レベル（20段階）・バッジ（24種）・連続学習ストリーク・学習カレンダー — 報酬はこれだけに絞り、学習と関係ない収集要素は持たない方針
📚 ちゃんと身につく
- 習得のはしご — 別々の日に正解を重ねるごとに伏字が増え、最後は全文タイピング。間違えたら登り直し（分散学習 × 段階的な難易度）
- 忘れかけの復習 — 一度マスターした単語も、間があくと復習に出る
- 9種類のクイズ形式 — つづり穴埋め／例文穴埋め／並べ替え（ドラッグで入れ替え）／4択／リスニング／会話（応答選択・読む版）／文法4択（熟語つき）／ミックス／本番形式の模試（大問別の正答率と合格ライン判定）
- 独自ソフトキーボード — OSのキーボードを開かないので、スマホでも画面が崩れずテンポよく入力できる
📱 スマホで使いやすい
- モバイルファースト（幅375px基準、320pxでも崩れない）、ホーム画面に追加できる PWA
- LINE ログイン、フレンドランキング、LINE での学習リマインド（ログインなしのゲストでも学習できる）
- アプリ内の「ふぐあいを ほうこく」から GitHub Issue を直接起票
 ホーム 連続学習・今日の目標・復習 |
 つづりクイズ 画像を見て穴埋め |
 正解シート 発音・例文つき |
 並べ替え 意味に合う英文を作る |
 会話クイズ 場面に合う応答を選ぶ |
 ボス登場 マスターした語数で出現 |
 ボス戦 正解の英単語で攻撃 |
 ストーリー せんせいの語り |
 カレンダー 学習日にスタンプ |
 バッジ 連続日数・マスター数など |
スクリーンショットに写っている画像は、生成AI（Gemini）で作成した学習素材です。素材そのものはこのリポジトリに含まれません（アセットについて）。
| 級 | 単語 | 会話 | 文法4択（熟語つき） |
|---|---|---|---|
| 英検5級 | 400語 | 20本 | 60問 |
| 英検4級 | 200語 | 20本 | 60問 |
3級〜1級は級の定義（lib/curriculum.ts）のみで、データは未整備です。単語データの規約（ID の割り当て・例文の書き方など）は CLAUDE.md にまとめ、lib/words.test.ts が自動で検証します。
flowchart LR
U["📱 ブラウザ / PWA"] -->|HTTPS| N["Next.js<br/>(App Router · Vercel)"]
N -->|Prisma| DB[("PostgreSQL")]
N -->|ログイン・通知| L["LINE"]
N -->|"/api/*-assets<br/>（サーバー側で代理取得）"| A["アセットサーバ<br/>backend-php"]
U -. "画像・音声を直接取得" .-> A
G["Gemini Canvas<br/>アセット生成ツール"] -->|"POST + X-Upload-Key"| A
- フロント/ロジック: Next.js（App Router）。UI はインラインスタイルで統一し、計算ロジックは
lib/の純関数に切り出して vitest で検証 - 進捗の保存: ログイン時は DB、ゲスト時はブラウザの localStorage が正
- アセットサーバ: 画像・音声を配信する素朴な PHP の REST API（
backend-php/）。書き込みは共有キー認証。未設定でもアプリは動く（画像・音声なし、合成音声・テキストにフォールバック） - アセット生成: Gemini Canvas（AI Studio Build）上で動かす React ツール（
canvas/）で、画像・単語音声・例文音声を生成してアップロード
| 領域 | 使っているもの |
|---|---|
| フロントエンド | Next.js 16（App Router）· React 19 · TypeScript |
| DB / ORM | PostgreSQL · Prisma 6 |
| 認証 | Auth.js（NextAuth v5）· LINE ログイン |
| アセットサーバ | PHP 8.1+（依存ライブラリなし） |
| アセット生成 | Gemini（画像生成・TTS）· Gemini Canvas / AI Studio Build |
| テスト | Vitest · Playwright（E2E）· PHP 製の HTTP テスト |
| CI / ホスティング | GitHub Actions · Vercel |
必要なもの: Node.js 22 以上。
git clone https://github.com/GitSumito/wordquest-oss.git
cd wordquest-oss
npm install
cp .env.example .env.local # 下の「最小構成」を参考に値を入れる
npm run dev # http://localhost:3000ログインなしで学習する分には、DB もアセットサーバも LINE も要りません（進捗はブラウザの localStorage に保存）。ただし起動時に次の環境変数の「存在」だけは必要なので、ダミー値で構いません。
POSTGRES_PRISMA_URL="postgresql://user:pass@localhost:5432/wordquest"
POSTGRES_URL_NON_POOLING="postgresql://user:pass@localhost:5432/wordquest"
AUTH_SECRET="$(openssl rand -base64 32)"
LINE_CLIENT_ID="dummy"
LINE_CLIENT_SECRET="dummy"| やりたいこと | 必要な設定 |
|---|---|
| ログイン・ランキング・進捗の保存 | 実際の PostgreSQL を用意して POSTGRES_* に設定し、npx prisma db push でテーブルを作成。LINE ログインのチャネルを作って LINE_CLIENT_ID / LINE_CLIENT_SECRET を設定 |
| 画像・音声を表示する | backend-php/ を PHP が動くサーバにデプロイし、WORDQUEST_ASSET_BASE_URL にそのベース URL を設定（詳細） |
| LINE の学習リマインド | LINE_MESSAGING_API_TOKEN と CRON_SECRET を設定（cron エンドポイントは app/api/cron/） |
| アプリ内バグ報告 → Issue 起票 | GITHUB_REPORT_TOKEN（Issues: write の fine-grained PAT）と GITHUB_REPORT_REPO（owner/name）の両方。報告に端末情報が入るので、起票先は private リポジトリを推奨 |
| LINE 通知・共有リンクのURL | 通常は不要（Vercel の本番ドメインを自動で使う）。独自ドメインなら APP_URL（通知）と NEXT_PUBLIC_APP_URL（共有リンク）を設定 |
環境変数の一覧は .env.example にあります。
このリポジトリには画像・音声の素材は含まれません。各自で用意する場合の流れは次のとおりです。
backend-php/を任意のサーバにデプロイし、共有キー（アップロードキー）を発行するcanvas/のジェネレーター（*.jsx）を Gemini Canvas に貼り、接続設定に Upload API ベース URL と アップロードキー を入力する- 単語・会話・ボス・せんせい・例文トークン音声を生成 → 自動でサーバにアップロードされる
- Next.js 側の
WORDQUEST_ASSET_BASE_URLを設定する
アセットが無い語は、つづり穴埋めの出題から自動で外れます（文法・並べ替えなど、アセット不要のクイズは影響を受けません）。
npm test # ユニット（Vitest）
npm run test:e2e # E2E（Playwright。iPhone 375px と最狭 320px の 2 ビューポート）
php backend-php/tests/run-tests.php # アセットサーバ API（一時ディレクトリで実 HTTP を叩く）- ユニット: 単語データの規約、習得のはしご、ボス出現の計算、模試の採点、ドラッグ入れ替えなど、
lib/の純関数を検証 - E2E: モバイルでの横はみ出し、ソフトキーボード入力、ボス戦の通し、ストーリー、模試などを実際にブラウザ操作で検証（ゲスト + アセット stub で完結し、DB は不要）
- PHP: 書き込みの認証（401 / 503）、CORS の許可判定、ファイルの保存・置換を検証
- CI（
.github/workflows/ci.yml）が push / PR ごとに vitest・ビルド・E2E を実行
.
├── app/ 画面と API ルート（App Router）
│ ├── quiz/ boss/ mypage/ calendar/ badges/ ranking/ review/ words/
│ └── api/ 進捗・ランキング・アセット代理取得・cron・バグ報告
├── components/ UI コンポーネント（quiz/ story/ charts/ ほか）
├── lib/ ロジックとデータ（純関数中心。*.test.ts が隣に並ぶ）
│ ├── words/ conversations/ grammarQuiz/ 級ごとの教材データ
│ └── mastery.ts bosses.ts mockExam.ts story.ts badges.ts …
├── prisma/ DB スキーマ
├── e2e/ Playwright のスペック
├── canvas/ アセット生成ツール（Gemini Canvas 用の React）
├── backend-php/ アセットサーバ（画像・音声の受け口と一覧 API）
└── docs/ 設計資料とスクリーンショット
CLAUDE.md: 開発ルールと仕様の要点（AI コーディングエージェント向けの指示を兼ねる）docs/eiken-pass-design.md: 英検5級・4級「合格」ロードマップ設計書（試験構成と機能のギャップ分析）docs/db_design_v1.md: DB テーブル設計backend-php/README.md: アセットサーバの API 仕様・デプロイ・認証canvas/README.md: アセット生成ツールの使い方
MIT。これはコードのライセンスです。単語データ・教材の内容や、生成した画像・音声（スクリーンショットに写っているものを含む）には及びません。