動画をプログラムで作るRemotion

DataVisualization JavaScript

動機と結果

インフォグラフィックスを動画形式で作成したい。

今回は、Remotionで作成しました。

作成した動画はこちら。

www.remotion.dev

背景

これまではD3.jsを使っていました。

D3.jsは、データを扱いやすく、アニメーション表示や、インタラクティブなグラフも作れます。

しかし、動画となると少し手間がかかります。

そこで適したツールがないかと探して見つけたRemotionを試しに使ってみました。

d3js.org

Remotion

Make videos programmatically.

Create real MP4 videos using React. Scale your video production using server-side rendering and parametrization.

  • Reactベース
  • 動画の各要素をコンポーネントで作成・配置
  • ボタン（コマンド）一発でCompositionをMP4(h264)に描き出し

構造と理解

graph LR;
  Root["Root"]
  Composition1["Composition 1
duration frames / fps /
width / height"];
  Composition2["Composition 2"];
  CompA["Component A"];
  CompB["Component B"];
  CompC["Component C"];
  Root --> Composition1  -- defaultprop --> CompA -- prop --> CompB;
  Root --> Composition2 --> CompC;

Componentではframeやデータに応じた処理をする。

  • <Sequence from={duration}></Sequence>で表示開始時間を制御
  • frame = useCurrentFrame()でframeに応じた処理
  • propやfetchしたデータに応じた処理

所感

前提としてReactについて不案内なため、そちらの学習や手間はかかった。

データの受け渡しの都合上、各コンポーネントが連携したものは大変そう。作った動画の場合は、総動画数の表示に苦労した。

コンポーネントの配置や調整は直感的だった。

表示時間の調整など、frame単位の処理は少し煩雑に思えた。

コンポーネントごとにまとまるので、コードの見通しが良い。ただし、1ファイル完結でサクッと作るといった目的には少し煩雑に思えた。

D3.jsの代わりになるかというと、目的が違うツールの印象。もちろん、複雑なグラフはD3.jsの方が得意。

既存のグラフではなく、データに基づいた配置などを組み立てて、時間経過を見せる動画を作る用途に向いているように思える。