ユーザーの変更を保持する
ユーザーは会話の外部でコードを編集することがあります。
その間に予期しない変更を検出した場合、上書きせず、意図的なものとみなすか、確認を求めてください。
動画の作成
ユーザーが新しい動画やコンポジションの作成・制作を依頼した場合、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 スキル を使用して、Remotion を利用した SaaS アプリ(<Player>、Lambda でのレンダリング、Vercel、Cloudflare、Express.js 経由、クライアントサイドレンダリングなど)に関する知識、または適切な SaaS テンプレートの検索に役立ててください。
Remotion API とドキュメントの参照
現在の Remotion ドキュメントを検索して読むには、Remotion ドキュメント をロードします。
アップグレード
Remotion、関連パッケージ、互換性のある Mediabunny パッケージ、インストール済みの Remotion Agent スキルをアップグレードするには、Remotion アップグレード をロードします。