Zenn
✨

【React】【TypeScript】Remotionで動画作成を試してみた

2023/10/23に公開
React
TypeScript
#
remotion
tech

まえがき

ライブラリRemotionを使って動画作成を試してみます。
動画でも解説しているので、当記事と一緒にご覧ください。

https://youtu.be/TNtTnt97Lds

Remotionとは

Remotionとはプログラミングで動画を作れるライブラリです。

https://www.remotion.dev/

基本はReactベースでTypeScriptを使います。
また、他にもたくさんのテンプレートが用意されています。

https://www.remotion.dev/templates

TypeScriptではなく、JavaScriptでも使えます。
Reactのフレームワークである、Next JS App Routerも使えます。

プロジェクトを新規作成

まずはVS Codeを開いて、ターミナルを呼び出します。
プロジェクトを作成する任意の場所に移動します。
私はデスクトップ上のディレクトリProjectの中にディレクトリRemotionProjectを作成しています。
コマンドcd desktop/project/remotionproject/を実行して移動します。

cd desktop/project/remotionproject/

プロジェクトを作成するディレクトリに移動したら、ターミナルでコマンドnpm init videoを実行します。

npm init video

まずはプロジェクト名を質問されます。
ここではremotion-beginner-ytとします。
ちなみにremotion-beginner-ytは自由に決めていただいて結構です。

次はテンプレートを選択するように指示されます。ここでは、上から4番目のBlankを選択します。

ディレクトリremotion-beginner-ytが作成されて、その中にプロジェクトが作成されます。
最後にVS Codeでプロジェクトを開くかどうか質問されるので、yを入力します。
新たにVS Codeが立ち上がるので、元のウィンドウは消します。
新たにが立ち上がったVS Codeでターミナルを開きます。
README.mdが開いているので閉じておきます。

プロジェクトのコードを確認

Composition.tsx

ファイルComposition.tsxが開いているので見てみましょう。
コンポーネントMyCompositionでreturn null;となっていてnullが返っています。
Compositionとは構成という意味で、コンポーネントMyCompositionの中に動画の構成を作成します。
ただこのままでは、何も表示されないので、以下のコードをComposition.tsxに上書きします。

Composition.tsx
import { AbsoluteFill, useCurrentFrame } from "remotion";
export const MyComposition = () => {
  const frame = useCurrentFrame();
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontSize: 100,
        backgroundColor: "white",
      }}
    >
      The current frame is {frame}.
    </AbsoluteFill>
  );
};

上書きしたコードを見ていきます。
useCurrentFrame()はRemotionのフックで動画のフレーム数を取得します。
変数frameに代入しています。
コンポーネントAbsoluteFillはRemotionでの<div>タグみたいなものと思っておいてください（ドキュメントを見てもよくわかりませんでした）。
コンポーネントAbsoluteFillには、デフォルトで以下のCSSスタイルが当たっています。

  • top: 0
  • left: 0
  • right: 0
  • bottom: 0
  • width: "100%"
  • height: "100%"
  • display: "flex"
  • flexDirection: "column"

そして、追加でAbsoluteFillにはCSSスタイルが当たっています。

  • justifyContent: "center"
  • alignItems: "center"
  • fontSize: 100
  • backgroundColor: "white"

CSSの詳しい説明は割愛します。
次に文字列The current frame is {frame}.がAbsoluteFillで囲ってあります。
{frame}はconst frame = useCurrentFrame();のframeでフレーム数を動的に表示します。

Root.tsx

Root.tsx
import { Composition } from "remotion";
import { MyComposition } from "./Composition";

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="MyComp"
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};

次に、ファイルRoot.tsxを見てみましょう。
コンポーネントRemotionRootの中にコンポーネントCompositionがインポートされています。

そして、コンポーネントCompositionには6つに引数が設定されています。
第1引数はidで一意のID名を指定します。このIDはビデオのプレビューを見る時に使います。
第2引数はcomponentは動画の要素となるコンポーネントを指定します。
ここではファイルComposition.tsxのコンポーネントMyCompositionが指定されています。
第3引数はdurationInFramesはビデオの長さのフレーム数を指定します。
第4引数はfpsは1秒当たりのフレーム数を指定します。
ちなみにfpsとはframe per secondの略です。
第5引数はwidthは動画の画面サイズの横幅を指定します。単位はpxです。
第6引数はheightは動画の画面サイズの縦幅を指定します。単位はpxです。

肝心な再生時間ですが、第3引数はdurationInFramesと第4引数はfpsで計算できます。
計算式は単純でdurationInFramesをfpsで割るだけです。
今回の場合では、60/30で再生時間の長さは2秒となります。

プレビューを確認

コマンドnpm startを実行すると、ウィンドウが開いてビデオのプレビューを見ることができます。

ウィンドウの左側にサイドメニューがあり、MyCompと表示されているはずです。
これはコンポーネントCompositionの第1引数idの値と同じです。
もしファイルRoot.tsxに複数のコンポーネントCompositionがあっても、ID名は一意なので複数の動画を確認できます。
ただ、コード上ではエラーになりませんが、プレビュー画面でエラーが表示されるので注意してください。

動画を出力

プレビューを確認した流れで動画を出力します。
プレビュー画面の右下にRenderのボタンがあります。

ボタンを押すとダイアログが表示されます。
設定項目がありますが、そのまま右上のRender videoのボタンを押します。

ウィンドウの右側にサイドメニューが表示されて、動画が作成されます。

動画の作成が終わったら、クリックすると動画を確認できます。

あとがき

今回はRemotionの基本的な最小構成や、コーディングから動画の作成まで一連の動きを見てきました。
プロジェクトのソースコードをGitHubで公開しています。
参考にしてください。

https://github.com/arafipro/remotion-beginner-yt

GitHubで編集を提案

Discussion