🧱
Remotion Composition — ビデオの構造を設計する方法
Composition、Sequence、Seriesでシーンを組み合わせる宣言的ビデオ構造化
Remotionのビデオ構造は3つの核心概念で成り立っています。
Composition: 1つの完成したビデオを定義します。fps、解像度（width/height）、総長（durationInFrames）を指定し、どのReactコンポーネントをレンダリングするか決定します。1つのプロジェクトに複数のCompositionを登録すれば複数のビデオを1プロジェクトで管理できます。
Sequence: ビデオタイムラインの特定区間を担当します。from propで開始フレームを指定すると、子コンポーネントはSequenceの開始点をフレーム0として認識します。この「ローカルタイム」概念のおかげでシーンを独立に開発した後自由に配置できます。
Series: 複数のSequenceを順次配置する便利コンポーネントです。手動でfrom値を計算する必要なく、各シーンのdurationだけ指定すれば自動的に連結されます。
動作フロー
1
Root.tsxでregisterRoot()でプロジェクトエントリポイントを登録
2
<Composition>でビデオメタデータ（fps、width、height、durationInFrames）+ コンポーネントを定義
3
<Sequence from={60}>でシーン別開始位置を指定 → 子はローカルフレーム0から開始
4
<Series>で複数シーンを順次配置: <Series.Sequence durationInFrames={90}>ずつ連結
5
Remotion Studioで各Compositionを個別タブでプレビューおよびレンダリング
メリット
- ✓ ローカルタイム: Sequence内コンポーネントが独立フレーム0基準 → シーン順序変更が自由
- ✓ 複数ビデオ管理: 1プロジェクトで複数フォーマット/バージョンをCompositionで管理
- ✓ Reactコンポーネント再利用: シーンをコンポーネントにして複数ビデオで再利用
デメリット
- ✗ durationInFrames計算: fpsと希望秒数を掛ける必要があり直感的でない場合がある
- ✗ ネストされたSequenceのタイム計算が複雑になる可能性
ユースケース
イントロ → 本文 → アウトロ構造のテンプレートビデオ設計
同じデータで横型（16:9）+ 縦型（9:16）ビデオを別々のCompositionで同時管理
再利用可能なシーンコンポーネントライブラリの構築