mvanhorn/clawdbot-skill-remotion-server

Remotion Server

任意のLinuxサーバー上で、ヘッドレスモードで動画をレンダリングできます。Remotion v4（最新版：v4.0.435）を使用。MacやGUIは不要です。 Chrome Headless Shell がすべてのレンダリングを処理し、VPS、Raspberry Pi、CIランナー、Dockerコンテナ、Node.jsが動作するあらゆる環境で動作します。 FFmpeg は各Remotionプロジェクトに組み込まれており、個別のFFmpegインストールは不要です。

セットアップ（1回のみ）

Chrome Headless Shell 用のブラウザ依存ライブラリをインストールします：

bash {baseDir}/scripts/setup.sh

このスクリプトは、ヘッドレスLinux上のChromeが必要とするシステムライブラリ（libnss3、libatk、libgbm、libcups2など）をインストールします。 Ubuntu 22.04/24.04、Debian、Amazon Linux に対応しています。

セットアップの確認

セットアップ後、Chrome Headless Shell が正しく動作することを確認します：

npx @remotion/chrome-headless-shell --help

これが失敗する場合、システム依存関係が不足しています。setup.shを再実行するか、手動でインストールしてください：

# Ubuntu/Debian
sudo apt install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgbm1 \
  libpango-1.0-0 libcairo2 libxcomposite1 libxdamage1 libxfixes3 libxrandr2

# Amazon Linux
sudo yum install -y mesa-libgbm libX11 libXrandr libdrm libXdamage libXfixes \
  libxkbcommon dbus-libs libXcomposite alsa-lib nss pango cups-libs at-spi2-core atk

クイックスタート

プロジェクトの作成

bash {baseDir}/scripts/create.sh my-video
cd my-video

動画のレンダリング

npx remotion render MyComp out/video.mp4

ブラウザでのプレビュー（開発モード）

npx remotion preview

ローカルの開発サーバーが起動し、ビデオタイムラインのシーク、プロパティの調整、レンダリング前のイテレーションが可能になります。

レンダリングオプション（5つの方法）

Remotion v4 では5つのレンダリングバックエンドを提供しています。インフラストラクチャと規模に応じて選択してください。

1. ローカルCLI（デフォルト）

Node.js が動作するマシン上でレンダリングします。開発、CI、シングルサーバーデプロイに最適です。

npx remotion render MyComp out/video.mp4

2. Remotion Lambda

AWS Lambda 関数全体にレンダリングを分散します。フルHD動画を最大約80分までレンダリング可能。非同期通知用のWebhookとビルトインのコスト見積もりをサポートします。

npm install @remotion/lambda

# Lambda関数のデプロイ
npx remotion lambda functions deploy

# Lambdaでのレンダリング
npx remotion lambda render MyComp

# レンダリング前のコスト見積もり
npx remotion lambda still --estimate-price MyComp

主な機能：

• 複数のLambda呼び出しにわたる分散レンダリング
• レンダリング完了時のWebhookコールバック
• レンダリング前のコスト見積もり
• S3出力ストレージ

詳細：https://www.remotion.dev/docs/lambda

3. @remotion/vercel（新規 - 2026年2月）

Vercel Sandbox 内でレンダリングします。最もシンプルな設定で、AWSアカウントは不要です。

npm install @remotion/vercel

Remotion プロジェクトを Vercel にデプロイし、API経由でレンダリングをトリガーします。すでにVercelを使用していて、設定不要のレンダリングを求めるチームに最適です。

詳細：https://www.remotion.dev/docs/vercel

4. Cloud Run（アルファ版）

Google Cloud Run 上でレンダリングします。長い動画の場合、Lambdaよりもコンピューティングコストが低くなります。

npm install @remotion/cloudrun
npx remotion cloudrun render MyComp

詳細：https://www.remotion.dev/docs/cloudrun

5. EC2でのGPUレンダリング（v4.0.248以降）

EC2 GPU インスタンス上でのハードウェアアクセラレーションレンダリング。複雑なアニメーションや3Dコンテンツを含むコンポジションに最速のオプションです。

