【脱・手作業】Reactエンジニアよ、動画編集もコードで「自動課金」せよ！Remotion入門
まさにRemotionは、私たちが普段ウェブサイトを作るのと同じ感覚で、Reactのコンポーネントを組み合わせて「MP4動画」を錬成できるライブラリです。
ゲーム課金に例えるなら、「ガチャの演出をポチポチ手で作るんじゃなくて、スクリプトを組んで全パターンの排出アニメーションを自動生成する」みたいなチート級の効率化が可能になります。
なぜAdobe Premiere Proを使わずにコードを書くのか？ それは「エンジニアにしかできない課金（効率化）」があるからです。
データの流し込みが容易
「ガチャ結果の画像」や「ユーザー名」をAPIから取ってきて、一人一人にパーソナライズされた動画を爆速で作れます。
バージョン管理ができる
動画制作なのに git commit が使えます。あの「動画_最終_本当に最終2.mp4」みたいな地獄のファイル管理から解放されます。
再利用性が高い
一度作ったアニメーション関数は、別のプロジェクトでも使い回せます。これぞコンポーネント指向。
CI/CDに乗る
GitHub Actionsで「PRがマージされたら紹介動画を自動生成する」なんてことも可能です。
まずは、スターターキットを召喚しましょう。ターミナルで以下のコマンドを叩くだけです。
npx create-video@latest
いくつか質問（プロジェクト名やテンプレートなど）に答えると、魔法の杖（プロジェクト一式）が手に入ります。
例えば、「レアキャラが引けた時のキラキラ動画」をReactで作るとこんな感じになります。
動画のサイズやFPS、再生時間を決めます。
import { Composition } from 'remotion';
import { MyVideo } from './MyVideo';
export const RemotionVideo: React.FC = () => {
return (
<>
<Composition
id="GachaWin"
component={MyVideo}
durationInFrames={150} // 30fpsなら5秒
fps={30}
width={1080}
height={1920}
defaultProps={{
characterName: '伝説の剣士',
}}
/>
</>
);
};
useCurrentFrame（今のフレーム数）や interpolate（値を変換する関数）を使うのがコツです。
import { interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
export const MyVideo: React.FC<{ characterName: string }> = ({ characterName }) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// フレーム数に合わせて透明度を0から1へ（SSR確定演出！）
const opacity = interpolate(frame, [0, 30], [0, 1], {
extrapolateRight: 'clamp',
});
return (
<div style={{
flex: 1,
backgroundColor: 'black',
color: 'gold',
fontSize: 80,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
opacity
}}>
<h1> {characterName} GET! </h1>
</div>
);
};
Remotionを使えば、「100人分の個別お祝い動画を作って」と言われても、エンジニアなら for 文を回してレンダリングするだけです。
手作業で動画を作るのが「単発ガチャ」だとしたら、Remotionは「無限に回せる自動マクロ」です。使いこなせば、あなたのプロダクトの価値はSSR級に跳ね上がるはずですよ！
