技術スタック

コア技術

技術	バージョン	用途
Remotion	4.x	動画コンポジション・レンダリング
React	18.x	Remotion コンポーネント記述
TypeScript	5.x	型安全な開発
VOICEVOX	latest	ずんだもん音声合成 (TTS)
FFmpeg	6.x	動画前処理・変換
Node.js	20+	ランタイム

Remotion パッケージ構成

{
  "dependencies": {
    "@remotion/cli": "4.x",
    "@remotion/player": "4.x",
    "@remotion/renderer": "4.x",
    "@remotion/media-utils": "4.x",
    "remotion": "4.x",
    "react": "18.x",
    "react-dom": "18.x"
  },
  "devDependencies": {
    "@remotion/bundler": "4.x",
    "typescript": "5.x"
  }
}

VOICEVOX

概要

• オープンソースの日本語音声合成エンジン
• ローカルで HTTP API サーバーとして起動
• ずんだもんは Speaker ID: 3

起動方法

# macOS の場合、VOICEVOX アプリを起動するか Docker で実行
docker run --rm -p 50021:50021 voicevox/voicevox_engine:latest

API エンドポイント

• POST /audio_query - テキストから音声合成用クエリを生成
• POST /synthesis - クエリから音声 (WAV) を合成
• GET /speakers - 利用可能なキャラクター一覧

ディレクトリ構成（予定）

VideoCaptureAutomaticSubtitles/
├── src/
│   ├── components/           # Remotion コンポーネント
│   │   ├── VideoComposition.tsx   # メインコンポジション
│   │   ├── SubtitleOverlay.tsx    # 字幕オーバーレイ
│   │   ├── ZundamonCharacter.tsx  # ずんだもんキャラクター
│   │   └── TransitionEffect.tsx   # トランジション効果
│   ├── lib/
│   │   ├── voicevox.ts       # VOICEVOX API クライアント
│   │   ├── subtitle.ts       # 字幕データ管理
│   │   └── lipsync.ts        # 口パクアニメーション制御
│   ├── assets/
│   │   └── zundamon/         # ずんだもん画像素材
│   │       ├── face-closed.png    # 口閉じ
│   │       ├── face-open.png      # 口開き
│   │       ├── face-half.png      # 口半開き
│   │       └── face-smile.png     # 笑顔
│   ├── data/
│   │   └── script.json       # 字幕スクリプトデータ
│   ├── Root.tsx              # Remotion ルート定義
│   └── index.ts              # エントリーポイント
├── testData/                 # テスト用画面収録動画
├── output/                   # レンダリング出力先
├── docs/                     # 設計書 (VitePress)
├── remotion.config.ts        # Remotion 設定
├── tsconfig.json
└── package.json