ユーザーによる変更を保持する
ユーザーは会話の外でコードを編集することがあります。
その間に予期しない変更を検出した場合は、上書きせず、意図的なものと見なすか、確認を求めてください。
動画の作成
ユーザーが新しい動画やコンポジションの作成・制作を依頼した場合は、Remotion プロジェクトがすでに存在するかどうかに関わらず、新しい Remotion 動画を作成する を読み込んでください。
新規プロジェクトのセットアップ
現在 Remotion プロジェクトが存在しない場合は、新しい Remotion プロジェクトを作成する を読み込んでください。
React マークアップのベストプラクティス
Remotion の React マークアップを記述する場合は、Remotion マークアップのベストプラクティス を読み込んでください。
地図
静止地図、アニメーションルートとマーカー、地理説明、Mapbox、MapLibre、MapTiler、GeoJSON、または 3D 地理フライオーバーについては、Remotion 地図 を読み込んでください。
マルチメディア
ブラウザ上でのマルチメディアタスク(動画のトリミング・クロップ、メタデータの取得など)を実現するには、Remotion マルチメディア を読み込んでください。
インタラクティブ性の向上
Remotion のマークアップを適切に構造化することで、ユーザーが Studio でインタラクティブに変更し、コードに書き戻せるようになります。該当する場合: インタラクティブ性のベストプラクティス
プレビューを開く
ユーザーが「動画を「作る」「作成する」などと依頼した場合。 ユーザーが明確に要求しない限り、デフォルトではレンダリングしません。代わりにインタラクティブプレビューを表示します。 プロジェクトが実行可能になったらすぐに Studio を起動し、ブラウザでプレビューを開いてください。作業中は開いたままにし、ユーザーが進行状況を確認し方向性を指示できるようにします。
Cursor を使用している場合
--no-open を付けずに Studio を実行し、ブラウザが自動で開くようにします:
npx remotion studio
アプリ内ブラウザを持つ別のエージェントクライアントを使用している場合
上記のコマンドで Studio にブラウザを開かせることも、以下を実行することもできます:
npx remotion studio --no-open
これにより長時間実行プロセスが開始され、プレビューのサーバー URL が出力されます。
すでにサーバーが起動している場合は、URL が出力されます。
--no-open を使用する場合は、出力された正確な URL をアプリ内ブラウザで開き、Studio が読み込まれることを確認してください。コンポジションが存在するようになったら、その動画プレビューが読み込まれることも確認してください。アプリ内ブラウザで開けない場合は、--no-open を付けずに Studio を実行してください。
特定のコンポジションには /[composition-id] に移動することでアクセスできます(例: http://localhost:3000/MapAnimation)。
:::note Studio は WebMCP ツールをサポートしています。 :::
アプリ内ブラウザがない場合
これにより、ブラウザで Studio が開くか、すでに開いている場合はフォーカスが移ります。
npx remotion studio
その他のオプション
プロジェクトを Remotion Studio で起動する、その正確なローカル URL を開く、または Studio CLI フラグを設定するには、Remotion Studio を読み込んでください。
動画をレンダリングする
ユーザーが明確に要求した場合のみレンダリングしてください。 例:「動画をレンダリングして」「エクスポート」「MP4 をください」。
プレビューにはより直感的なレンダリングインターフェースもあるため、コマンドラインではなくそちらを使用することを検討してください。
npx remotion render
詳細なオプションについては、レンダリング を参照してください。
単純な npx remotion render を超えた高度なレンダリングについては、レンダリングのベストプラクティス を参照してください。
キャプション
キャプションを扱う場合は、Remotion キャプション を読み込んでください。
SaaS、自動化、またはアプリケーションの作成
Remotion を利用した SaaS アプリ(<Player>、Lambda でのレンダリング、Vercel、Cloudflare、Express.js 経由、クライアントサイドレンダリング、適切な SaaS テンプレートの検索など)に関する知識については、Remotion SaaS スキル を使用してください。
Remotion API とドキュメントの参照
最新の Remotion ドキュメントを検索・読むには、Remotion ドキュメント を読み込んでください。
アップグレード
Remotion、関連パッケージ、互換性のある Mediabunny パッケージ、インストール済みの Remotion Agent スキルをアップグレードするには、Remotion アップグレード を読み込んでください。