ScreenScript - 画面録画シナリオ&操作手順書メーカー

## 1. アプリの目的・ターゲットユーザー
システム担当者・社内IT・フリーランスエンジニア・Webディレクターが、ソフトウェア操作マニュアルやサポート手順書を「ステップ単位で構造的に」作成できる無料ツール。スクリーンショットを貼らなくてもブラウザ上でステップ・画面遷移・説明文・注意点を整理し、印刷用HTMLまたはPNGシート形式で出力できる。

## 2. 主要機能
- **ステップビルダー**: 手順をカード形式で追加。各カードに「操作アクション（クリック/入力/選択/確認/移動 etc）」「対象要素名」「説明文」「スクリーン番号（画面ID）」「注意・補足」を入力できる。ドラッグで並び替え可能。
- **画面遷移フロー自動生成**: 入力したスクリーン番号をもとに、矢印付きの画面遷移ダイアグラム（Canvas描画）を自動生成して右ペインにリアルタイム表示。
- **テンプレート集**: 「新規ユーザー登録手順」「パスワードリセット」「ファイルアップロード」「メール設定」「バックアップ手順」など8種のプリセットテンプレートを用意。ワンクリックで土台を読み込める。
- **印刷・エクスポート**: ステップ一覧を番号付きの手順書レイアウト（A4縦）でブラウザ印刷できる。「コピー用テキスト出力」でプレーンテキスト/Markdown形式にも変換可能。
- **公開共有URL発行**: 完成した手順書をサーバーのMySQLに保存し、短い公開URL（/view/XXXX）で誰でも閲覧可能にする。編集はローカルストレージに保持した編集キー所持者のみ。
- **LocalStorage自動保存**: ページを閉じても下書きが消えないよう、編集中は自動保存。

## 3. 画面構成
### トップページ (index.php)
- キャッチコピー＋「新規作成」「テンプレートから始める」ボタン
- 最近作成した手順書（LocalStorage由来）の一覧カード（最大5件）

### エディタページ (editor.php)
- **左ペイン（2/3幅）**:
- 手順書タイトル・概要・対象システム・作成者名の入力欄
- ステップカード一覧（ドラッグ&ドロップ並び替え、追加/削除ボタン）
- 各カード：アクション種別セレクト・対象要素テキスト・説明文テキストエリア・スクリーン番号・注意メモ
- **右ペイン（1/3幅）**:
- 画面遷移フロー図（Canvas、スクリーン番号を丸ノードで表示・矢印で接続）
- 「プレビュー」「公開して共有URLを取得」「テキスト出力」「印刷」ボタン

### プレビュー/共有ページ (view.php?id=XXXX)
- 手順書の完成形を閲覧専用で表示
- タイトル・概要・作成日・ステップ一覧（番号・アクションバッジ・説明・注意）・フロー図
- 印刷ボタン

## 4. データ構造
### テーブル: manuals
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| public_id | VARCHAR(12) | 公開URL用ランダムID |
| title | VARCHAR(200) | 手順書タイトル |
| description | TEXT | 概要 |
| system_name | VARCHAR(100) | 対象システム名 |
| author | VARCHAR(100) | 作成者名 |
| steps_json | LONGTEXT | ステップ配列をJSON文字列で保存 |
| created_at | DATETIME | |
| updated_at | DATETIME | |

※ steps_jsonの各要素: {"order":1, "action":"クリック", "target":"ログインボタン", "description":"...", "screen_id":"S01", "note":"..."}

## 5. デザインの方向性
- カラーパレット: ダークネイビー(#1E2A3A)をベース、アクセントにエレクトリックブルー(#3B82F6)とホワイト
- ビジネスツールらしい落ち着いたSaaS風UI（Notionライク）
- ステップカードは白背景・角丸・ドロップシャドウ、アクション種別はカラーバッジで視覚的に区別（クリック=青/入力=緑/確認=黄/注意=赤）
- 画面遷移フロー図は薄いグレー背景のCanvas、ノードは白丸・青枠・番号テキスト、矢印はアニメなしのシンプルな直線
- スマホでは左ペインをフルスクリーン表示、右ペインはボタンでトグル切替
- フォントはNoto Sans JP、コード・スクリーンIDはmonospace