Appearance
ノードパネル（ノードタブ）
キャンバスでノードを選択すると右パネルにノード編集UIが表示されます。
クリップ基本設定
タイトル欄はダブルクリックするとその場でテキスト入力に切り替わります（Enter / Escape / フォーカスアウトで確定）。キャンバス上のノードカードのタイトルも同様にダブルクリックで編集できます。
| フィールド | 説明 |
|---|---|
| タイトル | シーンの名前。HUDやノードカードに表示。絵文字を含めて自由に記述可（例: 📸 カメラ）。 |
| 種別 | start / clip / end / album（マップ、DRAFT）/ novel（ノベル、DRAFT） |
| メディア URL / ファイル | 動画・画像の URL を入力、または 📁 ボタンでローカルファイルを選択（blob URL として一時保存） |
| メディアタイプ | 自動 / 🎬 動画 / 🖼 画像 を手動指定（自動は拡張子で判別） |
| ループ再生 | 動画のみ。videoEnd 未設定時は HTML loop 属性で、設定時は onTimeUpdate で制御。 |
タイムライン時間入力の自動クランプ
動画・音声の開始・終了時刻（videoStart / videoEnd / audioStart / audioEnd）およびトリガーの表示・非表示時刻（showAt / hideAt）の入力欄は、メディアの尺を超える値を入力すると自動的に最終フレームの時刻に切り捨てられます。
TIP
動画の最後のフレームに hideAt を設定する場合は、自動クランプにより正確な値が入力されます。手動で計算する必要はありません。
対応メディアファイル形式
🎬 動画
| 形式 | 拡張子 | 補足 |
|---|---|---|
| MPEG-4 | .mp4 | 最も互換性が高い。H.264 / H.265 コーデック推奨。 |
| WebM | .webm | Chrome / Firefox で高サポート。VP8 / VP9 コーデック。 |
| QuickTime | .mov | Safari / iOS で動作。Chrome では再生できない場合あり。 |
| Ogg | .ogv | Firefox 向け。Theora コーデック。 |
WARNING
ブラウザやOSによってサポートが異なります。最大互換性を得るには .mp4（H.264） を推奨します。
🖼 画像
以下の拡張子はアプリが自動的に「画像」として判別します（mediaType: auto 時）。
| 形式 | 拡張子 | 補足 |
|---|---|---|
| JPEG | .jpg / .jpeg | 写真に最適。ファイルサイズが小さい。 |
| PNG | .png | 透過対応。ロゴや図表に適する。 |
| GIF | .gif | アニメーション可。最大256色。 |
| WebP | .webp | 高圧縮・透過対応。モダンブラウザ推奨。 |
| AVIF | .avif | 次世代フォーマット。高圧縮・高品質。 |
| SVG | .svg | ベクター画像。拡大縮小で劣化なし。 |
| BMP | .bmp | 非圧縮。ファイルサイズが大きくなりやすい。 |
| TIFF | .tiff / .tif | 高品質。ブラウザサポートが限定的。 |
🎵 音声（サウンドトラック）
| 形式 | 拡張子 | 補足 |
|---|---|---|
| MP3 | .mp3 | 全ブラウザで動作。BGMに最も推奨。 |
| AAC | .aac / .m4a | Apple デバイスとの親和性が高い。 |
| WAV | .wav | 非圧縮・高品質。ファイルサイズ大。 |
| OGG | .ogg | Chrome / Firefox で動作。Safari は非対応。 |
| FLAC | .flac | ロスレス圧縮。ブラウザサポートが限定的。 |
| WebM Audio | .webm | Opus コーデック。Chrome / Firefox 推奨。 |
TIP
ローカルファイルを 📁 ボタンで読み込んだ場合、ページをリロードするとリンクが切れます（blob URL は一時的）。本番運用では HTTPS で公開した URL を使用してください。
推奨動画スペック
快適な再生のために、以下のスペックを目安にしてください。スペックが高すぎると、特にモバイル（iOS）でのフリーズや読み込み遅延の原因になります。
解像度・アスペクト比
プロジェクト設定の解像度と動画の解像度を合わせるのが基本です。
| プロジェクト設定 | 推奨動画解像度 | 用途 |
|---|---|---|
| 縦長（デフォルト） | 1080×1920 / 720×1280 | スマートフォン縦向き視聴 |
| 横長 | 1920×1080 / 1280×720 | PC・TV・横向き視聴 |
| 正方形 | 1080×1080 | SNS埋め込みなど |
エンコード設定
| 項目 | 推奨値 | 補足 |
|---|---|---|
| コーデック | H.264（Baseline / Main Profile） | iOS・Android・PC 全対応。H.265 は iOS Safari のみ対応 |
| ビットレート（720p） | 2〜4 Mbps | 高すぎるとモバイルでフリーズしやすい |
| ビットレート（1080p） | 4〜8 Mbps | 同上 |
| フレームレート | 24fps / 30fps | 60fps は過剰。ファイルサイズと処理負荷が増える |
| 音声コーデック | AAC | 128〜192kbps 推奨 |
| 1クリップのファイルサイズ | 50MB 以下を目安 | 大きいほど初回ロードが遅くなる |
iOSでのフリーズ対策
高ビットレート（目安10Mbps超）の動画はiOS Safariで再生が止まることがあります。HandBrake などで再エンコードし、ビットレートを下げてください。
クリップは短く分割する
1本の長い動画を使うより、シーンごとに短いクリップに分けると、読み込みが速くなりシークも安定します。
動画再生範囲
動画クリップでメディアがロードされるとタイムラインバーが表示されます。
- 開始（videoStart）：再生を開始する秒数。未設定なら先頭から再生。
- 終了（videoEnd）：再生を停止する秒数。未設定なら動画末尾まで再生。
- タイムラインバー：青ハンドル = 開始点、黄ハンドル = 終了点。ドラッグで調整可能。
TIP
videoEnd を設定した状態でループをONにすると、A-B リピート再生になります。
動画音声
🔊 / 🔇 ボタン：動画の内蔵音声をミュート。BGM（サウンドトラック）とは別に制御。
サウンドトラック（BGM）
| フィールド | 説明 |
|---|---|
| 音声 URL / ファイル | MP3・AAC・WAV・OGG など。URL または 📁 ファイル選択。 |
| 再生範囲 | A-B 区間指定（audioStart / audioEnd）。タイムラインバーで操作可能。 |
| 音量 | 0〜100%（内部値 0.0〜1.0） |
| 🔁 ループ | BGM をループ再生 |
WARNING
ローカルファイル（blob URL）はページリロード後に無効になります。本番運用では HTTPS URL を推奨。
TIP
隣接するノードで同じ BGM の URL を設定すると、ノードを跨いで再生が継続されます（再スタートしません）。異なる URL のノードに遷移した場合のみ切り替わります。
終了画面（goal / end のみ）
| フィールド | 説明 |
|---|---|
| 絵文字 | エンド画面の大絵文字（省略時 goal=🏆 / end=⛔） |
| メッセージ | エンド画面に表示するテキスト（JP/EN 多言語対応） |
| フォントサイズ | 8〜72px（デフォルト 18px） |
| テキスト色 | プリセット8色 + カラーピッカー |
ENDノード到達後のメニュー
プレイヤーがENDノードに到達すると、画面下部に終了メニューが表示されます。
| ボタン | 動作 | 表示条件 |
|---|---|---|
| ↩ 戻る | 前のシーンに戻る | ENDノードに「ページ送り（prev）」トリガーが設定されている場合のみ |
| ▶ 続きから | 直前の分岐点から再プレイ | ノードパネルの「続きからを表示」がON（デフォルト）のとき |
| 🔄 最初から | STARTノードから再プレイ。セーブデータ対象外の変数はリセット | 常に表示 |
| 閉じる / エディタへ | プレイヤーを終了 | 常に表示 |
「▶ 続きから」の再開ポイント
- 手動指定：ノードパネル → レジューム設定 → 「セーブポイント」で特定ノードを選択した場合、そこから再開
- 自動検出：視聴履歴を遡り、インタラクティブなトリガー（タップ・スワイプ・テキスト）が2つ以上あった最後のノードを自動選択
- フォールバック：上記で見つからない場合はENDノードの直前のノードから再開
エディタ設定（ノードパネル → レジューム設定）
| 設定項目 | 説明 |
|---|---|
| 続きからを表示 | 「▶ 続きから」ボタンの表示/非表示（デフォルト: ON） |
| セーブポイント | 「続きから」の再開ノードを手動指定。「自動」にすると上記ロジックで自動検出 |
ノードプレビューウィンドウ
ツールバーの ノードプレビュー ボタン（再生ボタンの左隣）、またはウィンドウメニュー → ノードプレビュー（⌘P）でフローティングプレビューウィンドウを開きます。
ノードプレビューでは次の内容を確認できます：
- メディア再生：選択ノードに設定された動画・画像を実際に再生・表示します。動画はシーク・ループ設定なども反映されます。
- トリガー表示：そのノードに設定されたタップボタンやテキストオーバーレイなどのトリガーが、実際の表示位置・スタイルで重なって表示されます。
その他の挙動：
- タイトルバーをドラッグして画面上の任意の位置に移動できます
- ウィンドウ位置は自動的に記憶され、次回起動時も同じ位置に表示されます（
localStorageに保存） - 選択ノードが変わると、表示するクリップも自動で追随します
- タップ・テキストトリガーの 📍 配置モード中はプレビュー上をクリックして表示座標を設定できます
- ドラッグで移動：既存のピンは直接ドラッグして位置を調整できます
- 中心スナップ：ドラッグ・クリック配置時、X・Y軸それぞれ独立で画面中心（50%）付近に近づくと自動的に中心に吸着します
- 🔍 メディアの等倍で表示：プロジェクト設定の解像度と同じピクセルサイズでプレビューを表示するボタン
- 複数選択・整列：Ctrl（Mac: ⌘）+クリックでトリガーマーカーを複数選択。左揃え・中央揃え・右揃え・上揃え・上下中央揃え・下揃え・上下均等・左右均等の整列ツールバーが使えます
- 選択中トリガーの一斉ドラッグ：2件以上選択した状態でいずれかのマーカーをドラッグすると、選択中の全トリガーが同じ移動量だけ一緒に移動します
- クリックで右パネル連動：マーカーをドラッグせずクリックすると、右パネルが「ノード」タブに切り替わり該当トリガーが自動展開されます
- テキストのその場編集：テキストを表示するトリガーは、プレビュー上のマーカーをダブルクリックするとその場で編集できます
トリガー管理
ノードパネル下部にこのノードに紐づくトリガー一覧が表示されます。
- 追加：タイプボタン（👆 タップ / 💬 テキスト / 👋 スワイプ / 📄 ページ送り / ⏱ タイマー）から追加。キャンバス上のノード下端からも追加可能。
- 並び替え：ドラッグ＆ドロップ。⇅ ボタンで、座標を持つトリガー（tap/text/timer）を画面上の位置（上→下・左→右）で一括並べ替えできます。
- 削除：各トリガー右上の ✕ ボタン（確認ダイアログあり）
- コピー：他ノードのトリガーセットを一括コピー（接続先はリセット、ID は新規発行）
- 他ノードへのドラッグ＆ドロップでコピー／移動：右パネルのトリガー行を、キャンバス上の別ノードへドラッグすると（そのノードがハイライト）、ドロップ時に確認モーダルが出て「コピー」「移動」を選べます。移動はUndo（⌘Z）で1回で元に戻せます。
- 複製：ノード上（キャンバス）・右パネル・ノードプレビューのいずれからも、既存のトリガーを1件単位で複製できます（📋 ボタン）。