作業の進め方
Remotion Interactivityは、動画が正しく描画されていても、Studioでレイヤーを編集しにくい、または編集できないという制作上の課題に対応します。ソースでは、インラインスタイル、名前付き要素、対応する補間式、直接記述したJSXノードなど、エディターが認識できるマークアップのパターンを説明しています。
カスタムコンポーネントでは、インタラクティビティスキーマを使って、インスタンスごとの意味のあるコントロールを公開します。独自のタイムラインを持つコンポーネントは、連携コンポジションとして登録することもできます。これはソースコードと動画エディターの関係に関するもので、公開済みの動画にクリック可能なボタンを追加するものではありません。
想定される成果物
- 名前が付いた、個別に編集できる動画レイヤー
- コンテンツと外観のコントロールを宣言したカスタムコンポーネント
- 独自の編集可能なタイムラインを持つ連携コンポジション
ブリーフからレビューまで
- 01編集単位を特定する
個別に変更が必要なクリップ、シーン、レイヤーを洗い出します。1つのループですべてを生成せず、それぞれに専用のJSXノードを記述します。
- 02有用なコントロールを公開する
意味のあるテキスト、色、メディア、数値プロパティにInteractivitySchemaを追加し、注入されたstyleを1つの視覚的なルートへ渡します。
- 03ソースを編集可能に保つ
対応するキーフレームとスタイルをインラインに置き、呼び出し側とローカルのフレームの意味を維持し、同じエクスポート済みコンポーネントで再利用シーンを登録します。
- 04Studioでの編集をテストする
Studioで対象レイヤーを選択、移動、調整し、変更が想定したソースノードに書き戻されるか確認します。