GPU搭載のEC2インスタンス（例：g4dn.xlarge）と適切なドライバが必要です。

詳細：https://www.remotion.dev/docs/gpu

ソーシャルメディアフォーマットプリセット

コンポジション作成時に、これらの解像度とアスペクト比のプリセットを使用します。npx remotion render に --width と --height を渡すと、コンポジションのデフォルト値を上書きできます。

TikTok / YouTube Shorts / Instagram Reels（9:16 縦長）

npx remotion render ChatDemo out/tiktok.mp4 --width=1080 --height=1920

• 解像度：1080x1920
• アスペクト比：9:16
• 推奨FPS：30
• 最大長：60秒（TikTok）、60秒（Shorts）、90秒（Reels）

YouTube 標準（16:9 横長）

npx remotion render MyComp out/youtube.mp4 --width=1920 --height=1080

• 解像度：1920x1080
• アスペクト比：16:9
• 推奨FPS：30 または 60

Instagram 投稿（1:1 正方形）

npx remotion render MyComp out/instagram-post.mp4 --width=1080 --height=1080

• 解像度：1080x1080
• アスペクト比：1:1
• 最大長：60秒

Twitter/X 動画（16:9 横長）

npx remotion render MyComp out/twitter.mp4 --width=1280 --height=720

• 解像度：1280x720
• アスペクト比：16:9
• 最大ファイルサイズ：512MB
• 最大長：140秒

フォーマットプリセットのまとめ

プラットフォーム	幅	高さ	比率	FPS
TikTok	1080	1920	9:16	30
YouTube Shorts	1080	1920	9:16	30
Instagram Reel	1080	1920	9:16	30
Instagram 投稿	1080	1080	1:1	30
YouTube	1920	1080	16:9	30
Twitter/X	1280	720	16:9	30

コード内で Composition を構築する場合、width、height、fps を直接設定します：

<Composition
  id="TikTokPromo"
  component={PromoVideo}
  durationInFrames={30 * 15}
  fps={30}
  width={1080}
  height={1920}
/>

新パッケージ（v4.0.429以降）

@remotion/sfx（v4.0.429）

クイックオーディオキューのためのビルトイン効果音：

import { Sfx } from "@remotion/sfx";

// 利用可能なサウンド：ding、bruh、vineBoom
<Sfx name="ding" />
<Sfx name="bruh" />
<Sfx name="vineBoom" />

@remotion/starburst（v4.0.435）

スターバースト形状とアニメーションコンポーネント：

import { Starburst } from "@remotion/starburst";

<Starburst
  points={12}
  innerRadius={50}
  outerRadius={100}
  fill="yellow"
/>

@remotion/shapes（更新版 v4.0.432）

幾何学的形状プリミティブ。Arrow形状が新たに含まれました：

import { Triangle, Star, Pie, Arrow } from "@remotion/shapes";

<Triangle length={100} direction="up" fill="red" />
<Star points={5} innerRadius={30} outerRadius={60} fill="gold" />
<Pie radius={50} progress={0.75} fill="blue" />
<Arrow length={150} direction="right" fill="black" />

@remotion/captions

動画コンテンツ用のアニメーションキャプション。単語レベルのタイミングと複数のアニメーションスタイルをサポート：

import { Caption } from "@remotion/captions";

<Caption
  text="Hello world"
  startFrame={0}
  endFrame={60}
  style="bounce"
/>

@remotion/player

ファイルにレンダリングすることなく、ReactアプリにRemotion動画を埋め込みます。コントロール付きのインタラクティブ再生：

import { Player } from "@remotion/player";

<Player
  component={MyComp}
  durationInFrames={300}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  controls
/>

Mediabunny（フォーマット変換）

Mediabunny は @remotion/media-parser と @remotion/webcodecs の後継です。GPUアクセラレーションによるフォーマット変換がRemotionに組み込まれています。

対応入力：MP4, WebM, MOV, MKV, M3U8, TS, AVI, MP3, FLAC, WAV, M4A, AAC 対応出力：MP4, WebM, WAV

import { convertMedia } from "@remotion/media-converter";

