Remotionを入れて、最初の動画を書き出すまでにやったこと

• 手順は「プロジェクトを作る」「スキルを入れる」の2つだけ
• ただしNode・ffmpeg・Chromeの取得という前提がある
• 書き出しまで通して、12秒の動画ができた

Reactで動画を作るRemotionを入れた。入れただけでは分からないので、実際に1本書き出すところまでやった。できたものが下だ。

Remotionは何をするものか

動画編集ソフトではない。Reactのコンポーネントを書くと、それが1コマずつ描画されて動画になる。

• 見た目はHTMLとCSSで書く
• 何秒目に何をするかは、フレーム番号で決める
• 書き出すとH.264のmp4になる

つまり、ブラウザで作れるものは全部そのまま動画にできる。

入れたもの

手順そのものは2つ

プロジェクトを作る。

npx create-video@latest --yes --hello-world my-video
cd my-video && npm i

対話形式で聞かれるのが面倒なら、上のように--yesとテンプレート名を付ければ止まらずに終わる。

次にスキルを入れる。

npx skills add remotion-dev/skills

これでRemotion用のスキルが12本入る。すべてremotion-で始まる名前だ。

記事に書かれていない前提が3つあった

紹介記事は「驚くほど簡単」と書いていることが多いが、実際には前提がある。

• Node.jsが要る。今回はv24で動いた
• ffmpegは同梱のものが使われるので、無くても動く
• Chrome Headless Shellを初回の書き出し時に93MBほど取りに行く

3つ目を知らないと、最初の書き出しだけ異様に遅く感じて不安になる。回線が細い場所では、最初の1本は時間に余裕のあるときにやったほうがよい。

書き出してみて分かったこと

12秒・1920×1080の動画を書き出して、ファイルは908KB、所要時間は1分かからなかった。1コマずつブラウザで描いているので、画面に出せるものはそのまま動画になる。

逆に言うと、ブラウザで重い処理は動画でも重い。凝った表現を入れるほど書き出しは伸びる。

引っかかった点

正直に書いておく。

• npm auditがhigh 10件を出す。中身は全部1件の同じ原因に行き着き、lint用の依存で、修正版がまだ出ていない
• プロジェクト作成時にgitの初回コミットが失敗する。gitのユーザー名とメールが未設定だと起きる
• フォルダ名に日本語とスペースが入っていたが、これは問題なく通った

スキルを入れると何が変わるか

入れる前と後で、頼んだときの出力が変わる。入れないと、動かない書き方が混ざる。

とくにCSSのanimationやtransitionは、画面では動いて見えるのに動画にすると止まったままになる。これはRemotionが1コマずつ時間を止めて描いているからで、知らないと原因が分からない。スキルにはこの手の「書いてはいけない形」が入っている。

どういう仕事に向くか

1本だけ凝った映像を作るなら、編集ソフトのほうが速い。Remotionが効くのは同じ型で何本も作るときだ。

• 記事のタイトルだけ差し替えた紹介動画を、毎週出す
• 数字が毎月変わる報告を、同じ見た目で作り直す
• 縦型と横型を、同じ中身から両方出す

どれも手作業だと「前回と同じにする」のが大変な仕事だ。コードなら完全に同じものが何度でも出る。

まとめ

導入だけなら10分で終わる。ただし最初の1本を書き出すまでやらないと、動くかどうかは分からない。入れた直後に1本書き出すのを手順の一部にしておいたほうがよい。