RemotionがAgent Skillsをリリースしました。これにより、AIによる動画制作のすべてが変わります。 ```bash npx skills add remotion-dev/skills ``` たったこれだけです。この一つのコマンドで、Claude CodeはRemotionのReactベースの動画フレームワークを隅々まで理解する動画制作のエキスパートになります。 ## Remotion Agent Skillsとは？ [Agent Skills](https://agentskills.io/home)は、Claude CodeのようなAIエージェントに特定のツールやフレームワークを適切に使用する方法を教える「取扱説明書」です。公式のRemotionスキルは、Claudeに以下の深い知識を与えます。 * Remotionのコンポーネントアーキテクチャ（``、``、``） * アニメーションAPI（`interpolate`、`spring`、`useCurrentFrame`） * タイミング、パフォーマンス、レンダリングに関するベストプラクティス * イントロ、トランジション、エフェクトの一般的なパターン スキルがなければ、Claudeはバグのある、または不正確なRemotionコードを生成する可能性があります。スキルがあれば、一度でプロダクション品質の動画コンポーネントを作成します。 💡**動画生成APIを構築したいですか？** このチュートリアルでは、オンデマンドの動画レンダリングのためのRESTエンドポイントの作成についても説明しています。Apidogを使用して、自動テストとリアルタイムコラボレーションで動画生成APIを設計、テスト、ドキュメント化しましょう。 ボタン
## 構築するもの このチュートリアルでは、以下のことを行います。 * Remotion Agent Skillsをワンコマンドでインストールする * 自然言語を使って完全なイントロ動画を生成する * 会話を通じてアニメーションを調整する * 動画をMP4としてレンダリングする * Remotion Lambdaでスケールする（オプション） ## TL;DR ```bash # 1. Remotionプロジェクトを作成する npx create-video@latest my-video && cd my-video # 2. Agent Skillsをインストールする（重要なステップ！） npx skills add remotion-dev/skills # 3. Claude Codeを起動し、動画を説明する claude # 4. レンダリングする npx remotion render out/video.mp4 ``` これが全ワークフローです。[Agent Skills](https://skills.sh/)は、Claudeに適切なRemotionコードの書き方を教えるので、Reactコンポーネントのデバッグに時間を費やすのではなく、作りたいものを記述することに集中できます。 ## 前提条件 始める前に、以下のものがあることを確認してください。
| 要件 | バージョン | 確認コマンド |
|---|---|---|
| Node.js | 18+ | node --version |
| npm または yarn | 最新 | npm --version |
| Claude Code | 最新 | claude --version |
| コードエディタ | VS Codeを推奨 | - |
また、以下のものも必要です。 * コマンドラインの基本的な知識 * Reactの基本的な理解（あると良いが必須ではない） ## ステップ1：Remotionをインストールし、プロジェクトを作成する まず、公式CLIを使用して新しいRemotionプロジェクトを作成します。 ### 1.1 ターミナルを開いて実行します。 ```bash npx create-video@latest my-first-video ```
### 1.2 プロンプトが表示されたら、以下のオプションを選択します。 ``` ? プロジェクト名を何にしますか？ my-first-video ? テンプレートを選択してください: blank ? TypeScriptを使用しますか？ Yes ? 依存関係をインストールしますか？ Yes ``` ### 1.3 プロジェクトに移動します。 ```bash cd my-first-video ``` ### 1.4 インストールを確認します。 ```bash npm run dev ``` これにより、ブラウザで`http://localhost:3000`に**Remotion Studio**が開きます。下部にタイムラインのある空白のキャンバスが表示されるはずです。 **期待される結果**：Remotion Studioインターフェースが表示されたブラウザウィンドウ。
## ステップ2：Remotion Agent Skillsをインストールする ここが魔法が起こる部分です。一つのコマンドで、Claude CodeにRemotionの専門知識が与えられます。 ### 2.1 プロジェクトディレクトリで、以下を実行します。 ```bash npx skills add remotion-dev/skills ``` `Added skill: remotion`が表示されたら、インストールは成功です。
### 2.2 何が起こったのでしょうか？ このコマンドは、プロジェクトの`.claude/skills/remotion/`にスキルを追加しました。このフォルダーには、Claudeに適切なRemotionコードの書き方を教える取扱説明書である`SKILL.md`が含まれています。 ### 2.3 インストールを確認します。 スキルファイルが存在することを確認します。 ```bash ls .claude/skills/remotion/ ``` **期待される出力**： ``` SKILL.md ``` ### 2.4 プロジェクト構造は次のようになります。 ``` my-first-video/ ├── .claude/ │ └── skills/ │ └── remotion/ │ └── SKILL.md # ClaudeにRemotionを教える「頭脳」 ├── src/ │ ├── Root.tsx │ ├── Composition.tsx │ └── index.ts ├── public/ ├── remotion.config.ts ├── package.json └── tsconfig.json ``` **プロのヒント**：スキルが認識されない場合は、`npx skills add remotion-dev/skills`を再度実行するか、Claude Codeを再起動してください。 ## ステップ3：Claude Codeで最初の動画を作成する 次に、Claude Codeを使用して完全な動画を生成しましょう。プロジェクトディレクトリでターミナルを開きます。 ### 3.1 Claude Codeを起動します。 ```bash claude ``` ### 3.2 動画を説明します。 Claude Codeに以下のプロンプトを入力します。 ``` 「DevFlow」というテクノロジー企業向けの5秒間のイントロ動画を作成してください。 要件： - 解像度：1920x1080 - フレームレート：30fps - 背景：#1a1a2eから#16213eへのダークグラデーション - アニメーションシーケンス： 1. ロゴテキスト「DevFlow」が不透明度0から1にフェードイン（0-30フレーム） 2. ロゴがバウンス効果でわずかに拡大（15-45フレーム） 3. タグライン「Build faster. Ship smarter.」がロゴの下にフェードイン（45-90フレーム） 4. 残りのフレームはすべてそのまま表示 Interフォントファミリーを使ったモダンでクリーンなタイポグラフィを使用してください。 ```
### 3.3 Claude Codeがファイルを生成します。 Claude Codeは以下のファイルを生成または変更します。 **src/Root.tsx** - コンポジション定義： ```tsx import React from 'react'; import { Composition } from 'remotion'; import { DevFlowIntro } from './DevFlowIntro'; export const RemotionRoot: React.FC = () => { return ( <> ); }; ``` **src/DevFlowIntro.tsx** - メイン動画コンポーネント： ```tsx import React from 'react'; import { AbsoluteFill, useCurrentFrame, interpolate, spring, useVideoConfig, } from 'remotion'; export const DevFlowIntro: React.FC = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // ロゴのフェードイン（0-30フレーム） const logoOpacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp', }); // ロゴのバウンススケール（15-45フレーム） const logoScale = spring({ frame: frame - 15, fps, from: 1, to: 1.1, config: { damping: 10, stiffness: 100, }, }); // タグラインのフェードイン（45-90フレーム） const taglineOpacity = interpolate(frame, [45, 90], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return (
= 15 ? logoScale : 1})`, }} > DevFlow
Build faster. Ship smarter. ); }; ``` ### 3.4 動画をプレビューします。 Remotion Studioが実行中でない場合は、起動します。 ```bash npm run dev ``` コンポジションドロップダウンから「devflow-intro」を選択します。タイムラインを使って動画をスクラブし、アニメーションをプレビューします。
**期待される結果**：フェードインするロゴとタグラインアニメーションでイントロ動画が再生されます。 ## ステップ4：フォローアッププロンプトで動画を調整する Claude Codeの力は反復的な調整にあります。動画を改善しましょう。 ### 4.1 パーティクル背景エフェクトを追加し、配色を変更します。 ``` 小さな白い点がゆっくりと上方に浮遊する、控えめなアニメーションのパーティクル背景を追加してください。 最小限にしてください - 約20-30個のパーティクル、非常に低い不透明度（0.1-0.2）、そしてゆっくりとした動きで。 グラデーションを青紫のテーマに変更してください： - 開始色：#0f0c29 - 中間色：#302b63 - 終了色：#24243e 3ストップのグラデーションにしてください。 ```
### 4.3 効果音のキューを追加する（オプション）： ``` ロゴがバウンスするときに「ヒューッ」という効果音を再生するべき場所にマーカーコメントを追加してください。 音声は後で追加します。 ``` フィードバックを与えるたびに、Claude Codeは関連するコードを変更し、Remotion Studioですぐにその変更をプレビューできます。 ## ステップ5：プロップスで動的なコンテンツを追加する 動的なプロップスを受け入れることで、動画を再利用可能にします。これにより、異なるコンテンツで複数の動画を生成できます。 ### 5.1 Claude Codeにプロップスを追加するように依頼します。 ``` 動画をリファクタリングして、以下のプロップスを受け入れるようにしてください： - companyName（文字列）- 「DevFlow」を置き換えます - tagline（文字列）- タグラインテキストを置き換えます - primaryColor（文字列）- メインのグラデーション色 - secondaryColor（文字列）- セカンダリのグラデーション色 タイプセーフティのためにZodスキーマ検証も追加してください。 ``` ### 5.2 Claude Codeがスキーマを生成します。 **src/DevFlowIntro.tsx**（更新）： ```tsx import { z } from 'zod'; export const introSchema = z.object({ companyName: z.string().default('DevFlow'), tagline: z.string().default('Build faster. Ship smarter.'), primaryColor: z.string().default('#0f0c29'), secondaryColor: z.string().default('#24243e'), }); type IntroProps = z.infer; export const DevFlowIntro: React.FC = ({ companyName, tagline, primaryColor, secondaryColor, }) => { // ... コンポーネントはこれらのプロップスを使用します }; ``` **src/Root.tsx**（更新）： ```tsx import { Composition } from 'remotion'; import { DevFlowIntro, introSchema } from './DevFlowIntro'; export const RemotionRoot: React.FC = () => { return ( <> ); }; ``` ### 5.3 Remotion Studioで異なるプロップスをテストします。 Remotion Studioで、「**Props**」パネルをクリックし、値を変更します。 ```json { "companyName": "Apidog", "tagline": "Design. Debug. Test. Document.", "primaryColor": "#1e3a5f", "secondaryColor": "#0d1b2a" } ``` プレビューはリアルタイムで更新されます。 ## ステップ6：マルチシーン動画を作成する 複数のシーンを持つ、より複雑な動画を構築しましょう。 ### 6.1 Claude Codeにプロンプトを入力します。 ``` 以下のシーンで30秒の製品デモ動画を作成してください。 シーン1（0-5秒）：ロゴイントロアニメーション シーン2（5-12秒）：3つのアイコンが順に表示される機能紹介 - アイコン1：ロケット（スピード） - アイコン2：盾（セキュリティ） - アイコン3：グラフ（分析） 各アイコンはフェードしながら左からスライドインする シーン3（12-22秒）：製品ダッシュボードのモックアップ - シンプルなUIモックアップを表示 - 異なるセクションを順にハイライト シーン4（22-30秒）：行動喚起（Call to action） - 「無料トライアルを開始する」 - ウェブサイトURLがフェードイン コンポーネントを使用してシーンを整理してください。 合計持続時間：30fpsで900フレーム。 ``` ### 6.2 Claude Codeがシーン構造を生成します。 ```tsx import { Sequence, AbsoluteFill } from 'remotion'; import { LogoIntro } from './scenes/LogoIntro'; import { FeatureShowcase } from './scenes/FeatureShowcase'; import { DashboardMockup } from './scenes/DashboardMockup'; import { CallToAction } from './scenes/CallToAction'; export const ProductDemo: React.FC = () => { return ( {/* シーン1：ロゴイントロ（0-150フレーム） */} {/* シーン2：機能紹介（150-360フレーム） */} {/* シーン3：ダッシュボードモックアップ（360-660フレーム） */} {/* シーン4：行動喚起（660-900フレーム） */} ); }; ``` ### 6.3 Claude Codeが個々のシーンコンポーネントを作成します。 **src/scenes/FeatureShowcase.tsx**： ```tsx import { useCurrentFrame, interpolate, AbsoluteFill } from 'remotion'; const features = [ { icon: '🚀', label: 'Speed', delay: 0 }, { icon: '🛡️', label: 'Security', delay: 30 }, { icon: '📊', label: 'Analytics', delay: 60 }, ]; export const FeatureShowcase: React.FC = () => { const frame = useCurrentFrame(); return ( {features.map((feature, index) => { const slideIn = interpolate( frame - feature.delay, [0, 30], [-100, 0], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' } ); const opacity = interpolate( frame - feature.delay, [0, 30], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' } ); return ( {feature.icon} {feature.label} ); })} ); }; ``` ## ステップ7：動画にオーディオを追加する ### 7.1 背景音楽トラックを追加します。 オーディオファイルを`public`フォルダーに配置します。 ``` public/ └── audio/ └── background-music.mp3 ``` ### 7.2 Claude Codeにオーディオを統合するように依頼します。 ``` public/audio/background-music.mp3 から背景音楽を追加してください - 最初の30フレームでフェードイン - 最後の30フレームでフェードアウト - 音量を0.5に設定 ``` ### 7.3 Claude CodeがAudioコンポーネントを追加します。 ```tsx import { Audio, interpolate, useCurrentFrame, useVideoConfig } from 'remotion'; import { staticFile } from 'remotion'; export const ProductDemo: React.FC = () => { const frame = useCurrentFrame(); const { durationInFrames } = useVideoConfig(); // オーディオのフェードイン/アウト const volume = interpolate( frame, [0, 30, durationInFrames - 30, durationInFrames], [0, 0.5, 0.5, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } ); return ( {/* ... その他のシーン */} ); }; ``` ## ステップ8：動画をレンダリングする 次に、動画をファイルにエクスポートしましょう。 ### 8.1 コマンドラインからレンダリングします。 ```bash # MP4にレンダリングする（ほとんどの用途で推奨） npx remotion render company-intro out/company-intro.mp4 # カスタムプロップスでレンダリングする npx remotion render company-intro out/apidog-intro.mp4 \ --props='{"companyName":"Apidog","tagline":"Design. Debug. Test. Document."}' ``` ### 8.2 レンダリングオプション： ```bash # 高品質（遅い） npx remotion render company-intro out/video.mp4 --crf=18 # 低品質（速い、ファイルサイズが小さい） npx remotion render company-intro out/video.mp4 --crf=28 # GIFとしてレンダリングする npx remotion render company-intro out/video.gif --codec=gif # WebMとしてレンダリングする npx remotion render company-intro out/video.webm --codec=vp8 # 特定のフレーム範囲をレンダリングする npx remotion render company-intro out/preview.mp4 --frames=0-90 ``` ### 8.3 レンダリングの進行状況： 次のような出力が表示されます。 ``` ℹ レンダリング中：フレーム 0-150 ████████████████████████████████████████ 100% | 150/150 フレーム ✓ 150フレームを12.3秒でレンダリングしました（12.2 fps） ✓ 3.2秒で動画をエンコードしました ✓ 動画は out/company-intro.mp4 に保存されました ``` **期待される結果**：`out/`ディレクトリにレンダリングされた動画ファイルが作成されます。 ## ステップ9：Remotion Lambdaでスケールする（オプション） 動画を大規模（数百または数千）にレンダリングするには、Remotion Lambdaを使用します。 ### 9.1 Lambdaの依存関係をインストールします。 ```bash npm install @remotion/lambda ``` ### 9.2 AWS認証情報を設定します。 ```bash # AWS認証情報を設定する aws configure # Remotion Lambdaロールを作成する npx remotion lambda policies role ``` ### 9.3 Lambda関数をデプロイします。 ```bash # レンダリング関数をデプロイする npx remotion lambda functions deploy # 動画サイトをデプロイする npx remotion lambda sites create src/index.ts --site-name=my-videos ``` ### 9.4 Lambda経由でレンダリングします。 ```bash npx remotion lambda render \ --function-name=remotion-render \ --serve-url=https://your-bucket.s3.amazonaws.com/sites/my-videos \ --composition=company-intro \ --props='{"companyName":"ClientCo"}' ``` ### 9.5 プログラムによるレンダリング： ```typescript import { renderMediaOnLambda } from '@remotion/lambda/client'; const result = await renderMediaOnLambda({ region: 'us-east-1', functionName: 'remotion-render', composition: 'company-intro', serveUrl: 'https://your-bucket.s3.amazonaws.com/sites/my-videos', codec: 'h264', inputProps: { companyName: 'Apidog', tagline: 'Design. Debug. Test. Document.', }, }); console.log('Video URL:', result.url); ``` ## ステップ10：動画生成APIを構築する オンデマンドで動画を生成するAPIエンドポイントを作成します。 ### 10.1 Claude CodeにExpressサーバーを作成するように依頼します。 ``` 以下のエンドポイントを持つExpress.js APIサーバーを作成してください： POST /api/videos/generate - 受け付けるもの：template, props, format - Remotion Lambdaレンダリングをトリガーする - 返すもの：jobId, status GET /api/videos/status/:jobId - 完了時にレンダリングの進行状況とダウンロードURLを返す 適切なエラー処理とZod検証を含めてください。 ``` ### 10.2 Claude Codeがサーバーを生成します。 **server/index.ts**： ```typescript import express from 'express'; import { renderMediaOnLambda, getRenderProgress } from '@remotion/lambda/client'; import { z } from 'zod'; const app = express(); app.use(express.json()); const generateSchema = z.object({ template: z.enum(['company-intro', 'product-demo']), props: z.record(z.unknown()), format: z.enum(['mp4', 'webm', 'gif']).default('mp4'), }); app.post('/api/videos/generate', async (req, res) => { try { const { template, props, format } = generateSchema.parse(req.body); const { renderId, bucketName } = await renderMediaOnLambda({ region: 'us-east-1', functionName: 'remotion-render', composition: template, serveUrl: process.env.REMOTION_SITE_URL!, codec: format === 'gif' ? 'gif' : 'h264', inputProps: props, }); res.json({ jobId: renderId, bucketName, status: 'processing', }); } catch (error) { res.status(400).json({ error: (error as Error).message }); } }); app.get('/api/videos/status/:jobId', async (req, res) => { const { jobId } = req.params; const { bucketName } = req.query; const progress = await getRenderProgress({ renderId: jobId, bucketName: bucketName as string, region: 'us-east-1', functionName: 'remotion-render', }); res.json({ status: progress.done ? 'completed' : 'processing', progress: progress.overallProgress, downloadUrl: progress.outputFile, }); }); app.listen(3001, () => { console.log('Video API running on http://localhost:3001'); }); ``` ### 10.3 ApidogでAPIをテストします。 [Apidog](https://apidog.com/)を使用して、動画生成エンドポイントをテストします。
1. `POST /api/videos/generate`に**新しいリクエストを作成します**。 2. **本文を設定します**。 ```json { "template": "company-intro", "props": { "companyName": "TestCorp", "tagline": "Testing made easy" }, "format": "mp4" } ``` 3. **送信して、**`jobId`を含む応答であることを**確認します**。 4. `status: "completed"`になるまで**ステータスエンドポイントをポーリングします**。 Apidogの[自動テスト機能](http://apidog.com/blog/api-testing-best-practices/)は、動画生成パイプラインが確実に機能することを検証するのに役立ちます。
## 完全な例：マーケティング動画ジェネレーター これはテンプレートとして使用できる完全な例です。 ### Claude Codeへのプロンプト： ``` 以下の機能を備えた完全なマーケティング動画ジェネレーターを作成してください： 1. テンプレート：「social-promo」 - 長さ：15秒（30fpsで450フレーム） - 解像度：1080x1080（Instagramスクエア） 2. シーン： - 惹きつけテキスト（0-3秒）：注目を集める大きな太字のテキスト - 製品画像（3-9秒）：ケン・バーンズ効果で製品を表示 - 機能リスト（9-12秒）：3つの箇条書きが順に表示 - CTA（12-15秒）：「今すぐ購入」が脈動アニメーションで表示 3. プロップス： - hookText：文字列 - productImageUrl：文字列 - features：文字列配列（3項目） - ctaText：文字列 - brandColor：文字列 4. テキストが表示されるときにオーディオダッキングを含める これが機能するために必要なすべてのファイルを生成してください。 ``` Claude Codeは、カスタマイズして大規模にレンダリングできる、完全でプロダクションレディな動画テンプレートを生成します。 ## 一般的な問題のトラブルシューティング ### 問題：「Cannot find module 'remotion'」 ```bash # 解決策：依存関係を再インストールする rm -rf node_modules npm install ``` ### 問題：フォントが読み込まれない ```tsx // コンポーネントにフォントのインポートを追加する import { loadFont } from '@remotion/google-fonts/Inter'; const { fontFamily } = loadFont(); // スタイルで使用する style={{ fontFamily }} ``` ### 問題：動画が真っ黒にレンダリングされる * コンポーネントが可視コンテンツを返しているか確認してください。 * `AbsoluteFill`に背景色が設定されているか確認してください。 * アニメーションがすべて不透明度0になっていないか確認してください。 ### 問題：Claude CodeがRemotionスキルを認識しない ```bash # スキルを再インストールする npx skills add remotion-dev/skills # .claude/skills/remotion/SKILL.md が存在するか確認する ls .claude/skills/remotion/ # Claude Codeを再起動する ``` ### 問題：バージョンミスマッチエラー ```bash # Remotionのバージョンを確認して更新する npx remotion versions # これで多くの場合、互換性の問題が解決されます ``` *動画生成APIを構築していますか？[Apidogを無料で試して](https://apidog.com/)、エンドポイントの設計、テスト、ドキュメント化を行いましょう。リクエストスキーマを検証し、テストシナリオを自動化し、動画パイプラインがエッジケースを適切に処理することを保証します。* ボタン