Rendervidのデプロイ - ブラウザ、Node.js、クラウド、Dockerレンダリング

はじめに

Rendervidは、ワークフローが要求するあらゆる場所でレンダリングできるように設計されています。ブラウザでの即座のプレビュー、サーバーでのプロダクショングレードのビデオエンコーディング、またはクラウドインフラストラクチャ全体での大規模な並列レンダリングが必要な場合でも、Rendervidは各環境専用のパッケージを提供します。すべてのデプロイターゲットは同じテンプレートシステム とコンポーネントライブラリ を共有しているため、ブラウザで動作するテンプレートは、AWS LambdaやDockerコンテナでも同じように動作します。

このガイドでは、4つのデプロイ環境すべて、各環境で利用可能なレンダリングオプション、およびモーションブラー、GIFエクスポート、パフォーマンス最適化などの高度な機能について説明します。最後には、プロジェクトに適したデプロイパスと、その設定方法を正確に理解できるようになります。

                        +---------------------+
                        |   JSON Template     |
                        +----------+----------+
                                   |
              +--------------------+--------------------+
              |                    |                    |
     +--------v--------+  +-------v--------+  +-------v---------+
     |     Browser      |  |    Node.js     |  |     Cloud       |
     | @rendervid/      |  | @rendervid/    |  | @rendervid/     |
     | renderer-browser |  | renderer-node  |  | cloud-rendering |
     +---------+--------+  +-------+--------+  +-------+---------+
               |                   |                    |
        Canvas / WebM         FFmpeg / Playwright   Parallel Workers
               |                   |                    |
     +---------v--------+  +------v---------+  +-------v---------+
     | MP4, WebM, PNG,  |  | MP4, WebM, MOV,|  | AWS Lambda      |
     | JPEG, WebP       |  | GIF, H.265     |  | Azure Functions |
     +------------------+  +----------------+  | GCP Functions   |
                                               | Docker          |
                                               +-----------------+

ブラウザレンダリング

@rendervid/renderer-browserパッケージは、ユーザーのブラウザ内で完全にクライアントサイドレンダリングを処理します。サーバーインフラストラクチャは必要ありません。これにより、テンプレートからプレビューまでの最速のパスが実現されます。

ブラウザレンダリングを使用する場合

• ビジュアルエディタ でのテンプレート編集中のリアルタイムプレビュー
• ビデオや画像アセットをオンザフライで生成する必要があるWebアプリケーション
• サーバーサイドレンダリングにコミットする前の新しいテンプレートのプロトタイピング
• MP4、WebM、PNG、JPEG、またはWebP出力で十分な軽量エクスポート

インストール

npm install @rendervid/renderer-browser

仕組み

ブラウザレンダリングは、HTML Canvas APIを使用してテンプレートの各フレームを描画します。レンダラーはすべてのシーンとレイヤーをウォークスルーし、アニメーションとイージング関数を適用し、結果をキャンバス要素に合成し、各フレームをキャプチャします。ビデオ出力の場合、フレームはブラウザの組み込みMediaRecorder API（WebM）またはWebAssemblyベースのMP4エンコーダーを使用してエンコードされます。

サポートされている出力フォーマット

コード例

import { BrowserRenderer } from "@rendervid/renderer-browser";

const renderer = new BrowserRenderer();

const template = {
  width: 1920,
  height: 1080,
  fps: 30,
  scenes: [
    {
      duration: 5,
      layers: [
        {
          type: "text",
          text: "Hello from the Browser",
          fontSize: 72,
          color: "#ffffff",
          position: { x: 960, y: 540 },
          animation: {
            entrance: { type: "fadeIn", duration: 1 },
          },
        },
      ],
    },
  ],
};

// プレビュー用にキャンバス要素にレンダリング
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

// MP4としてエクスポート
const mp4Blob = await renderer.render(template, {
  format: "mp4",
  quality: "standard",
});

// 単一フレームをPNGとしてエクスポート
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

ブラウザレンダリングの制限