await convertMedia({
  src: "input.mov",
  container: "mp4",
});

Remotion スキル（2026年1月）

プロンプトから動画へのワークフロー向けAIエージェント統合。Claude Codeが自然言語の説明からRemotionコンポジションを生成できます。

「'新機能'というアニメーションテキストがスプリングアニメーションでフェードインする15秒のTikTok動画を作成し、
 次に3つの箇条書きを表示してください」

エージェントはTSXコンポジションを生成し、登録し、レンダリングします。すべて単一のプロンプトから実行されます。

テンプレート

すべてのテンプレートは create.sh スクリプトによって作成されます。各テンプレートは、TypeScript、TailwindCSS 4.2.0、およびテンプレートコンポーネントを含む完全なRemotionプロジェクトを生成します。

Chat Demo（Telegramスタイルの電話モックアップ）

電話モックアップ内でアニメーションチャットバブルが順に表示されます。製品デモ、ボット紹介、カスタマーサポートのハイライトに最適です。

bash {baseDir}/scripts/create.sh my-chat --template chat
cd my-chat

src/messages.json を編集して会話をカスタマイズします：

[
  {"text": "パスワードをリセットするにはどうすればいいですか？", "isUser": true},
  {"text": "設定 > アカウント > パスワードリセット に進んでください。約30秒でメールが届きます。", "isUser": false},
  {"text": "わかりました、ありがとう！", "isUser": true}
]

TikTok解像度でレンダリング：

npx remotion render ChatDemo out/chat-tiktok.mp4 --width=1080 --height=1920

デフォルトのコンポジション：1080x1920（縦長）、30fps、長さはメッセージ数から自動計算。

Title Card（アニメーションイントロ）

スプリングアニメーションでフェードインするタイトル。動画のイントロ、セクションヘッダー、またはスタンドアロンの告知カードとして使用します。

bash {baseDir}/scripts/create.sh my-intro --template title
cd my-intro

src/TitleCard.tsx の defaultProps を編集してカスタマイズします：

defaultProps={{ title: "製品ローンチ", subtitle: "2026年3月公開予定" }}

YouTube解像度でレンダリング：

npx remotion render TitleCard out/title-youtube.mp4 --width=1920 --height=1080

デフォルトのコンポジション：1920x1080（横長）、30fps、3秒。

Blank（スターターテンプレート）

カスタムコンポジションをゼロから構築するための空のキャンバス。

bash {baseDir}/scripts/create.sh my-project
cd my-project

フレームカウンターが表示されます。src/Composition.tsx を独自のコンポーネントに置き換えてください。

カスタムテンプレートの作成

新しいテンプレート（例：プロモーション、コードウォークスルー、統計ダッシュボード、カウントダウン、お客様の声）を追加するには、Remotionプリミティブを使用するReactコンポーネントを作成します：

import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig, interpolate, Sequence, Img, Audio } from "remotion";

テンプレートの主要なRemotion API：

• useCurrentFrame() - アニメーション用の現在のフレーム番号
• spring({ frame, fps, config }) - スプリング物理アニメーション
• interpolate(frame, inputRange, outputRange) - 線形補間
• <Sequence from={30}> - 子コンテンツをNフレーム遅延
• <Img src={staticFile("logo.png")} /> - 静的アセットの読み込み
• <Audio src={staticFile("music.mp3")} /> - 背景オーディオの追加
• <AbsoluteFill> - 全画面コンテナ

コンポジションを src/Root.tsx に登録します：

import { Composition } from "remotion";
import { PromoVideo } from "./PromoVideo";

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="PromoVideo"
        component={PromoVideo}
        durationInFrames={300}
        fps={30}
        width={1080}
        height={1920}
      />
    </>
  );
};

サムネイル生成

Remotion の still コマンドを使用して、単一フレームを静止画像として抽出します：

npx remotion still MyComp out/thumbnail.png

オプション

# 特定のフレーム（デフォルトはフレーム0）
npx remotion still MyComp out/thumb.png --frame=45

# JPEG出力
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg

# JPEG品質（0-100）
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg --jpeg-quality=90

# カスタム解像度
npx rem