remotion-best-practices

ユーザーによる変更を保持する

ユーザーが会話外でコードを編集する場合があります。

その間に予期しない変更が行われたことを検知した場合は、上書きせず、意図的な変更とみなすか、確認を求めてください。

動画を作成する

ユーザーが新しい動画やコンポジションの作成、制作、構築を依頼した場合は、Remotion プロジェクトがすでに存在するかどうかにかかわらず、Create a new Remotion video を読み込んでください。

新しいプロジェクトのセットアップ

Remotion プロジェクトがまだ存在しない場合は、Create a new Remotion project を読み込んでください。

React Markup のベストプラクティス

Remotion React Markup を記述する場合は、Remotion Markup Best Practices を読み込んでください。

マップ

静的なマップ、アニメーション付きのルートやマーカー、地理情報の解説、Mapbox、MapLibre、MapTiler、GeoJSON、または 3D の地理的なフライオーバーを扱う場合は、Remotion Maps を読み込んでください。

マルチメディア

動画のトリミングやクロップ、動画のメタデータの取得など、ブラウザーでマルチメディア関連のタスクを行う場合は、Remotion Multimedia を読み込んでください。

インタラクティブ性の向上

Remotion のマークアップを適切に構成すれば、ユーザーが Studio で項目をインタラクティブに変更し、その内容をコードに反映できるようになります。関連する場合は、Interactivity Best Practices を参照してください。

プレビューを開く

ユーザーが動画の「作成」などを依頼した場合は、明示的に強く求められない限り、デフォルトでは動画をレンダリングしないでください。
代わりに、インタラクティブなプレビューを見たいと考えています。 プロジェクトを実行できるようになったら、コンポジションの構築や編集を始める前に、Studio を起動してブラウザーでプレビューを開いてください。作業中はプレビューを開いたままにして、ユーザーが進捗を確認し、指示できるようにしてください。

システムブラウザーを開かずにプレビューサーバーをデフォルトで起動するには、--no-open を渡します。

npx remotion studio --no-open

これにより、長時間実行されるプロセスが起動し、プレビュー用のサーバー URL が表示されます。 サーバーがすでに起動している場合は、URL が表示されます。 Codex のアプリ内ブラウザーで、表示された URL を正確に開いてください。Studio が読み込まれることを確認してください。コンポジションができたら、動画のプレビューが読み込まれることも確認してください。アプリ内ブラウザーを利用できない場合は、プレビューサーバーを起動したままにして、URL をユーザーに伝えてください。 /[composition-id] に移動すると、特定のコンポジションを表示できます。たとえば、http://localhost:3000/MapAnimation です。

:::note Studio は WebMCP ツールに対応しています。 :::

その他のオプション

Remotion Studio でプロジェクトを起動する方法、正確なローカル URL を開く方法、または Studio CLI のフラグを設定する方法については、Remotion Studio を読み込んでください。

動画をレンダリングする

ユーザーが明示的に強く求めた場合にのみレンダリングしてください。
例：「動画をレンダリングして」「エクスポートして」「MP4 をください」。

プレビューには、より直感的なレンダリング用インターフェースもあるため、レンダリングにはコマンドラインの代わりにそちらを使うことも検討してください。

npx remotion render

その他のオプションについては、Rendering を参照してください。

単純な npx remotion render を超える高度なレンダリングについては、Rendering Best Practices を参照してください。

キャプション

キャプションを扱う場合は、Remotion Captions を読み込んでください。

SaaS、オートメーション、アプリケーションの作成

<Player>、Lambda でのレンダリング、Vercel、Cloudflare、Express.js、クライアントサイドレンダリングなど、Remotion を活用した SaaS アプリについての知識を得る場合や、適切な SaaS テンプレートを探す場合は、Remotion SaaS skill を使用してください。

Remotion の API とドキュメントを調べる

最新の Remotion ドキュメントを探して読むには、Remotion Docs を読み込んでください。

アップグレード

Remotion、関連パッケージ、互換性のある Mediabunny パッケージ、およびインストール済みの Remotion Agent Skills をアップグレードするには、Remotion Upgrade を読み込んでください。

Codex のトラブルシューティング

Codex 内で実行する場合は、まずシステムブラウザーを開かずに Remotion Studio を起動してみてください。

npx remotion studio --no-open

EMFILE: too many open files, watch などのファイルウォッチャーの上限が原因で失敗した場合に限り、ポーリングを有効にし、Codex からブラウザーを開かずに再試行してください。

npx remotion studio --no-open --webpack-poll 1000

Codex から Studio を起動できない場合は、ユーザーに macOS のターミナルから手動で起動してもらい、すでに起動している Studio を引き続き使用してください。Codex から Chromium を起動する際のサンドボックスエラーは、Remotion プロジェクトではなく Codex/macOS のサンドボックスが原因である可能性が高いです。