動画編集ソフトの複雑な操作に悩んでいませんか？
Reactのコンセプトは、Learn once, write anywhereです。つまり、一度Reactの流儀を学べば、どのような環境でも実行できるという意味です。例えばReactはもともとWebブラウザ上で動作するために開発されましたが、React Nativeを使えばモバイルアプリケーションを開発できます。

このコンセプトを活かしたフレームワークとして、Remotionがあります。Remotionは、なんとReactを使って動画を生成できるフレームワークになります。動画の生成は通常、動画編集ソフトウェアや専用のライブラリを使う必要がありますが、Remotionを使えばReactのコンポーネントを組み合わせて、動的に動画を作成できるのです。

この記事の内容

  1. Remotionとは？React動画生成フレームワークの特徴
  2. Remotionの始め方とテンプレート選択
  3. AIとの組み合わせでTikTokスタイル動画を自動生成
  4. Remotion基本API・コンポーネント解説
  5. 実用的なデモとカスタマイズ例
  6. Remotionまとめ：次のステップ

Remotionとは？React動画生成フレームワークの特徴

React開発者が慣れ親しんだ技術で動画を作成できる革新的なフレームワークをご紹介します。

RemotionはReactを使い、プログラマブルに動画を生成できるフレームワークになります。コンポーネントを組み合わせて動画を生成するので、動画のテキスト差し替えやアニメーションの追加が非常に簡単です。動画の生成はサーバー上で行いますが、プレビューはブラウザ上で確認できます。

Remotionでは、Reactを採用している理由について以下を挙げています。

  1. Web技術の活用
    CSSやCanvas、SVG、WebGLなどの標準的Web APIを活用できる
  2. プログラミングの活用
    変数、関数、API、数学的アルゴリズムなどが利用できる
  3. Reactの活用
    再利用可能なコンポーネント、強力なコンポジション、高速リフレッシュ、パッケージエコシステムなどが利用できる

Remotionの始め方とテンプレート選択

JavaScript開発者なら5分で動画生成を始められる簡単セットアップをご紹介します。

Remotionを使う際には、以下のコマンドではじめるのが簡単です。

npx create-video@latest

そうすると、テンプレートの選択肢が表示されます。実に数多いので、さまざまなニーズに対応できそうです。

Need to install the following packages:
create-video@4.0.339
Ok to proceed? (y) y

Welcome to Remotion!
? Choose a template: › - Use arrow-keys. Return to submit.
❯   Hello World A "Hello World" starter template 
    Next.js (App dir) SaaS template for video generation apps 
    Next.js (App dir + TailwindCSS) SaaS template for video generation apps 
    Next.js (Pages dir) SaaS template for video generation apps 
    Blank Nothing except an empty canvas 
    Recorder A video production tool built entirely in JavaScript 
    Hello World (JavaScript) The default starter template in plain JS 
    Render Server An Express.js server for rendering videos with Remotion 
    React Router SaaS template for video generation apps 
    React Three Fiber Remotion + React Three Fiber Starter Template 
    Still images Dynamic PNG/JPEG template with built-in server 
    TTS (Azure) Turns text into speech and makes a video 
    TTS (Google) Turns text into speech and makes a video 
    Audiogram Text and waveform visualization for podcasts 
    Music Visualization Text and waveform visualization for podcasts 
    Skia React Native Skia starter 
    Overlay Overlays for video editing software 
    Code Hike Beautiful code animations 
    Stargazer Celebrate your repo stars with a video 
  ↓ TikTok Generate animated word-by-word captions

そして、Hello Worldの例はこちらです。まるで動画エディタのような画面が表示されます。なお、この画面では編集作業が行えないようで、あくまでも設定の確認とプレビュー、レンダリングを行うためのものです。

レンダーを使って動画を生成できます。MP4やMPEG5の他、アニメーションGIFにも対応しています。以下はアニメーションGIFで出力した例です。

日本語にも対応しています。テキスト出力部分を日本語に置き換えてみました。

export const Subtitle: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  return (
    <div style={{ ...subtitle, opacity }}>
      <code>src/Root.tsx</code>を編集して、再読込してください
    </div>
  );
};

テキストの表示場所の調整も簡単です。

プログラマチック動画生成の仕組み

動画の生成はブラウザ上、または npx remotion render というコマンドで行います。初回の実行時に Chrome Headless Shell という文言が出るので、おそらくヘッドレス版のChromeで動画を1フレームずつキャプチャーして、その結果を動画にしているようです。

