HistoryChain - 歴史つながりパズル学習アプリ

## 1. アプリの目的・ターゲットユーザー
歴史上の出来事・人物・発明・事件を「時系列チェーン」でつなぐパズル形式で学ぶ歴史学習Webアプリ。「年号の暗記が苦手・歴史の流れがつかめない」中高生〜社会人を対象に、出来事の因果関係と順序感覚を楽しく身につける。

---

## 2. 主要機能
- **チェーンパズルモード**: バラバラに並んだ5〜8枚の歴史イベントカードを正しい時系列に並べ替えるドラッグ&ドロップパズル。正解後に各イベントの簡易解説と「なぜこの順番なのか（因果コメント）」を表示する
- **テーマ別チャプター**: 「日本史（古代〜現代）」「世界史（西洋・東洋）」「科学技術の歴史」「文化・芸術の歴史」「戦争と平和」の5テーマ×各10チャプター（計50ステージ）を内製データで収録
- **年代感覚トレーニング**: 1枚のイベントカードを提示し、タイムライン上の正しい位置へドラッグして置く「年代当て」ミニゲーム。外れた距離（年数）が少ないほど高スコア
- **コレクション図鑑**: クリアしたステージの歴史イベントがカード図鑑に蓄積される。カードにはイベント名・年・地域・人物・ひとこと解説が記載。進捗率をパーセントで表示
- **デイリーチャレンジ**: 毎日1問、テーマをまたいだランダム5枚チェーンパズルを出題。LocalStorageで連続挑戦日数（ストリーク）を記録し、モチベーションを維持
- **スコアランキング**: デイリーチャレンジのスコア（正解率×タイム補正）をMySQLに保存し、週次グローバルランキングを表示。ニックネーム登録のみで参加可能

---

## 3. 画面構成
- **トップページ**: テーマ選択グリッド（5テーマのアイコンカード）＋デイリーチャレンジへの導線バナー＋今週のランキングTOP5ウィジェット
- **チャプター選択画面**: 選択テーマのチャプター一覧（10個）をカード形式で表示。クリア済みはチェックマーク付きで表示。未クリアは薄暗くロック表示
- **パズルプレイ画面**: 上部にテーマ・チャプター名、中央にシャッフルされたイベントカード列（横スクロール対応）、下部に「並べ替え済みスロット」エリア。カードをドラッグしてスロットに入れる。確定ボタン押下で正誤判定。不正解の場合は誤りのカード位置をハイライト表示し3回まで再挑戦可能
- **結果・解説画面**: 正解チェーンを時系列で表示、各カード間に「↓ なぜ？」の因果コメントを表示。「図鑑に追加」アニメーション演出後、次のステージへ進むボタン
- **年代当てミニゲーム画面**: 画面上部に水平タイムライン（西暦）、中央にイベントカード1枚、タイムライン上をドラッグして配置、放すと正解位置が光って差分年数を表示
- **図鑑ページ**: グリッド状のカード一覧。テーマ・地域・年代でフィルタリング可能。カードタップで拡大詳細表示
- **ランキングページ**: 週次スコアランキングTOP20のテーブル表示。ニックネーム・スコア・チャレンジ連続日数を表示

---

## 4. データ構造

### テーブル: `history_events`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK | |
| theme_id | INT | テーマ（1〜5）|
| chapter_id | INT | チャプター番号（1〜10）|
| order_in_chapter | INT | チェーン内の正解順番 |
| year | INT | 西暦年（マイナスは紀元前）|
| title | VARCHAR(100) | イベント名 |
| description | TEXT | 簡易解説 |
| cause_comment | TEXT | 次イベントへの因果コメント |
| region | VARCHAR(50) | 地域・国 |
| person | VARCHAR(100) | 関連人物名 |

### テーブル: `daily_scores`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK | |
| nickname | VARCHAR(50) | 表示名 |
| score | INT | スコア |
| play_date | DATE | プレイ日 |
| time_sec | INT | クリアまでの秒数 |
| created_at | DATETIME | |

※ ユーザー個人情報は一切収集しない。クリア状況はLocalStorageに保存

---

## 5. デザインの方向性
- **カラーパレット**: 羊皮紙ベージュ（#F5ECD7）を背景に、テーマ別のアクセントカラー（日本史：朱色、世界史：紺、科学：エメラルド、文化：紫、戦争：グレー）
- **カードデザイン**: 古地図風の紙テクスチャ（CSS box-shadow＋border-radius）に、アイコン絵文字＋年号＋イベント名をレイアウト。ドラッグ中はカードが浮き上がるアニメーション（CSS transform）
- **フォント**: 日本語は「Noto Serif JP」系の明朝寄りフォントで歴史の重みを演出
- **演出**: 正解時にコインのような光るパーティクルエフェクト（Canvas APIで軽量実装）、チャプタークリア時に「図鑑カード獲得」スライドインアニメーション
- **レスポンシブ**: スマホではカードを縦スクロールリストで並べ替え（touch eventでドラッグ対応）、PCでは横並びのドラッグ&ドロップ
- **全体感**: 重くなりすぎず、小学校高学年でも直感的に操作できるUI。難しさは内容にあり、操作はシンプルに