機能仕様書

ユーザーストーリー
- ストーリー1
  - マーケターとして、動画の特定タイミングにCTAボタンを追加したい。なぜなら視聴者を製品ページに誘導してコンバージョン率を改善したいから。
- ストーリー2
  - 企業研修担当者として、動画内に理解度確認クイズを挿入したい。なぜなら学習者の習得状況をリアルタイムで把握して研修効果を数値で証明したいから。
- ストーリー3
  - 営業担当者として、製品デモ動画を顧客の選択で分岐させたい。なぜなら「価格重視」「機能重視」など顧客ニーズに合わせたパーソナライズ体験を自動提供したいから。
機能一覧
- 必須（MVP）
  - 機能1: 動画アップロードと管理
    - 対応ストーリー: 全ストーリー共通基盤
  - 機能2: インタラクションオーバーレイエディタ（ホットスポット・CTAボタン配置）
    - 対応ストーリー: ストーリー1
  - 機能3: 動画内クイズ・フォーム挿入
    - 対応ストーリー: ストーリー2
  - 機能4: 分岐ナラティブエンジン（条件付き動画シーク）
    - 対応ストーリー: ストーリー3
  - 機能5: インタラクティブプレーヤー（視聴者向け公開URL）
    - 対応ストーリー: 全ストーリー
  - 機能6: 基本アナリティクス（クリック率・完了率・回答集計）
    - 対応ストーリー: 全ストーリー
- 重要
  - 機能7: リード獲得フォーム + Resendメール通知
    - 対応ストーリー: ストーリー1
  - 機能8: 埋め込みiframeコード生成
    - 対応ストーリー: ストーリー1・3
  - 機能9: Stripe課金（Starter $49/Pro $149/Business $299）
    - 対応ストーリー: ビジネスモデル実現
- あれば良い
  - 機能10: HubSpot CRM連携（リード自動送信）
    - 対応ストーリー: ストーリー1
  - 機能11: チャプターマーカーと目次表示
    - 対応ストーリー: ストーリー2
  - 機能12: SCORM 1.2エクスポート
    - 対応ストーリー: ストーリー2
機能詳細
- 機能2: インタラクションオーバーレイエディタ
  - 画面
    - 動画プレーヤー（中央）＋タイムラインバー（下部）＋インタラクション設定パネル（右サイド）の3カラムレイアウト。タイムライン上のマーカーをクリックで選択、プレーヤー上のオーバーレイをドラッグで位置調整
  - 操作
    - タイムラインの任意の時刻をクリック→インタラクション種別選択（ボタン/ホットスポット/テキスト）→動画上にドラッグで位置とサイズ調整→ラベル・リンクURL・表示開始/終了時間を入力→「保存」で即時反映
  - データ
    - interactionsテーブル：{id, video_id, type, start_time_ms, end_time_ms, position_x_pct, position_y_pct, width_pct, height_pct, config_json, created_at}
- 機能4: 分岐ナラティブエンジン
  - 画面
    - ReactFlowを使用したフローチャート形式のビジュアルエディタ。動画サムネイルのノード＋選択肢ラベル付きエッジでDAG（有向非循環グラフ）を構成。左側にノード追加パネル
  - 操作
    - 動画ノードをキャンバスにドラッグ追加→ノードのインタラクションポイントから「分岐先動画」を選択肢ごとに指定→エッジにラベル（例：「価格を知りたい」）を入力→プレビューモードで実際の分岐動作を確認
  - データ
    - branchesテーブル：{id, source_video_id, interaction_id, choice_label, target_video_id, order_index, created_at}
- 機能5: インタラクティブプレーヤー
  - 画面
    - フルスクリーン対応のVideo.jsベースプレーヤー。設定された時刻にDOMオーバーレイが出現し、クリック可能なボタン/ホットスポット/フォームを表示。モバイルタッチ操作対応
  - 操作
    - 視聴者が公開URLまたはiframeでアクセス→動画自動再生→インタラクション表示タイミングに到達→オーバーレイ出現→クリック/回答入力→分岐先動画にシークまたは外部URLに遷移
  - データ
    - viewer_eventsテーブル：{id, video_id, session_id, event_type(play/pause/click/answer/complete), interaction_id, value, timestamp, user_agent, ip_hash}