アニメーションGIFの場合、一旦動画で作成したあと、1フレームずつ画像にしてから結合するという仕組みのようです。

AIとの組み合わせでTikTokスタイル動画を自動生成

最新のAI技術と組み合わせることで、自動字幕生成やキャプション付き動画の大量生産が可能になります。

Remotionでは、いくつかのAI機能が提供されています。まず、メニューにはAsk AI機能が用意されています。これはCrawl Chatというサービスを使って、Remotionのドキュメントについて質問できる仕組みです。

もう一つはTikTok Generate animated word-by-word captionsというデモで見られるサービスですが、動画をWhisperのライブラリを使って、テキスト起こしを行い、そのテキストを動画にキャプションとして表示する機能です。これにより、単語単位で動画の上にテキスト表示します。YouTube ShortやTikTokのような短い動画に適しています。

こうしたAIとの組み合わせも、ReactやJavaScriptの豊富なエコシステムがあってこそでしょう。

Remotion基本API・コンポーネント解説

Reactに慣れた開発者なら直感的に理解できるAPIとコンポーネントの使い方を解説します。

Remotionの使い方としては、 useVideoConfigの利用があります。FPSや動画の幅・高さ、フレーム数などの設定を取得できます。以下はその例です。

import {AbsoluteFill, useVideoConfig} from 'remotion';

export const MyComposition = () => {
  const {fps, durationInFrames, width, height} = useVideoConfig();

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 60,
        backgroundColor: 'white',
      }}
    >
      This {width}x{height}px video is {durationInFrames / fps} seconds long.
    </AbsoluteFill>
  );
};

音声の場合には Audio コンポーネントを利用します。

import {AbsoluteFill, Audio, staticFile} from 'remotion';

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio.mp3')} />
    </AbsoluteFill>
  );
};

他の動画との組み合わせは OffthreadVideo コンポーネントを利用します。

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} />;
};

実用的なデモとカスタマイズ例

豊富なデモテンプレートから学ぶ、実際のプロジェクトで活用できる動画生成のアイデアをご紹介します。

たくさんのデモが用意されていますので、ぜひ実際に試してみてください。以下は、コードをアニメーションしながら表示するデモです。

実際に生成された動画は以下です。

自分で一から組み上げることもできますが、デモを生成して、そこからカスタマイズしていくのがおすすめです。

Remotionまとめ：次のステップ

Remotionを使うと、ユーザーにテキストや画像をアップロードしてもらって、そこから動的に動画を生成すると言った機能が実現できます。動画はバイナリファイルなので編集が面倒に思えますが、Remotionを使えばReactコンポーネントを利用してダイナミックに操作できます。

React開発者にとってRemotionは革新的なツールです。従来の動画編集ソフトでは難しかった大量の動画生成や、データに基づいた動的な動画作成が簡単に実現できます。特に、マーケティング動画の自動生成、個人向けカスタム動画の作成、教育コンテンツの制作などで威力を発揮するでしょう。

次のステップ

  • 公式ドキュメント（https://www.remotion.dev/）で最新機能を確認
  • TikTokテンプレートでAI自動字幕機能を試してみる
  • 自社プロジェクトでの動画自動生成の可能性を検討
  • RemotionのDiscordコミュニティに参加して情報交換

ぜひRemotionを使って、動画生成の可能性を広げてみてください。

Remotion | Make videos programmatically

よくある質問

Q: Remotionは商用利用できますか？
A: 個人・非営利・小規模チーム（3人まで）は無料です。大規模組織は商用ライセンスが必要です。

Q: どんな動画形式に対応していますか？
A: MP4、WebM、GIF、静止画（PNG/JPEG）などに対応しています。

Q: 既存のReactプロジェクトに組み込めますか？
A: はい、既存プロジェクトにRemotionを追加できます。専用のPlayerコンポーネントも提供されています。

Q: 動画生成にはどのくらい時間がかかりますか？
A: 動画の長さと複雑さによりますが、数秒〜数分程度です。クラウドレンダリング（Lambda）で高速化も可能です。

Q: プログラミング初心者でも使えますか？
A: Reactの基本知識があれば使えますが、JavaScriptとReactの理解は必要です。

Q: 他の動画生成ツールとの違いは？
A: コードベースでの動画生成、Reactエコシステムの活用、プログラマチックな動画操作が最大の特徴です。