新しい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のベストプラクティスを使用してください。