0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@easegis

【Remotion】動画作成が面倒だったのでビルダーパターンで宣言的に書けるライブラリを作った

0
Posted at

個人開発をしていると、サービスの宣伝動画を作りたくなる瞬間ってありますよね。

自分の場合、子供向け読み聞かせサービス「ねむねむ」の宣伝動画を作ろうと思い立って、Remotionに手を出してみたんですが...思ったより複雑だった。

「これ、毎回こんな感じでコード書くの大変だな、、、」

ということで、今後のことも考えて宣言的に動画を組み立てられるビルダーライブラリを作りました。

Remotionとは

Remotionは、ReactとTypeScriptで動画を作成できるフレームワークです。

// Remotionの基本的な書き方
import { useCurrentFrame, useVideoConfig } from 'remotion';

export const MyVideo: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <div style={{ opacity: frame / fps }}>
      Hello World
    </div>
  );
};

フレームベースでアニメーションを制御できるので、プログラマーにとっては直感的なんですが、実際に「動画」を作ろうとすると、シーンの管理やテロップの配置、トランジションなど、考えることが多い。

課題：Remotionをそのまま使うと複雑になりがち

実際に宣伝動画を作ろうとすると、こんな構成が必要になります：

  • オープニング（タイトル表示）
  • 複数のシーン（動画・画像の切り替え）
  • 各シーンにテロップ（出現・消失エフェクト付き）
  • シーン間のトランジション
  • BGMと効果音
  • エンディング

これをRemotionのSequenceやSeriesを駆使して書くと、だんだんネストが深くなっていくんですよね。シーンの順番を入れ替えたいときとか、durationFromの計算が、、、あー！ってなる。

解決策：Remotion Movie Builder

そこで作ったのが「Remotion Movie Builder」です。

ビルダーパターンで宣言的に動画を構築できます。

import { Movie, Effects, TelopPresets, rmbProps } from './lib';

const buildMovie = () => {
  const movie = new Movie({
    size: 'shorts', // 1080x1920 縦型動画
    telop: {
      effects: TelopPresets.spring, // デフォルトのテロップエフェクト
      charDuration: 0.3,            // 1文字あたりの表示時間
      overlay: { color: '0,0,0', type: 'shadow', padding: 20, opacity: 0.8 },
      position: 'bottom 30%',       // テロップの表示位置
    },
  });

  // BGM
  movie.bgm('bgm.mp3', { volume: 0.05, ducking: 0.01 });

  // オープニング
  const opening = movie.opening({
    image: 'background.webp',
    effect: Effects.fadeOut,
  });
  opening
    .telop('ねむねむ')
    .telop('子供のための読み聞かせサービス');

  // シーン1
  const scene1 = movie.scene('scene1.mp4', {
    trimBefore: 8,  // 8秒位置から動画を再生
    effect: [Effects.fadeIn, Effects.fadeOut],
    volume: 0.3,
  });
  scene1
    .telop('無料で使える読み聞かせアプリ')
    .telop('AIが毎日新しいお話を生成');

  // シーン2（トランジション付き）
  const scene2 = movie.scene('scene2.mp4', {
    trimBefore: 13,
    effect: [Effects.fadeIn, Effects.fadeOut],
    volume: 0.3,
  });
  scene1.transitionTo(scene2);

  scene2
    .telop('英語のおやすみ音声も収録')
    .telop('眠りながら、自然と英語耳に');

  // エンディング
  const ending = movie.ending({
    image: 'background.webp',
    effect: Effects.fadeIn,
    telop: { effects: TelopPresets.blurGlow },
  });
  ending
    .telop('詳しくは概要欄をチェック')
    .telop('ねむねむで、穏やかなおやすみを');

  return movie.build();
};

export const movieData = buildMovie();
export const movie = rmbProps(movieData);

素材となる画像や動画の準備は必要ですが、編集作業はこれだけで、オープニング → シーン1 → トランジション → シーン2 → エンディング という動画が完成します。

このコードで実際に作成した動画がこちらです。

主な機能

シーンの構築

画像や動画を選んでシーンを構築できます。

// 動画シーン
movie.scene('video.mp4');

// 画像シーン
movie.scene('image.jpg', { duration: 5 });

テロップの挿入

シーン中に表示したいテキストを書き込むだけ。テロップの表示時間は文字の長さから自動計算されます。

scene
  .telop('最初のテロップ')
  .telop('次のテロップ')
  .telop('その次のテロップ');

動画サイズの指定

横型動画（YouTube向け）と縦型動画（Shorts/Reels/TikTok向け）に対応しています。

// 横型動画（デフォルト）
new Movie();  // 1920x1080

// 縦型動画
new Movie({ size: 'shorts' });  // 1080x1920

その他の機能（トランジション、ワイプ、エフェクト、カラープリセットなど）については、リポジトリのデモを参照してください。

使い方

インストール

# リポジトリをクローン
git clone https://github.com/FatmanBros/remotion-movie-builder.git
cd remotion-movie-builder

# 依存関係をインストール
npm install

# Remotion Studioを起動
npm start

動画の作成

src/compositions/ ディレクトリに新しいファイルを作成します。

// src/compositions/MyVideo.tsx
import { Movie, Effects, TelopPresets, rmbProps } from '../lib';

const buildMovie = () => {
  const movie = new Movie({ telop: { effects: TelopPresets.dropGlow } });

  movie.scene('public/video.mp4')
    .telop('Hello World!');

  return movie.build();
};

export const movieData = buildMovie();
export const movie = rmbProps(movieData);

Root.tsxへの登録

作成したムービーをsrc/Root.tsxに登録します。

// src/Root.tsx
import { RmbComposition } from './lib';
import { movie } from './compositions/MyVideo';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <RmbComposition id="MyVideo" {...movie} />
    </>
  );
};

レンダリング

# プレビュー
npm start

# MP4に出力
npm run render

デモ

リポジトリには10種類のデモが含まれています。

デモ 内容
Demo1 基本的なシーン構成
Demo2 画像シーン
Demo3 テロップエフェクト
Demo4 トランジション
Demo5 ワイプ（PiP）
Demo6 複数テロップ
Demo7 テロップカラー
Demo8 オーバーレイ
Demo9 固定要素
Demo10 表示モード

npm startで起動すると、Remotion Studio上でこれらのデモを確認できます。

まとめ

Remotionは素晴らしいフレームワークですが、動画を「作品」として組み立てようとすると、シーン管理やタイミング調整が煩雑になりがちです。

Remotion Movie Builderを使えば、ビルダーパターンで宣言的に動画を構築できます。

  • シーンの追加・削除・並べ替えが簡単
  • エフェクトやトランジションがプリセットで用意されている
  • テロップの表示時間が自動計算される
  • 型安全（TypeScript完全対応）

個人開発の宣伝動画や、プロダクト紹介動画を作りたい方は、ぜひ試してみてください。

リポジトリ

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?