2026年3月16日の開発日記
前日にVOICEVOXとGoogle Cloud TTSでナレーション機能を組み上げたのを受けて、今日は音声の品質・管理・配信の3つを一気に底上げした。朝にElevenLabs v3のAPIを叩き始め、夜にはステレオパン付きのナレーションが本番環境から流れるところまで持っていった。
今日やったこと
1. ElevenLabs v3 TTS導入と音声サービス比較
日本語TTSを4サービス（OpenAI TTS、Google Cloud TTS、ElevenLabs v3、VOICEVOX）で比較した。ElevenLabs v3が最も自然な日本語を生成すると判断し、APIスクリプトを組んでテスト音声を生成。Audio Tagsで文中に[gentle]や[serious]を挿入して感情を揺らすテストも実施した。聞き比べページ（/admin/voice-compare）を立てて3サービスを横並びで再生できるようにし、最終的にChapter 04全59行をElevenLabsで本番生成した。
主な成果:
- 4サービスの比較調査とElevenLabs v3の選定
- Audio Tags感情制御（文中挿入パターン）のテスト
- 聞き比べページ（4カラム構成）の構築
- Chapter 04の全59行をElevenLabsで本番生成（3,458文字消費）
詳細: ElevenLabs v3で日本語TTS - サービス比較から本番生成まで
2. 音声ファイル管理基盤の整備
152個の音声ファイルをpublic/audio/からaudio-assets/に移行し、.gitignoreで除外した。dev server middleware（dev-audio.ts）を作成してローカル開発でaudio-assets/から配信し、useAudioUrl composableで本番（R2 CDN）と開発（ローカル）のURL解決を一元化した。Cloudflare R2にElevenLabs音声とVOICEVOX音声をアップロードし、DEPLOY.mdにデプロイ手順を文書化した。
主な成果:
audio-assets/への一元移行（gitignore済み）- dev middleware +
useAudioUrlcomposable でURL解決統一 - R2アップロード（
--remoteフラグ忘れの教訓も記録） DEPLOY.md作成
詳細: 音声ファイル管理基盤の整備 - Git除外・R2配信・dev middleware構築
3. ナレーションコンテンツ改善とNarrationViewer拡張
Chapter 01+04の計196行のナレーションを通しレビューし、未解説の専門用語やスライドのずれ、scene.idの重複など8件の問題を修正した。旧プロジェクトから移行時に書き換わっていたメッセージラインを原文に忠実に復元。NarrationViewerにはmessageLine表示、ステレオパン（ユイ=左、カイ先生=右）、デバッグパネル（Dキー）を追加した。Playwright+ffmpegによる動画レンダリングも試行し、NarrationViewerのロジックを純粋関数に抽出してVitest 49テストを新規作成した。
主な成果:
- 196行の通しレビューで8件修正
- messageLine原文復元（旧プロジェクトとの整合性）
- ステレオパン実装とデバッグパネル追加
- Playwright+ffmpegで動画レンダリングのパイプライン構築
- 純粋関数抽出 + 49テスト新規作成（全292テスト合格）
- 命名規則移行計画（Section > Chapter > Topic）のマークダウン作成
詳細: ナレーションコンテンツ改善とNarrationViewer拡張
今日の学び
- ElevenLabs v3のAudio Tagsは文中挿入で感情の切り替えが効く。GCP TTSのSSMLより表現力が高い
wrangler r2 object putはデフォルトでローカルエミュレータに書き込む。本番R2には--remoteフラグが必須（2回ハマった）- TTS生成スクリプトのSource of Truthは1箇所に。ts→JSON変換パイプラインで二重管理を排除
- WAVヘッダーを直接パースすればffprobe不要で音声長が取れる
- ロジックを純粋関数に抽出するとVue依存なしでテストが書ける
明日やること
- 命名規則移行計画（Section > Chapter > Topic）の実装に着手
- ElevenLabsの残クレジットでChapter 01の音声も差し替え検討
- 動画レンダリングスクリプトの改善（既存音声ファイルを使う方式に統一）
- ナレーションレビューで指摘した残りの用語解説追加