PasteTimeline - コピペで作る年表・沿革メーカー

## 1. アプリの目的・ターゲットユーザー
会社の沿革ページ、個人の職歴・学歴まとめ、プロジェクト振り返り、歴史レポートなど「出来事を時系列で見せたい」あらゆる場面で使える年表作成ツール。デザインの知識がなくても、日付と出来事テキストを入力するだけでビジュアルな年表を即座に生成できる。ターゲットは中小企業の広報担当・フリーランス・学生・イベント主催者など。

## 2. 主要機能
- **イベント入力フォーム**: 日付（年月日または年月のみも可）・タイトル・説明文・カテゴリ（仕事/学習/イベント/マイルストーン）・アイコン絵文字をフォームで追加。最大100件まで登録可能
- **自動整列＆ビジュアル年表生成**: 入力した順番に関係なく日付順に自動ソートし、縦型タイムラインとして表示。偶数奇数で左右交互に配置する「ジグザグレイアウト」と「左揃えシンプルレイアウト」を切り替え可能
- **テーマ切り替え**: ライト・ダーク・コーポレート（青）・ナチュラル（緑）・レトロ（茶）の5テーマを1クリックで変更。フォント・配色・ラインスタイルが一括変更
- **PNG書き出し & 印刷**: html2canvas でキャンバス全体をPNG画像として書き出し。印刷用CSSで余白・改ページを最適化したA4印刷プレビューにも対応
- **LocalStorageへの自動保存 & JSONエクスポート/インポート**: ブラウザを閉じてもデータが消えない自動保存。JSONファイルで別端末への持ち運びや他者との共有が可能
- **公開URL発行（DB利用）**: 「公開する」ボタンで年表データをサーバに保存し、ランダム8文字の共有URLを発行。閲覧専用のシンプルな年表ページが生成される

## 3. 画面構成
- **メイン画面（左ペイン：入力エリア / 右ペイン：プレビュー）**
- 左ペイン上部：新規イベント追加フォーム（日付・タイトル・説明・カテゴリ・アイコン選択）
- 左ペイン中部：登録済みイベント一覧（ドラッグ不要・日付順に自動整列・削除ボタン付き）
- 左ペイン下部：テーマ選択ボタン群・レイアウト切り替えトグル・書き出し/印刷/公開ボタン
- 右ペイン：リアルタイムプレビューとして年表を表示。スクロール可能
- **公開URLページ（閲覧専用）**
- ヘッダーに年表タイトルと作成日、フッターに「PasteTimelineで作成」のクレジット
- イベントを縦に並べたシンプル表示
- **スマホ表示**: 左右分割をやめてタブ切り替え（「入力」タブ /「プレビュー」タブ）でシングルカラムに変換

## 4. データ構造
### timelines テーブル
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| share_key | VARCHAR(8) UNIQUE | 公開URL用ランダムキー |
| title | VARCHAR(100) | 年表タイトル |
| theme | VARCHAR(20) | テーマ名 |
| layout | VARCHAR(20) | レイアウト種別 |
| events_json | MEDIUMTEXT | イベント配列をJSON文字列で格納 |
| created_at | DATETIME | |

※ ローカル編集中はLocalStorageのみ使用。「公開」時のみDBに保存。events_jsonの各要素は {date, title, description, category, icon} を持つオブジェクト。

## 5. デザインの方向性
- 全体的にクリーンでモダンなフラットデザイン。デフォルトのライトテーマは白背景に「#4A90D9」のアクセントカラー
- 年表のラインは細い縦線（2px）、各イベントノードは円形アイコン（絵文字入り）
- フォントは「Noto Sans JP」を使用し日本語・英語どちらも美しく表示
- ボタンは角丸・ホバーエフェクト付きで操作感を明確に
- スマホでも快適に使えるよう、入力フォームは大きめのタップターゲット（48px以上）を確保