remotion-create

これらは、新しい Remotion プロジェクトとコンポジションを作成するための手順です。
次のタスクではない場合は、Remotion のベストプラクティスを参照してください。

プロジェクトをスキャフォールドする

プロジェクトがすでに存在する場合は、この手順をスキップしてください。 Node.js と Git がインストールされていること、また現在のフォルダーが新しいプロジェクトを開始するのに適切であることを確認してください。

スキャフォールド先を選ぶ前に、隠しファイルも含めて現在のフォルダーを確認してください。

空のフォルダー

フォルダーが空であるか、.DS_Store のような削除可能なオペレーティングシステムのメタデータのみが含まれている場合は、現在のフォルダーに直接プロジェクトを作成してください。 create-video は空でないフォルダーを受け付けないため、まず削除可能なメタデータファイルだけを削除してください。 隠しファイルをすべて削除可能なものとして扱わないでください。.env のようなファイルや .git のようなディレクトリは、意味のある内容です。

既存のフォルダーにスキャフォールドします。

npx create-video@latest --yes --blank --no-tailwind .
npm i

空ではないフォルダー

現在のフォルダーに意味のある内容が含まれていて、プロジェクトがまだ存在しない場合は、新しいサブフォルダーにスキャフォールドしてください。 my-video を適切なプロジェクト名に置き換えてください。

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i

動画を作成する前にプレビューを開く

プロジェクトが実行可能になったらすぐに、コンポジションを記述または変更する前に、ブラウザーで Remotion Studio を開いてください。新しいプロジェクトの場合は、スキャフォールドして依存関係をインストールした直後に行ってください。既存のプロジェクトの場合は、動画を編集する前に開いてください。作業中は Studio を起動したままにして、変更が反映される様子をユーザーが確認し、仕上がりに意見を出せるようにしてください。

動画をデザインする

スキャフォールドを維持し、React マークアップを追加してください。 動画を中心としたレイアウトやテキストサイズのガイダンスについては、Remotion React マークアップのベストプラクティスと動画レイアウトのルールに従ってください。

<Composition> または <Still> 要素を登録するルートを記述する前に、 コンポジションとスチルに従ってください。

クリップのタイムラインですか？

動画がタイムライン上に複数の動画クリップまたは音声クリップを配置する場合は、 タイムラインを記述する前に動画編集に従ってください。個別に編集するクリップには、それぞれ独自の JSX ノードを割り当ててください。

複数のシーンで構成される動画ですか？

複数のシーンが続く動画の場合は、複数シーンの動画のガイダンスに従ってください。

インタラクティビティのベストプラクティス

Remotion インタラクティビティのベストプラクティスに従って React マークアップを構成すると、ユーザーが Studio で編集した内容をコードに反映できます。

TailwindCSS

Tailwind が指定されている場合は、Remotion で TailwindCSS を使用する方法について tailwind.md を参照してください。

フォローアップ

動画の作成プロセスは完了しました。 フォローアップのプロンプトには、Remotion のベストプラクティスを使用してください。