Remotionベストプラクティス
Remotionの出力を、フレーム、入力プロパティ、および宣言されたアセットの決定論的関数として構築します。タスクで変更が必要な場合を除き、ユーザーの編集内容、プロジェクトの既存のパッケージマネージャー、アーキテクチャ、スタイルを保持します。
証拠から始める
- リポジトリの手順を読み、
package.json、ロックファイル、Remotion設定、エントリポイント、登録済みコンポジション、および近くのテストを検査します。 - 既存のプロジェクトでは、
node <skill-directory>/scripts/audit-remotion-project.mjs <project-root>を実行します。その出力を証拠として扱い、アップグレードの許可とはみなしません。 - APIを選択する前に、インストールされているRemotionのバージョンを記録します。すべての
remotionおよび@remotion/*パッケージをまったく同じバージョンに維持します。2つ目のロックファイルを追加しないでください。 - 成果物が動画、単一の静止画、動画からサンプリングされたフレーム、またはストアスクリーンショットのバッチのいずれであるかを特定します。
- 実装前に、コンポジションID、寸法、FPS、期間、プロパティ、出力パス、および必要なアセットを定義します。
関連するリファレンスのみをロードする
<Composition>、<Still>、useCurrentFrame()、interpolate()、spring()、<Sequence>、または<Series>については、composition-and-timing.md を読んでください。staticFile()、メディア、フォント、ネットワークデータ、useDelayRender()、delayRender()、またはcalculateMetadata()については、assets-and-async.md を読んでください。- CLI、
renderStill()、サーバーサイドレンダリング、または Remotion Lambda については、rendering-and-lambda.md を読んでください。 - レンダリングの遅さ、メモリ使用量の多さ、非決定論、または検証戦略については、performance-and-testing.md を読んでください。
- App Store または Google Play の画像（
screenshot-studioによって委任された 1284×2778 の出力を含む）については、store-stills.md を読んでください。 - API またはプラットフォームのルールが変更された可能性がある場合は、コーディングする前に sources.md にリンクされているライブの一次ソースを確認してください。
絶対的な実装ルール
- 時間は
useCurrentFrame()とuseVideoConfig()から導出します。レンダリングされたモーションに CSS トランジション、CSS キーフレームアニメーション、壁掛け時計タイマー、またはシードなしの乱数を使用しないでください。 - 外挿が意図的でない限り、有限アニメーションをクランプします。タイミングを時間を表す場合は秒単位で
fpsを乗算して表現し、共有シーンの継続時間を集中管理します。 useCurrentFrame()はタイムドコンポーネント内で相対的であることを忘れないでください。グローバルな同期が意図的な場合にのみ、コンポジションルートから絶対フレームを渡します。- 親タイムライン上に明示的に配置するには
<Sequence>を、連続したシーンには<Series>を使用します。すべてのシーンに明示的な継続時間を指定します。 - ローカルアセットは
public/に置き、staticFile()で解決します。生の HTML タグではなく Remotion メディアコンポーネントを使用して、レンダリングがメディアを正しく待機するようにします。 - コンポーネント内では
useDelayRender()を優先します。ハンドルを1回作成し、正確に1回クリアし、失敗した場合はcancelRender(error)を呼び出します。レンダリングごとに1回プロパティやメタデータを決定するために必要なデータにはcalculateMetadata()を優先します。 - レンダリング時のコードは、ヘッドレス Chromium や Lambda では利用できないブラウザ専用の前提条件がないようにします。AWS 認証情報やその他のシークレットをブラウザバンドルに公開しないでください。
- ストアターゲットごとに、寸法、ファイル形式、アルファチャンネルポリシー、およびプラットフォーム固有のルールを独立して検証します。1つのポートレートサイズが Apple と Google の両方で受け入れられるとは決して想定しないでください。
タイトなレンダリングループで作業する
- 型チェックを実行し、焦点を絞ったテストを実行します。
- 代表的な静止フレーム（開始フレーム、各シーンの境界、モーションの中間点、最後のフレーム）をレンダリングします。
- Studio プレビューだけでなく、実際のピクセルを検査します。クリッピング、テキストの折り返し、安全マージン、欠落したアセット、透明な背景を確認します。
- 完全な高価な動画の前に、短いフレーム範囲または低スケールのドラフトをレンダリングします。
- 盲目的に最大化するのではなく、デプロイマシン上の同時実行数をベンチマークします。
- 明示的なコンポジション ID、プロパティ、出力パス、寸法、および形式で最終成果物をレンダリングします。
- 終了ステータス、ファイルの存在、ピクセル寸法、関連する場合は継続時間/フレーム数、および最終的な視覚サンプルを確認します。
変更は控えめに行う
- タスクで必要な場合、またはユーザーが承認した場合を除き、Remotion のアップグレード、プロジェクト構造の書き換え、またはメディアコンポーネントの交換を行わないでください。
- 新しい API はインストールされているバージョンでゲートし、実用的な場合は互換性のあるフォールバックを提供します。
- 任意のタイムアウトを増やしてレンダリングの失敗を隠さないでください。まず、未解決のハンドル、ネットワークリクエスト、アセット、フォント、またはメディアデコードを特定します。
- 同等のレンダリングからの測定値なしに、パフォーマンスの改善を主張しないでください。