• FFmpegへのアクセスがないため、H.265/HEVCとMOVは利用できません
• GIFエクスポートには、パレット最適化のためにNode.jsレンダラーが必要です
• 最大解像度は、ブラウザのCanvasサイズ制限に依存します（通常4096x4096または8192x8192）
• レンダリング速度は、クライアントデバイスのCPUとGPUに依存します

Node.jsレンダリング

@rendervid/renderer-nodeパッケージは、完全なFFmpeg統合を備えたサーバーサイドレンダリングを提供します。PlaywrightまたはPuppeteerを使用してヘッドレスブラウザで各フレームをレンダリングし、フレームをFFmpegにパイプしてプロフェッショナルグレードのビデオエンコーディングを行います。

Node.jsレンダリングを使用する場合

• 完全なコーデックサポート（H.264、H.265、VP9）を備えたプロダクションビデオエンコーディング
• 自動パイプラインでの数百または数千のテンプレートのバッチ処理
• テンプレートJSONを受け入れてレンダリングされたビデオを返すREST API
• 自動コンテンツ生成のためのCI/CDパイプライン
• パレット最適化とディザリング制御を備えたGIFエクスポート

インストール

# レンダラーをインストール
npm install @rendervid/renderer-node

# Playwrightをインストール（ブラウザバイナリを含む）
npx playwright install chromium

# FFmpegをインストール（ビデオエンコーディングに必要）
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows（Chocolatey経由）
choco install ffmpeg

サポートされている出力フォーマット

レンダリング品質プリセット

Rendervidは、エンコーディングパラメータを制御する4つの品質プリセットを提供します：

GPUアクセラレーション

Node.jsレンダラーは、エンコーディングをGPUにオフロードするハードウェアアクセラレーションをサポートしています。これにより、多くのレイヤー、高解像度、エフェクトを持つ複雑なテンプレートのレンダリング時間が大幅に短縮されます。

const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/video.mp4",
  hardwareAcceleration: true,
});

GPUアクセラレーションは、互換性のあるNVIDIA（NVENC）、AMD（AMF）、またはIntel（Quick Sync）ハードウェアを搭載したシステムで利用できます。FFmpegは、対応するエンコーダーサポートでコンパイルされている必要があります。

コード例

import { NodeRenderer } from "@rendervid/renderer-node";

const renderer = new NodeRenderer();

const template = {
  width: 1920,
  height: 1080,
  fps: 60,
  scenes: [
    {
      duration: 10,
      layers: [
        {
          type: "video",
          src: "/assets/background.mp4",
          fit: "cover",
        },
        {
          type: "text",
          text: "{{headline}}",
          fontSize: 64,
          color: "#ffffff",
          fontFamily: "Inter",
          position: { x: 960, y: 540 },
          animation: {
            entrance: { type: "slideInUp", duration: 0.8 },
            exit: { type: "fadeOut", duration: 0.5 },
          },
        },
      ],
    },
  ],
  inputs: {
    headline: {
      type: "text",
      label: "Headline",
      default: "Your Product, Elevated",
    },
  },
};

// カスタム入力でレンダリング
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // メディアの読み込みを2秒待機
  inputs: {
    headline: "Summer Sale — 50% Off Everything",
  },
});

