hiwurun/remotion-saas-boilerplate

Remotionのマークアップを特定の方法で記述することで、Remotion Studioがコードの構造を認識し、操作可能になります。

• クリックしてアイテムを選択できるようにする
• ドラッグ＆ドロップ、サイズ変更、回転を可能にする
• CSSスタイルの編集
• キーフレームとイージング値の編集可能

マークアップが複雑すぎてStudioが操作できない場合、値はグレー表示されます。

独自のタイムラインを持つインタラクティブなコンポーネントを優先する

親要素を埋めるコンポーネントには Interactive.withSchema({wrapInSequence: true, layout: 'absolute-fill'}) を使用します。ラッパーは視覚的なルートとタイムラインアイテムを提供し、デフォルトでオーバーフローをクリップするため、内部コンポーネントはフラグメントを返すことができます。タイミング、プリマウント、ディメンション、インスタンスごとのスタイルはエクスポートされたコンポーネントに配置します。

一緒に属するビジュアルは同じコンポーネントにまとめて、一緒に移動およびトリミングできるようにします。内部のレイアウトコンテナは、引き続きアライメント、小さな領域内でのクリッピング、またはアニメーショングループを提供できます。シーンを埋めるだけのコンテナは通常不要です。カード、テキストボックス、独自の境界を持つSVGはデフォルトの layout: 'none' を維持し、style を視覚的なルートに転送できます。

import {Video} from '@remotion/media';
import type React from 'react';
import {Interactive, useVideoConfig, type InteractivitySchema} from 'remotion';

type SceneProps = {
  readonly title: string;
};

const SceneInner: React.FC<SceneProps> = ({title}) => {
  const {fps} = useVideoConfig();

  return (
    <>
      <Video
        name="Background footage"
        src="https://remotion.media/video.mp4"
        premountFor={fps}
        objectFit="cover"
        style={{width: '100%', height: '100%'}}
      />
      <Interactive.Div
        name="Scene title"
        style={{
          position: 'absolute',
          left: 80,
          bottom: 80,
          color: 'white',
          fontFamily: 'Helvetica, Arial, sans-serif',
          fontSize: 80,
        }}
      >
        {title}
      </Interactive.Div>
    </>
  );
};

const sceneSchema = {
  title: {type: 'string', default: '', description: 'Title'},
} as const satisfies InteractivitySchema;

export const Scene = Interactive.withSchema({
  Component: SceneInner,
  componentName: 'Scene',
  schema: sceneSchema,
  wrapInSequence: true,
  layout: 'absolute-fill',
});

スキーマフィールドの選択

スキーマの各キーは、Studioが呼び出し元で読み取りおよび編集できるプロップです。 スキーマに含まれていないプロップは引き続き機能しますが、Studioでは編集できません。 キーは style.color のようなドット表記を使用できます。

型	使用目的	キーフレーム可能
string	文字列（タイトル、プロンプト、コードスニペットなど）	いいえ
number	数値（オプションで min、max、step、integer）	はい
boolean	オン/オフスイッチ	はい (ホールド)
color	CSSカラー文字列	はい
enum	variants 間の選択（各バリアントは独自のネストスキーマを持つ）	オプトイン (ホールド)
array	数値、色、列挙型などのリスト	いいえ
asset	メディアソース（オプションで assetType）	いいえ
font-family	CSSフォントファミリー	いいえ
font-weight	フォントの太さ	はい
translate、scale、rotation-css、rotation-degrees、transform-origin	トランスフォーム	はい
uv-coordinate	要素上の正規化された [x, y] ポイント	はい
svg-path	SVGパスデータ	はい
remotion-captions	Caption[] データ	いいえ
hidden	コントロールの外に保持される値	—

すべてのフィールドには default が必要で、description を持つ必要があります。これはStudioがラベルとして表示します。 keyframable: false を設定すると、静的なコントロールが表示されます。

テキストとアクセントカラーなど、コンテンツとインスタンスごとの外観を公開します。 style.translate、style.scale、style.rotate、style.transformOrigin、style.opacity のフィールドは追加しないでください。wrapInSequence: true によって既に追加されています。

ルートのCSSプロパティをインスタンスごとに編集可能にするには、組み込みのスキーマフラグメントをスプレッドします。

const cardSchema = {
  ...Interactive.textSchema, // style.color、style.fontSize、style.fontWeight、...
  ...Interactive.backgroundSchema, // style.backgroundColor
  ...Interactive.borderRadiusSchema, // style.borderRadius、...
} as const satisfies InteractivitySchema;

