remotionで動画を作るためのdev container用テンプレート

@Syuji Syuji authored 2 days ago
.agents/skills/ remotion Remotionスキルをプロジェクトローカルに追加する 21 days ago
.devcontainer Codexサンドボックス用にdevcontainerを設定 13 days ago
node Codexサンドボックス用にdevcontainerを設定 13 days ago
voicevox-remotion-template タイムラインBGM再生に対応 2 days ago
.gitignore 生成物を管理対象から除外 14 days ago
AGENTS.MD AGENTS.MDの内容を更新し、作業前に読むべき情報やプロジェクト概要、開発ルール、状態管理、検証方針を追加 3 days ago
docker-compose.yml 最初のコミット 3 years ago
readme.md SSH agent 手順を追記 3 days ago
readme.md

Remotionを使用した動画制作用作業スペース

初期設定

dev containerに接続した後、コンソールに下記のコマンドを入れる。

npm init video

お好みのスターターキットを選択してプロジェクトを作成する。

Git push 用 SSH agent

Windows ホスト側の SSH 鍵を Dev Container 内の Git から使う場合は、Windows の OpenSSH Authentication Agent を起動し、鍵を登録してから Dev Container を開き直す。

PowerShell を管理者として開き、初回は下記を実行する。

Get-Service ssh-agent | Set-Service -StartupType Automatic
Start-Service ssh-agent
ssh-add $HOME\.ssh\id_ed25519

鍵ファイル名が異なる場合は、実際の秘密鍵パスに置き換える。

Dev Container を開き直した後、コンテナ内で下記を確認する。

echo $SSH_AUTH_SOCK
ssh-add -l

SSH_AUTH_SOCK が空、または ssh-add -lCould not open a connection to your authentication agent. になる場合は、VS Code で Dev Container を Reopen / Rebuild する。

このリポジトリの SSH remote は git.omhouse.mydns.jp:27711 を使用する。初回接続時に host key の確認で止まる場合は、サーバ管理者が提示する fingerprint と一致することを確認してから known_hosts に登録する。

プレビューの立ち上げコマンド

npx remotion preview src/index.ts --webpack-poll=1000

voicevox-remotion-template 配下で npm script から起動する場合は、下記のように -- の後へ Remotion のオプションを渡す。

cd voicevox-remotion-template
npm run start -- --webpack-poll=1000

下記のオプションをつけると、仮想機械環境でもファイル変更を検知できる。

--webpack-poll=1000

webpack-pollオプションの詳細

動画ファイルのエクスポート

npm run build