console.log(`Rendered: ${result.outputPath}`);
console.log(`Duration: ${result.duration}s`);
console.log(`File size: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

バッチ処理

多くのテンプレートを順番に処理する場合は、バッチAPIを使用します：

import { NodeRenderer } from "@rendervid/renderer-node";

const renderer = new NodeRenderer();

const templates = [
  { template: socialTemplate, inputs: { name: "Alice" }, output: "alice.mp4" },
  { template: socialTemplate, inputs: { name: "Bob" }, output: "bob.mp4" },
  { template: socialTemplate, inputs: { name: "Carol" }, output: "carol.mp4" },
];

for (const job of templates) {
  await renderer.render(job.template, {
    format: "mp4",
    quality: "standard",
    outputPath: `/output/${job.output}`,
    inputs: job.inputs,
  });
}

単一マシンでの真の並列レンダリングについては、以下のDockerローカルレンダリングセクションを参照してください。

クラウドレンダリング

@rendervid/cloud-renderingパッケージは、クラウドインフラストラクチャ全体での分散並列レンダリングを可能にします。1台のマシンでフレームを順番にレンダリングする代わりに、クラウドレンダリングは作業を多くのワーカー関数に分割し、フレームを同時にレンダリングし、それらを最終出力にマージします。

クラウドレンダリングを使用する場合

• 1時間あたり数百のビデオを処理する高スループットパイプライン
• 順次レンダリングが遅すぎる長編コンテンツ
• 10～50倍の高速化が重要な時間に敏感なワークロード
• 予測不可能な需要の急増に対処するための自動スケーリング

アーキテクチャ

+------------------+
|   Your App       |
|  (Coordinator)   |
+--------+---------+
         |
         | 1. ビデオをフレームチャンクに分割
         v
+--------+---------+
|   Chunk Splitter |
+--------+---------+
         |
         |  2. チャンクをワーカーに配信
         v
+--------+---+---+---+---+--------+
|  Worker 1  | Worker 2  | Worker N |
|  (Lambda/  | (Lambda/  | (Lambda/ |
|   Azure/   |  Azure/   |  Azure/  |
|   GCP)     |  GCP)     |  GCP)    |
+-----+------+----+------+----+----+
      |            |           |
      | 3. 各ワーカーがフレームをレンダリング
      v            v           v
+-----+------+----+------+----+----+
|  Frames    |  Frames   |  Frames |
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |     Merger      |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. 最終ビデオに結合
             v
     +-------+---------+
     |  Object Storage  |
     |  S3 / Blob / GCS |
     +------------------+
             |
             | 5. ダウンロードまたは配信
             v
     +-------+---------+
     |   Final Output   |
     |   video.mp4      |
     +------------------+

ステップバイステップの仕組み：

1. コーディネーターがテンプレートを分析し、総時間とFPSに基づいてレンダリングする必要があるフレーム数を決定します。
2. チャンクスプリッターが総フレーム数をチャンクに分割します（例：30fpsビデオの場合、チャンクあたり30フレーム = チャンクあたり1秒）。
3. 各ワーカー関数がチャンク割り当て（開始フレーム、終了フレーム）を受け取り、Node.jsレンダラーを使用してそれらのフレームをレンダリングし、レンダリングされたセグメントをオブジェクトストレージにアップロードします。
4. マージャーがすべてのセグメントをダウンロードし、FFmpegを使用してそれらを最終ビデオに連結します。
5. 最終出力は、クラウドプロバイダーのオブジェクトストレージ（S3、Azure Blob、またはGCS）に保存され、オプションでローカルファイルシステムにダウンロードされます。

クラウド設定

import { CloudRenderer } from "@rendervid/cloud-rendering";

const cloudRenderer = new CloudRenderer({
  provider: "aws", // "aws" | "azure" | "gcp" | "docker"
  quality: "standard", // "draft" | "standard" | "high"
  downloadToLocal: true,
  outputPath: "/output/final.mp4",
});

完全な設定インターフェース：

interface CloudRenderConfig {
  provider: "aws" | "azure" | "gcp" | "docker";
  quality: "draft" | "standard" | "high";
  downloadToLocal: boolean;
  outputPath: string;

  awsConfig?: {
    region: string;
    s3Bucket: string;
    s3Prefix: string;
  };

  azureConfig?: {
    resourceGroup: string;
    storageAccount: string;
    containerName: string;
  };

  gcpConfig?: {
    projectId: string;
    bucketName: string;
    region: string;
  };

  dockerConfig?: {
    volumePath: string;
    workersCount: number;
  };
}

AWS Lambdaセットアップ

AWS Lambdaは最も一般的なクラウドデプロイターゲットです。各ワーカー関数は別々のLambda呼び出しで実行され、大規模な並列処理を可能にします。

前提条件：

• LambdaとS3アクセスを持つAWSアカウント
• AWS CLIが設定されている
• Node.js 18以上のLambdaランタイム

設定：

import { CloudRenderer } from "@rendervid/cloud-rendering";

const renderer = new CloudRenderer({
  provider: "aws",
  quality: "high",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  awsConfig: {
    region: "us-east-1",
    s3Bucket: "my-rendervid-output",
    s3Prefix: "renders/",
  },
});

const result = await renderer.render(template);
console.log(`Rendered in ${result.renderTime}ms`);
console.log(`Workers used: ${result.workersUsed}`);
console.log(`Output: ${result.outputUrl}`);

典型的なAWS Lambda設定：

• メモリ：1024-3008 MB（メモリが多いほどCPUが多く、レンダリングが速い）
• タイムアウト：300秒（5分）
• 一時ストレージ：512 MB - 10 GB
• 同時実行数：100-1000（ワークロードに応じて調整）

Azure Functionsセットアップ

const renderer = new CloudRenderer({
  provider: "azure",
  quality: "standard",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  azureConfig: {
    resourceGroup: "rendervid-rg",
    storageAccount: "rendervidstore",
    containerName: "renders",
  },
});

const result = await renderer.render(template);

Google Cloud Functionsセットアップ

const renderer = new CloudRenderer({
  provider: "gcp",
  quality: "standard",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  gcpConfig: {
    projectId: "my-project-id",
    bucketName: "rendervid-output",
    region: "us-central1",
  },
});

const result = await renderer.render(template);

コスト比較

すべてのクラウドプロバイダーは、開発および低ボリューム本番環境での重要なレンダリングワークロードをカバーする無料枠を提供しています。

パフォーマンスベンチマーク

クラウドレンダリングは、単一マシンの順次レンダリングと比較して10～50倍の高速化を実現します。正確な高速化は、ワーカー数、テンプレートの複雑さ、ビデオの長さに依存します。

長いビデオは、ワーカー起動とフレームマージのオーバーヘッドがより多くのフレームに償却されるため、並列処理からより多くの恩恵を受けます。

Dockerローカルレンダリング

Dockerベースのレンダリングは、クラウドレンダリングと同じ並列レンダリングアーキテクチャを提供しますが、完全にローカルマシンで実行されます。完全に無料で、クラウドアカウントを使用せず、セルフホストセットアップ、開発、クラウドコストなしで並列レンダリングを望むチームに最適です。

Dockerレンダリングを使用する場合

• クラウドプロバイダーアカウントなしの無料並列レンダリング
• ファイアウォールの内側のセルフホストインフラストラクチャ
• クラウドレンダリングワークフローのローカルでの開発とテスト
• 並列処理から恩恵を受けるが自動スケーリングを必要としない中小規模のワークロード

インストール

# Dockerがインストールされ実行されていることを確認
docker --version

# クラウドレンダリングパッケージをインストール
npm install @rendervid/cloud-rendering

設定

import { CloudRenderer } from "@rendervid/cloud-rendering";

const renderer = new CloudRenderer({
  provider: "docker",
  quality: "high",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  dockerConfig: {
    volumePath: "/tmp/rendervid-work",
    workersCount: 8, // 並列実行するDockerコンテナの数
  },
});

const result = await renderer.render(template);
console.log(`Rendered in ${result.renderTime}ms using ${result.workersUsed} workers`);

workersCountの選択： これをマシンで利用可能なCPUコア数に設定します。たとえば、8コアマシンは8ワーカーでうまく機能します。コア数を超えると、スループットを改善せずにコンテキストスイッチングのオーバーヘッドが追加されます。

Dockerアーキテクチャ

+------------------+
|   Coordinator    |
|  (your process)  |
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... Dockerコンテナ
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Shared Volume          |
|    /tmp/rendervid-work    |
+-------------+-------------+
              |
              v
      +-------+--------+
      |     Merger      |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

各Dockerコンテナは、Node.js、Playwright、FFmpegがプリインストールされた自己完結型ワーカーです。ワーカーは共有ボリュームからフレーム割り当てを読み取り、フレームをレンダリングし、結果を書き戻します。コーディネーターは、すべてのセグメントを最終出力にマージします。

モーションブラー

Rendervidは、時間的スーパーサンプリングによるモーションブラーをサポートしています。フレームごとに単一の瞬間をレンダリングする代わりに、レンダラーは時間的にわずかに異なるポイントで複数のサブフレームをキャプチャし、それらをブレンドします。これにより、オブジェクトが露出中に動いたときにカメラが作成する自然なブラーが生成されます。

品質プリセット

設定

const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/cinematic.mp4",
  motionBlur: {
    enabled: true,
    quality: "high", // フレームあたり16サンプル
  },
});

時間的スーパーサンプリングの仕組み

フレームN（モーションブラーなし）：          フレームN（モーションブラーあり、5サンプル）：

  単一の瞬間：                    5つのサブフレームをブレンド：

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- ブレンド結果
                                     +--------+

各サブフレームは、アニメーションタイムラインをわずかな増分（1/fpsをサンプル数で割った値）だけ進めます。サブフレームは、最終フレームを生成するためにアルファブレンドされます。サブフレーム間で移動したオブジェクトは、その動きの経路に沿ってぼやけて表示され、静止要素は鮮明なままです。

パフォーマンスの考慮事項

モーションブラーは、サンプル数に比例してレンダリング時間を増やします。30fpsで10秒のビデオには300フレームあります。high品質（16サンプル）の場合、レンダラーは300フレームの代わりに4,800サブフレームを生成する必要があります。開発中はdraft品質を使用し、最終エクスポートのみhighまたはultraに切り替えてください。

クラウドレンダリングとDocker並列レンダリングは、フレームあたりのコストがワーカー間で分散されるため、モーションブラーでうまく機能します。16ワーカーに分散された16倍のフレームあたりの増加は、1台のマシンでのブラーなしレンダリングとほぼ同じ総レンダリング時間になります。

GIFエクスポート

RendervidのGIFエクスポートは、単純なフレームからGIFへの変換をはるかに超えています。FFmpegのパレット生成パイプラインを使用して、設定可能なディザリング、色数、ファイルサイズ制約を備えた最適化された高品質のアニメーションGIFを生成します。

GIF最適化の仕組み

標準のGIFエンコーディングは、256色の単一グローバルパレットを使用するため、バンディングと色再現性の低下が発生することがよくあります。Rendervidは2パスアプローチを使用します：

1. パス1（palettegen）： すべてのフレームを分析して、ビデオの全色範囲を最もよく表す最適な256色パレットを生成します。
2. パス2（paletteuse）： 滑らかなグラデーションのためのオプションのディザリングを使用して、最適化されたパレットを使用して各フレームを再エンコードします。

最適化プリセット

ディザリングオプション

設定

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // 480x480解像度
    colors: 256,            // 2-256色パレット
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // 5MB以下に自動最適化
    fps: 15,                // 低いFPS = 小さいファイル
  },
});

console.log(`GIF size: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Estimated size was: ${result.estimatedSizeKB} KB`);

ファイルサイズの推定と自動最適化

targetSizeKBを設定すると、Rendervidはレンダリング前に出力ファイルサイズを推定し、ターゲットを満たすようにパラメータ（色数、解像度、FPS）を自動的に調整します。これは、ファイルサイズ制限のあるプラットフォーム（例：Slackの50MB制限、メールの一般的な10MB制約）に特に役立ちます。

// 2MBのメール制約に収まるように自動最適化
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

パッケージアーキテクチャ

Rendervidは、13のパッケージを持つモノレポとして構成されています。各パッケージには焦点を絞った責任があり、すべてのデプロイシナリオをサポートするために組み合わされています。

@rendervid/
├── core                    エンジン、型、検証、アニメーションシステム
│   ├── テンプレートパーサーとバリデーター（AJV + JSON Schema）
│   ├── アニメーションエンジン（40以上のプリセット、30以上のイージング関数）
│   ├── レイヤーシステム（text、image、video、shape、audio、group、lottie、custom）
│   └── シーン管理とトランジション（17種類）
│
├── renderer-browser        クライアントサイドレンダリング
│   ├── Canvasベースのフレームレンダリング
│   ├── WebMエクスポート用のMediaRecorder
│   └── WebAssembly MP4エンコーダー
│
├── renderer-node           サーバーサイドレンダリング
│   ├── Playwright/Puppeteerヘッドレスブラウザ
│   ├── FFmpeg統合（fluent-ffmpeg）
│   ├── GPUアクセラレーション
│   └── GIF最適化パイプライン
│
├── cloud-rendering         マルチクラウドオーケストレーション
│   ├── AWS Lambdaプロバイダー
│   ├── Azure Functionsプロバイダー
│   ├── Google Cloud Functionsプロバイダー
│   ├── Dockerローカルプロバイダー
│   ├── チャンクスプリッターとマージャー
│   └── オブジェクトストレージアダプター（S3、Blob、GCS）
│
├── player                  ビデオ/テンプレートプレイヤーコンポーネント
├── editor                  ビジュアルテンプレートエディタ（Zustand状態）
├── components              事前構築されたReactコンポーネント
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               テンプレート定義と例（100以上）
├── testing                 テストユーティリティ
│   ├── Vitestカスタムマッチャー
│   ├── スナップショットテストヘルパー
│   └── ビジュアルリグレッションユーティリティ
│
├── editor-playground       エディタ開発環境
├── player-playground       プレイヤー開発環境
├── mcp                     Model Context Protocolサーバー
└── docs                    VitePressドキュメントサイト

パッケージの接続方法

• @rendervid/coreは基盤です。他のすべてのパッケージは、テンプレートタイプ、検証、アニメーションシステムのためにそれに依存しています。
• @rendervid/renderer-browserと**@rendervid/renderer-node**は、どちらもコアテンプレートを使用しますが、異なるパイプライン（Canvas vs. FFmpeg）を通じて出力します。
• @rendervid/cloud-renderingはrenderer-nodeをラップし、その作業をクラウド関数またはDockerコンテナに分散します。
• @rendervid/playerと**@rendervid/editor**は、再生とビジュアル編集のためのReactベースのUIパッケージです。エディタは状態管理にZustandを使用します。
• @rendervid/componentsは、テンプレートで使用できる事前構築されたReactコンポーネント （AnimatedLineChart、AuroraBackgroundなど）を提供します。
• @rendervid/testingは、テンプレートを検証するためのVitestマッチャーとスナップショットテストヘルパーを提供します。
• mcpは、Model Context Protocolを介してAIエージェントにRendervidの機能を公開するAI統合 レイヤーです。

テクノロジースタック

Rendervidは、信頼性、パフォーマンス、開発者エクスペリエンスのために選ばれた最新のTypeScriptスタック上に構築されています。

テスト

Rendervidには、テンプレートを検証するためのカスタムVitestマッチャー、スナップショットテストヘルパー、ビジュアルリグレッションユーティリティを提供する専用のテストパッケージ（@rendervid/testing）が含まれています。

Vitestカスタムマッチャー

import { describe, it, expect } from "vitest";
import "@rendervid/testing/matchers";

describe("Product Showcase Template", () => {
  it("should be a valid template", () => {
    expect(template).toBeValidTemplate();
  });

  it("should have the correct dimensions", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("should contain at least one text layer", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("should have animations on the headline", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

スナップショットテスト

スナップショットテストは、テンプレートを画像にレンダリングし、保存された参照と比較します。視覚的な変更があるとテストが失敗するため、意図しない回帰を簡単に捉えることができます。

import { describe, it } from "vitest";
import { renderSnapshot } from "@rendervid/testing";

describe("Template Visual Regression", () => {
  it("should match the reference snapshot at frame 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("should match the reference snapshot at the midpoint", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

CIでのビジュアルリグレッションテスト

ビジュアルリグレッションテストをCI/CDパイプラインに統合して、本番環境に到達する前にレンダリングの変更を捉えます：

# .github/workflows/visual-regression.yml
name: Visual Regression Tests
on: [pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npx playwright install chromium
      - run: npm ci
      - run: npm run test:visual

パフォーマンス最適化

最速のレンダリング時間を得るには、時間がどこに費やされているか、どのレバーを引くことができるかを理解する必要があります。以下は、最も影響力のある最適化戦略です。

1. 適切なデプロイターゲットを選択する

2. テンプレートの複雑さを最適化する

• レイヤー数を減らす。 すべてのレイヤーは独立してレンダリングされます。レイヤーが少ないほど、フレームあたりの描画操作が少なくなります。
• 開発とテスト中はdraft品質を使用する。 最終エクスポートのみhighまたはlosslessに切り替えます。
• プレビュー中はアニメーションを簡素化する。 多くのイージング関数を持つ複雑なキーフレームシーケンスは、フレームあたりの計算を追加します。

3. renderWaitTimeを賢く使用する

renderWaitTimeオプションは、外部メディア（画像、ビデオ、フォント）の読み込みを可能にするためにレンダリングを一時停止します。これを、すべてのアセットが読み込まれることを保証する最小値に設定します。500～2000msの値が一般的です。高すぎる値に設定すると、すべてのフレームで時間が無駄になります。

await renderer.render(template, {
  renderWaitTime: 1000, // 1秒で通常十分
});

4. 並列レンダリングを活用する

10秒を超えるビデオの場合、並列レンダリング（Dockerまたはクラウド）は順次レンダリングよりも高速になります。損益分岐点は、ハードウェアとクラウド構成に依存しますが、経験則として：

• < 10秒： 単一のNode.jsレンダラーで十分
• 10～60秒： 4～8ワーカーのDocker
• 1～10分： 8～16ワーカーのDockerまたはクラウド
• > 10分： 50以上のワーカーのクラウドレンダリング

5. GIF出力を最適化する

GIFは本質的に大きいです。ファイルサイズを管理可能に保つには：

• FPSを10～15に下げる。 ほとんどのGIFは、フレームレートを下げても見栄えが良いです。
• プリセット（social、web、email）を使用して解像度を下げる。
• シンプルなアニメーションの場合、色を128以下に制限する。
• targetSizeKBを使用して、Rendervidにパラメータを自動最適化させる。
• ファイルサイズがグラデーション品質よりも重要な場合は、ディザリング（none）を避ける。

6. GPUアクセラレーションを有効にする

互換性のあるGPUを搭載したマシンでは、ハードウェアアクセラレーションエンコーディングにより、エンコーディングステップのレンダリング時間を2～5倍短縮できます。これは、高解像度（4K以上）および高ビットレート出力に最も影響があります。

7. アセットを事前読み込みする

テンプレートが外部画像やビデオを参照している場合は、レンダリング前にローカルストレージに事前ダウンロードします。レンダリング中のネットワークレイテンシは、レンダリングが遅い、または失敗する最も一般的な原因です。

次のステップ

• Rendervidを始める： インストールと最初のレンダリングについては、Rendervidの概要 をご覧ください
• テンプレートシステムを学ぶ： JSONテンプレート構造、変数、シーン、レイヤー、アニメーションについては、テンプレートシステムドキュメント をお読みください
• コンポーネントを探索する： AnimatedLineChartやAuroraBackgroundなどの事前構築されたReactコンポーネントについては、コンポーネントライブラリ を閲覧してください
• AI統合をセットアップする： MCPを介してClaude Code、Cursor、またはWindsurfをRendervidに接続する方法については、AI統合ガイド をご覧ください
• ソースを表示する： 完全なソースコードと100以上のサンプルテンプレートについては、Rendervid GitHubリポジトリ をご覧ください