1. Overview
Remotionについて
Remotionとは？
Remotionは、Reactコンポーネントを元に動画をつくれるライブラリ。Remotion AGという企業が中心になって開発されている。
動画にしたいReactコンポーネントをCompositionというコンポーネントに渡してやることで、動画としてレンダリングすることができる。Reactコンポー ネントのなかでは、useCurrentFrame()というフックから「動画にしたときに何フレーム目にあたるか」を表す値を取得できるため、この値に応じてstyle属性などを変化させることでアニメーションをつくることができる。
動画ファイルを書き出す大雑把な仕組みとしては、@remotion/bundlerでCompositionを何らかの静的なWebページに変換したうえで、@remotion/rendererがフレームを進めながらpuppeteer + chrome-headless-shellを使ってスクリーンショットを撮影、バンドルされているffmpegを使ってスクリーンショットを動画にまとめるといったことをしているらしい。
Compositionは、Remotion StudioというWebアプリを使って動画ファイルとして書き出さずにプレビューできるほか、@remotion/playerというライブラリを使って動画プレイヤー風のReactコンポーネントとしてReactアプリに埋め込むこともできる。
また、動画ファイルの書き出しに、AWS Lambdaを利用できる仕組みなども用意されている。詳しくはServer-Side Renderingを参照のこと。
ライセンス
Remotionはソースコードこそ公開されているものの、OSSではない。Remotion Licenseという独自ライセンスが適用される1。基本的に、個人開発の場合についてのみ商用利用含め無料で利用でき、Remotionを使用する開発者が複数人いる事業所においてはライセンスを購入する必要がある。ライセンスの購入はLicensing | Remotion Pro からおこなえる。
使い方のイメージ
たとえば、次のような動画をReactコンポーネントとして書くことができる。
- Video
- Code
import {
makeRect,
} from "@remotion/shapes";
import {
AbsoluteFill,
useCurrentFrame,
useVideoConfig,
random,
interpolate,
Easing,
} from "remotion";
import { useMemo } from "react";
export const MyComp = () => {
const { durationInFrames, width, height } = useVideoConfig();
const frame = useCurrentFrame();
const numRects = 8;
const speed = 1.2;
const rects = useMemo(() => {
return new Array(numRects)
.fill(0)
.map((_, i) => {
const r: number = random(i) * 300;
const { path } = makeRect({ width: r, height: r });
return { len: r, path: path };
})
}, [numRects]);
const rotate = interpolate(
frame,
[0, durationInFrames - 10],
[0, Math.PI * 2 * speed],
{
easing: Easing.linear,
}
) * 180 / Math.PI;
return (
<AbsoluteFill
style={{
backgroundColor: "whitesmoke",
justifyContent: "center",
alignItems: "center",
}}
>
<h3>{Math.floor(rotate)}</h3>
<svg
style={{
position: "absolute",
overflow: "visible",
transformBox: "fill-box",
transformOrigin: `${width / 2 - 25} ${height / 2 - 25}`,
}}
transform={`rotate(${rotate})`}
>
<path
d={makeRect({ width: 50, height: 50 }).path}
fill="none"
stroke="red"
strokeWidth={2}
/>
</svg>
{rects.map((r, i) => (
<svg
key={i}
style={{
position: "absolute",
overflow: "visible",
transformBox: "fill-box",
transformOrigin: `center`
}}
viewBox={`0 0 ${width} ${height}`}
transform={`rotate(${rotate + 45 * i}) scale(0.3)`}
>
<path
d={r.path}
fill="none"
stroke="black"
strokeWidth={2}
/>
</svg>
))}
{rects.map((r, i) => (
<svg
key={i}
style={{
position: "absolute",
overflow: "visible",
transformBox: "fill-box",
transformOrigin: `${r.len / 2}px ${r.len / 2}px`,
}}
viewBox={`0 0 ${width} ${height}`}
transform={`translate(${width / 2 - r.len}, ${height / 2}) rotate(${r.len + rotate})`}
>
<path
d={r.path}
fill="none"
stroke="steelblue"
strokeWidth={2}
/>
</svg>
))}
</AbsoluteFill>
);
};
ポイントとして、動画にするためのReactコンポーネントは透過的なものでなければならない。RemotionによるReactコンポーネントのレンダリングは、pupetteerのインスタンスを複数立ち上げたうえで並列しておこなわれるため、インスタンス間で同期しない値に応じてコンポーネントの見た目が変化するような書き方をすると、動画ファイルにまとめたときにフレームが上手くつながらず、動きが無秩序にブレてしまう。
したがって、たとえば、CSSアニメーションやMath.random()などは、基本的にこれらのコンポーネントの中で使ってはいけない。この点についてはFlickeringに詳しく書かれている。
この資料のねらい
この資料では「Remotionでこういうのがつくれそう」ということをなんとなく把握できるような作例をまとめる。
Remotionを使って製作されている動画の例は、次のページにもまとめられているが、これらを見てRemotionを活用できるようになるのはなかなか難しいだろうと思われる。
そこで、もうすこし基本的なクリエイティブコーディングの作例っぽいものを個人的な練習がてらまとめたいと思い、この資料を用意することにした。
個人的な練習なので、必ずしも綺麗なコードを掲載しているわけではない。また、RemotionのAPIについてのわかりやすい説明はしない。Remotionの使い方を知りたい場合、公式のドキュメントを読んでもらいたい。
Footnotes
-
coreでは ない一部のパッケージのなかにはMITライセンスなどが適用されているものもある ↩