Claude Codeで動画生成システムを作った話 ― BGM同期からMCPツール化まで

はじめに

「動画にして」— たった一言で記事が動画になる。そんな仕組みを作った。

Mothershipのショート動画自動生成システムにMCPツールを追加し、Claude Codeから直接動画を生成できるようにした開発記録。BGM同期のバグ修正、CLIラッパー作成、MCPサーバーへの統合まで、1セッションで完了した全工程を解説する。

背景：動画生成システム Phase 1

Mothershipには既にショート動画自動生成システムが存在していた。

• Claude Max Proxyで台本を自動生成
• スライドベースのエディタでテロップ・BGM・トランジションを編集
• ffmpegでレンダリング

ブラウザUIから操作する分には動いていたが、3つの問題があった。

問題1：BGMとプレビュー再生が同期しない

BGMプリセットの再生ボタンとプレビューのスライドショー再生ボタンが完全に独立していた。

• BGMを再生してもプレビューの再生ボタンに反映されない
• プレビューを再生してもBGMが一緒に流れない
• プレビューを停止してもBGMが鳴り続ける

修正内容

video-gen.jsの3つの関数を修正した。

toggleBgmPreview() — BGM再生/停止/終了時にupdatePlayBtn()を呼び出してプレビューボタンの表示を同期。

startPlay() — プレビュー再生開始時、project_jsonにBGMが設定されていればpreviewBgmAudioを生成して自動再生。ループ再生、ボリューム設定も反映。

var pj = currentProject.project_json || {};
if (pj.bgm && pj.bgm.enabled && pj.bgm.path) {
    previewBgmAudio = new Audio(pj.bgm.path);
    previewBgmAudio.volume = pj.bgm.volume || 0.3;
    previewBgmAudio.loop = true;
    previewBgmAudio.play();
}

stopPlay() — プレビュー停止時にpreviewBgmAudio.pause()でBGMも停止。

問題2：Claude Codeから動画を生成できない

ブラウザUIでしか操作できず、「この記事を動画にして」のような自然言語指示に対応できなかった。

解決：CLIラッパー + MCPツール

video-cli.php

SSO認証・CSRFを完全にバイパスし、DB・configに直接アクセスするCLIラッパーを作成した。

# 台本生成 + ジョブ作成

> ⚠️ 本記事のコードはサンプルです。実際の認証情報・設定値は含まれていません。
php video-cli.php generate --topic="テーマ" --style=business --slide_count=5

# レンダリングキュー投入
php video-cli.php render --job_id=xxx

# 状態確認
php video-cli.php status --job_id=xxx

# 一覧取得
php video-cli.php list

generateアクションはClaude Max Proxyを呼び出して台本を生成するため、タイムアウトを120秒に設定している。

MCPツール5本

既存のcryptoツールと同じパターン（SSH経由でPHP CLIを呼び出す）で実装した。

| ツール | 用途 | WRITE権限 |
|--------|------|-----------|
| video_generate | トピックから動画を自動生成 | 必要 |
| video_render | レンダリングキュー投入 | 必要 |
| video_status | ジョブ状態確認 | 不要 |
| video_list | 全ジョブ一覧取得 | 不要 |
| video_save | project_json更新 | 必要 |

lib/tools/video.jsでツール定義、lib/handlers/video.jsでハンドラーを実装し、index.jsに登録。server.jsのWRITE_TOOLSに書き込み系3ツールを追加。

問題3：記事コンテンツの動画化

MCPツールが完成したので、ClaudeCodeNaviの人気記事「Claude Code入門：最初の一歩」（1,554 views）を動画化した。

php video-cli.php generate \
  --topic="Claude Code入門ガイド：AIコーディングアシスタントの始め方..." \
  --style=educational --slide_count=6 --aspect=9:16

6スライドの教育動画がdraft状態で作成される。エディタで画像追加・テロップ調整後にレンダリング可能。

アーキテクチャ

ユーザー「動画にして」
    ↓
Claude Code → MCP video_generate
    ↓ (SSH)
VPS video-cli.php generate
    ↓ (curl)
Claude Max Proxy → 台本JSON生成
    ↓
MySQL INSERT → draft ジョブ作成
    ↓
editor_url 返却 → ブラウザで編集可能
    ↓
video_render → ffmpeg レンダリング
    ↓
完成動画 .mp4

VPSデプロイの注意点

Mothership本体のファイル（/var/www/以下）はwww-data所有のため、deployユーザーから直接scpできない。/tmp経由でsudo cpする必要がある。

一方、MCPサーバーのファイルはdeploy所有の/var/www/asi.co.jp/mothership/mcp-server/にあるため直接コピー可能。

PM2再起動後、/healthエンドポイントでツール数が83→88に増加したことを確認。

まとめ

1セッションで以下を完了した：

• BGM同期修正 — 3関数修正でプレビュー再生とBGMが完全同期
• CLIラッパー — video-cli.php 6アクション対応
• MCPツール5本 — Claude Codeから直接動画生成が可能に
• CCN記事動画化 — 人気記事を教育動画として生成
• VPSデプロイ — 88ツールで稼働確認

MCPツール化の威力は「動画にして」の一言で実感できる。コンテンツを別メディアに展開する作業が、自然言語の一言で完了する世界。

関連リンク

• 動画エディタ
• Mothership MCP Server