ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
Claude Codeの並列エージェントで882本のブログ記事から解説動画を自動生成した話

Claude Codeの並列エージェントで882本のブログ記事から解説動画を自動生成した話

はじめに 筆者は技術ブログを882本(日英バイリンガル)運営しています。これらの記事をYouTube動画として展開するため、Claude Codeの並列エージェント機能とVOICEVOX音声合成を組み合わせた自動動画生成パイプラインを構築しました。 結果として、Claude Codeの週間利用制限(全ユーザーの上位2%が該当)に到達するという珍しい体験をしたので、パイプラインの構成と実績を共有します。 パイプラインの全体像 ブログ記事 (.md) ↓ Claude Code 並列エージェント (10本同時) 対話台本 (sections.json) ↓ VOICEVOX × 3並列ワーカー 解説動画 (video.mp4) ↓ YouTube API YouTube公開 1. 台本生成(Claude Code) 各記事を読み込み、2キャラクターの掛け合い形式の台本(sections.json)を生成します。Claude CodeのAgentツールを使い、10本のエージェントを同時に起動して並列処理します。 [ { "section_title": "セクション名", "slide_points": ["スライドに表示するポイント1", "ポイント2"], "lines": [ {"speaker": "usagi", "text": "カタカナヨミアゲテキスト", "display_text": "画面表示テキスト"}, {"speaker": "sora", "text": "カタカナヨミアゲテキスト", "display_text": "画面表示テキスト"} ] } ] text: VOICEVOX読み上げ用(英語技術用語はカタカナ表記) display_text: 画面表示用(英語技術用語はそのまま) 1記事あたり6〜10セクション、各セクション6〜8セリフ 2. キャラクターペアシステム 4組のVOICEVOXキャラクターペアを用意し、記事ごとにローテーションで割り当てます。 ペアID 質問役 解説役 スタイル zundamon_metan ずんだもん 四国めたん 素朴×丁寧 tsumugi_kiritan 春日部つむぎ 冥鳴ひまり ギャル×クール usagi_sora 中国うさぎ 九州そら 控えめ×おっとり hau_whitecul 雨晴はう WhiteCUL 元気×知的 立ち絵素材は坂本アヒルさんの素材を使用しています。 ...

Three.js + Puppeteer で VRM キャラクターを動かして動画を自動生成する

Three.js + Puppeteer で VRM キャラクターを動かして動画を自動生成する

はじめに 技術ブログの記事を VTuber 風の解説動画に自動変換できたら面白いのでは――そんな思いつきから、Three.js + Puppeteer で VRM キャラクターをフレーム単位でレンダリングし、VOICEVOX の音声とリップシンクさせて動画を生成するパイプラインを作りました。 この記事では、実装で得られた知見とハマりどころを共有します。 全体のパイプライン 処理の流れは以下の通りです。 Markdown 記事を読み込み → LLM(OpenRouter API)でセクション分割された台本を生成 VOICEVOX でセクションごとに音声(WAV)と音素タイミングを生成 Three.js + @pixiv/three-vrm でヘッドレス Chrome 上に VRM モデルを描画し、音素データに基づくリップシンクアニメーションをフレーム連番 PNG として出力 スライド画像を自動生成(HTML → Chrome ヘッドレス → PNG) FFmpeg でスライド背景 + VRM アニメーション + 音声を合成し、MP4 動画を出力 Python スクリプトがオーケストレーション役を担い、VRM レンダリングは Node.js スクリプトを子プロセスとして呼び出す構成です。 使用技術 役割 技術 3D レンダリング Three.js v0.172 VRM 読み込み @pixiv/three-vrm v3.3.3 ヘッドレスブラウザ puppeteer-core (SwiftShader) 音声合成 VOICEVOX Engine (Docker) 動画合成 FFmpeg パイプライン制御 Python VRM モデル AvatarSample_C (VRoid Hub / 無料ライセンス) ヘッドレス Chrome で VRM を読み込む 課題: file:// の CORS 制限 最初の壁は、ヘッドレス Chrome 上で VRM ファイルを読み込む方法でした。ローカルの .vrm ファイルを file:// プロトコルで読もうとすると CORS エラーで弾かれます。 ...