Interactive.borderSchema、およびキャプションを受け入れるコンポーネント用の Interactive.captionsSchema も利用可能です。 React.ReactNode の子を受け入れるコンポーネントの場合は、...Interactive.childrenSchema を追加します。 これは子コンテンツのコントロールを提供し、将来的にはよりリッチなコンテンツをサポートするように進化する可能性があります。 現在は、デフォルトが '' の "Text" というラベルの文字列フィールドを使用します。 コンポーネントが文字列のみの子を必要とする場合は、代わりに type: 'string' の明示的な children フィールドを宣言します。 Interactive.textSchema はタイポグラフィスタイルを制御し、childrenSchema はコンテンツを制御します。 children フラグメントは baseSchema に含まれておらず、カスタムコンポーネントに自動的に追加されるわけではありません。 ネストされたマークアップと計算された子は現在読み取り専用です。 text-content は string フィールドタイプの非推奨のエイリアスです。 すべてのオプションについては、InteractivitySchema を参照してください。

再利用可能なコンポーネントを接続コンポジションとして登録する

重要なシーンや、独自のレイヤーまたはアニメーションを持つ再利用可能なコンポーネントを、スタンドアロンのコンポジションとして登録します。Studioはこれらを接続コンポジションと呼びます。親ビデオと同じコンポーネント実装を共有しながら、独自のタイムラインで開くことができます。

必要なスタイルを定義し、コンポーネント内にフォントをロードして、親なしで機能するようにします。 親の独立性を参照してください。

親がレンダリングするのと同じエクスポートされたコンポーネント参照を登録します。上記の例では、component={Scene} を使用し、SceneInner やインラインラッパーは使用しません。 wrapInSequence: true の場合、接続のために追加の <Sequence> は必要ありません。

import {Composition} from 'remotion';
import {Scene} from './Scene';

export const RemotionRoot = () => (
  <Composition
    id="Scene"
    component={Scene}
    width={1280}
    height={720}
    fps={30}
    durationInFrames={30}
    defaultProps={{
      title: 'A new perspective',
    }}
  />
);

一意のID、代表的なインラインデフォルト、およびコンポーネントのプレビューに適した寸法、fps、期間を選択します。登録のデフォルトは、親インスタンスからプロップを自動的にコピーしません。 登録と抽出の詳細については、接続コンポジションを参照してください。

タイミングはコンポーネントに直接配置する

すでにタイミングプロップを受け入れる1つのコンポーネントの周りに別の <Sequence> を配置しないようにします。組み込みのインタラクティブコンポーネントと wrapInSequence: true で作成されたカスタムコンポーネントは、name、from、durationInFrames、trimBefore、playbackRate、premountFor を直接受け取ることができます。

<Scene
  name="Opening scene"
  from={30}
  durationInFrames={90}
  premountFor={fps}
  style={{opacity: 0.9}}
  title="A new perspective"
/>

冗長なシーケンスを削除する場合は、そのタイミングと名前を子に移動します。 既存の子のタイミングは保持します。オフセットを上書きしたり二重に適用したりしないでください。 コンポーネント内の useCurrentFrame() 呼び出しはローカルフレームを読み取りますが、呼び出し元のスタイル式は呼び出し元のフレームを使用します。アニメーションスタイルを移動するときは、この区別を維持してください。

複数の兄弟に共有タイミングを提供する場合、タイミングを処理しないコンポーネントをラップする場合、または子が直接受け入れられない寸法を提供する場合に <Sequence> を維持します。管理されたルートは、useVideoConfig() のために width と height も受け入れます。連続したレイアウトには <TransitionSeries.Sequence> を維持します。トランジションの有無にかかわらず、直接の from プロップはこれらの動作を置き換えません。

独立して編集可能なすべてのアイテムに独自のJSXノードを指定する

Studioは、アイテムを作成したJSXソースノードを編集します。複数のランタイムアイテムが同じJSXノードから作成された場合、それらは1つのソース編集ターゲットを共有します。

個別に編集可能であるべきすべてのコンポジション登録、クリップ、シーン、レイヤー、またはシーケンスについて、個別のJSXノードを作成し、編集可能なプロップをそのノードに保持します。これは、<Composition>、<Still>、組み込みのメディアコンポーネント、<Sequence>、<TransitionSeries.Sequence>、およびカスタムコンポーネントに適用されます。

たとえば、次のように編集可能なタイムラインを作成します。

import { TransitionSeries } from "@remotion/transitions";

<TransitionSeries>
  <TransitionSeries.Sequence name="Introduction" durationInFrames={90}>
    <Introduction />
  </TransitionSeries.Sequence>
  <TransitionSeries.Sequence name="Demo" durationInFrames={150}>
    <Demo />
  </TransitionSeries.Sequence>
</TransitionSeries>

.map() やその他のプログラムによるループは、1つのJSXソースノードから複数のランタイムアイテムを作成します。これは、可視化バーやパーティクルなど、1つのテンプレートとして意図的に制御される反復出力に適しています。インスタンスがStudioで独立したIDや名前、プロップ、メタデータ、タイミング、順序、削除、複製を必要とする場合には適していません。

