プレビューの使い方
アプリで開く・再読み込み・再生・スクラブを行います。
File Open… で React コンポジション（.tsx、.jsx、.ts、.js）を開きます。素材、トラック、クリップを選ぶと、Inspector で詳細を確認できます。
ソースを保存すると自動で再読み込みされます。File Reload で手動更新することもできます。
キーボードショートカット
| 操作 | macOS | Windows / Linux |
|---|---|---|
| 新規プロジェクトを作成 | ⌘ N |
Ctrl N |
| プロジェクトを開く | ⌘ O |
Ctrl O |
| コンポジションを再読み込み | ⌘ R |
Ctrl R |
| 再生 / 一時停止 | Space |
Space |
| 前 / 次のフレームへ | ← / → |
← / → |
| 1 秒戻る / 進む | Shift ← / Shift → |
Shift ← / Shift → |
| 前 / 次のクリップ境界へ移動 | ↑ / ↓ |
↑ / ↓ |
| 先頭 / 末尾へ移動 | Home / End |
Home / End |
| ループ再生（範囲指定時はその範囲） | ⌘ / |
Ctrl / |
| セーフエリアの表示を切り替え | ' |
' |
| タイムラインを拡大 / 縮小 / 全体表示 | = / - / Shift Z |
= / - / Shift Z |
| 書き出し範囲を解除 | Shift X |
Shift X |
| 書き出し範囲の開始 / 終了を設定 | I / O |
I / O |
映像と一緒に音を確認
再生時は映像と音声が同期します。波形とトラックレベルでタイミングを確認し、ミュートやソロで音を切り分け、プレビュー音量を調整できます。タイムラインの目盛りをドラッグすると好きな時点に移動できます。
デバッグ用のガイド
<DebugOverlay /> はセーフエリアの枠、その外側の網掛け、中心を描画し、<DebugBounds> はレイヤーのグループに枠を付けます。どちらも Celesta のプレビューと、--debug-guides を付けて書き出した PNG フレームやコンタクトシートに描かれ、動画には含まれないので、作業中は残しておけます。useDebugGuides() で自作コンポーネントもガイドを描くかどうか判定できます。