Interactive を使用してHTML要素をインタラクティブにする

すべてのHTMLおよびSVG要素（<Img> を除く。これは既にインタラクティブです）は、Interactive を使用してインタラクティブにできます。

<Interactive.Div
  name="Greeting card"
  style={{fontSize: 80, padding: 24}}
>
  Hello
</Interactive.Div>

これにより、Studioでスタイルとキーフレームを設定できます。適切に使用してください。コンポーネントに多くの要素がある場合、タイムラインが乱雑になる可能性があります。

インラインテキストを優先する

テキストが固定されており、1回だけ使用される場合は、定数に抽出する代わりに、インタラクティブ要素内に直接記述します。

// 👍 固定コピーは編集可能のまま
<Interactive.Div name="Title">
  Remotion Best Practices
</Interactive.Div>

テキストが動的または再利用される場合にのみ、プロップまたは変数を使用します。

インタラクティブ要素にわかりやすい名前を付ける

要素に name プロップを追加して、簡単に識別できるようにします。 計算された名前は避け、ハードコードします。

<>
  <Interactive.Div name="Hero title" style={{fontSize: 80}}>
    Launch day
  </Interactive.Div>
  <Img name="Avatar" src="https://remotion.media/image.jpeg" />
  <Video name="Background" src="https://remotion.media/video.mp4" />
  <Interactive.Div name="Title">
    Launch day
  </Interactive.Div>
</>

すべてのCSSスタイルをインラインに保つ

最善の方法は、style にプレーンなオブジェクトを渡すことです。定数を参照したり、オブジェクトをスプレッドしたり、計算を行ったりしないでください。

<Interactive.Div
  style={{
    fontSize: 80,
    color: 'red',
  }}
>
  Hello World!
</Interactive.Div>

const baseStyle = useMemo(() => {
  return {
    fontSize: 12 // ❌ インライン以外のスタイルはサポートされていません
  }
}, []);

<Interactive.Div
  style={{
    ...baseStyle, // ❌ スプレッドはサポートされていません
    color: RED, // ❌ 定数の参照はサポートされていません
    scale: frame * 10 // ❌ 計算はサポートされていません
  }}
>
  Hello World!
</Interactive.Div>

interpolate() を使用してアニメーション化する

変更するプロパティで、インラインの interpolate() 呼び出しとしてアニメーションを記述します。 出力範囲、イージング、外挿、output プロパティはハードコードされた値を使用する必要があります。

入力範囲は、useVideoConfig() から直接デストラクチャリングされた durationInFrames、fps、width、height を追加で使用できます。durationInFrames のような裸の識別子、2 * fps や fps * 2 のような数値との乗算、durationInFrames - 1 のような数値の減算がサポートされています。

const {fps, durationInFrames} = useVideoConfig();

// 👍 インライン値は標準化およびキーフレーム化できます
<Interactive.Div
  name="Product card"
  style={{
    color: 'white',
    fontSize: 80,
    scale: interpolate(frame, [0, fps], [0, 1], {
      easing: Easing.spring({damping: 200}),
      output: 'perceptual-scale',
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp'
    }),
    rotate: interpolate(frame, [0, 1 * fps], ['0deg', '20deg'], {
      easing: Easing.spring({damping: 200}),
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp'
    }),
    translate: interpolate(
      frame,
      [durationInFrames - 30, durationInFrames],
      ['0px 0px', '0px 120px'],
      {
        easing: Easing.spring({damping: 200}),
        extrapolateLeft: 'clamp',
        extrapolateRight: 'clamp'
      }
    ),
  }}
>
  Sale
</Interactive.Div>

アニメーションのタイプとプロパティ

このスキルでは、現在主に translate、scale、rotate（およびそのバリエーション）、opacity などのCSSトランスフォームとプロパティに焦点を当てており、これらは interpolate() と組み合わせて使用されます。

サポートされていないパターン

現在、以下のものはサポートされていないか、制限付きでサポートされています。

• <TransitionSeries> 内での直接的な from プロップの使用はサポートされていません。
• 高度なCSSプロパティ（グリッドレイアウトなど）や複雑なセレクタベースのスタイル
• 動的な name プロップ
• interpolate() 内での useCurrentFrame() 以外のフックからの値のネスト

レイアウトの考慮事項

layout: 'absolute-fill' はデフォルトで overflow: 'hidden' を提供します。要素がコンテナからはみ出す必要がある場合は、layout: 'none' を使用し、必要に応じてCSSでオーバーフローを処理します。

アセットと外部メディア

<Video> および <Img> コンポーネントは、name プロップを追加することで自動的にインタラクティブになります。外部ソースURLを使用するか、ローカルアセットをインポートできます。