開発eurekapu-nuxt4

このセッションでやったこと

Part 2 投資判断クイズ全75問（25問+18問+32問）に音声を載せた。問題文・選択肢A〜C・解説・正解の読み上げに加え、誤答パターンD（不正解選択時の補足音声）まで含めて、計150問分のWAVを合成し、MP3に変換してCloudflare R2へアップロードし、Nuxtページから再生できるところまで一気通貫で通した。

ただし手を動かしたのはほぼClaude Code側で、人間側は「音声化やっていきましょう」「OK」「y」とだけ打っていた。Claude Codeに音声化パイプラインを派遣して、自分は承認スタンプを押す係に徹した、というのが今日の構図に近い。

着手前の状態：A/B/C用JSONベースの既存スクリプト

朝、昨日の積み残しを確認したら「Part 2 投資判断クイズの音声化が未着手」と書いてあった。

既存のVOICEVOX音声化スクリプトはA/B/C 3択用のJSONを読み込んで合成する作りになっていた。今回扱う投資判断クイズは TS ファイル（investment-1.ts、investment-2.ts、investment-3.ts）で定義されていて、しかも誤答パターンD（不正解を選んだときに再生する補足音声）の概念が新規追加されていた。スクリプトを拡張する必要がある、と判断した時点でClaude Codeに作業を投げた。

依頼内容は「既存のVOICEVOX合成スクリプトをTSファイル対応にして、Dパターンも合成対象に追加して、investment-1/2/3を順次合成して」だけ。Claude Codeが以下を順次こなした:

  • TSファイルから問題データを抽出するパーサーを追加
  • Dパターン（誤答時補足）の合成ロジックをスクリプトに組み込み
  • investment-1 → investment-2 → investment-3 の順でWAV合成
  • investment-3 は問題数が32問と多かったのでバックグラウンド実行に切り替え、並行してinvestment-1/2のMP3変換に着手

人間はターミナルを眺めながら「進んでるな」と確認するだけ。WAV合成が終わったらMP3変換、終わったらアップロード、と次の工程に勝手に進んでいった。

150問のWAV→MP3変換、151ファイルがR2へ流れる

WAV合成が全て完了した時点で、各問題ごとに「問題文・選択肢3つ・解説・正解・誤答補足」のWAVが並んでいた。これをMP3に変換したら151ファイルになっていた（共通音声1ファイル + 75問 × 2バリエーション）。

Cloudflare R2へのアップロードは並列実行した。_common ディレクトリ（共通音声）を先に流し込んでから、investment-1/2/3 のディレクトリを3並列でアップロード。150問分のMP3が数分で R2 に乗った。

ここまでで「音声ファイルは全部用意できた」状態。あとはNuxt側で再生できるようにつなぎ込むだけ、のはずだった。

落とし穴1：narrationConfig がページに渡されていなかった

投資判断クイズの18ページ（各トピックのページとサブページ）を順に開いてみたら、音声再生ボタンが反応しない。Claude Codeに調べさせたら、各ページのコンポーネント呼び出しで narrationConfig propsが渡されていなかった。R2のURLパターン・問題IDのprefix・音声有効化フラグ等を渡す設計だったのに、ページ側が完全に無設定状態で動いていた。

18ページに同じパターンを書き込む必要がある。最初、Claude CodeはPowerShellのhere-stringで一括置換を試みたが、Windowsの引用符エスケープに引っかかって動かなかった。ここで方針を切り替え、Python スクリプトで一括置換。テンプレート文字列を直接読み込んで、各ファイルのコンポーネント呼び出し箇所に narrationConfig ブロックを挿入する、という単純な処理にしたら一発で通った。

PowerShellのhere-stringは、長文テンプレートを変数に入れて置換、というユースケースとは相性が悪い。今後同じことをやるなら最初からPythonでいい、というのが今日の学び。

落とし穴2：INV-NEST prefixのtypo

ページ修正後、再度ブラウザで再生確認すると、investment-3 の冒頭問題で 404 が出た。コンソールを見ると /audio/INV-NEST-Q01.mp3 を取りに行っているのにR2にはそのキーが存在しない、というエラー。

R2側のキーを確認したらprefixは NESTEGG だった。ページに渡したprefixが INV-NEST でtypoしていた。investment-1（INV-PORT）とinvestment-2（INV-RISK）は通っていたので、investment-3 だけ取り違えていた形。

Claude Codeが該当箇所を3秒で修正、再度ロードしたら通った。Claude Codeが書いたコードだから人間側が気づかない、ということではなく、人間が「音が出ないぞ」と耳で気づいた違和感をClaude Codeが原因特定・修正まで走る、という分担。人間は耳と目で違和感を拾う係、AIが原因と修正を引き受ける係。

ローカル → 本番 で音声再生をフル確認

ローカル（localhost:3200）で auto モードに切り替えて開始ボタンを押したら、想定どおりの流れが回った:

  1. 問題文MP3が再生
  2. 選択肢A〜C の読み上げが順に再生
  3. 「Bを選択」のクリック
  4. 「正解です」の音声が再生
  5. 解説MP3が再生
  6. 次の問題へ自動遷移

75問を全部聞いたわけではないが、investment-1/2/3 から数問ずつサンプリングして再生確認した。

その後、コミット→push→デプロイ（5.4分）→本番サイトで再度確認。本番ドメインから R2 にアクセスしている経路もエラーなく動作した。

セッション総括

セッション最後に、Claude Codeに memo/2026-05-16/00-session-summary.md としてセッション総括を書かせた。「何をやったか・何が躓いたか・次に再現するときの注意点」を書いておくと、明日以降に似たパイプラインを別コンテンツで走らせるときに参照できる。

このパイプラインを業務に応用するなら

会計士・税理士の業務アナロジーで考えると、以下のようなパイプラインに転用できる:

  • 税務通達の要点を音声化 → 移動中に通達アップデートを耳で追う
  • クライアント月次報告のサマリ音声化 → 報告書PDFと一緒に音声ファイルを納品
  • 会計監査チェックリストの読み上げ → 現場でハンズフリーで確認

要するに「テキストの一次情報 → 音声 → クラウドストレージ → 再生エンドポイント」という構造そのものは汎用で、コンテンツが投資判断クイズか税務文書かが変わるだけ。人間は再生して耳で違和感を拾う係、AIが合成・変換・配置を担う係、という分担は同じ。

明日以降の改善メモ

  • narrationConfigのデフォルト値を親コンポーネント側に寄せ、ページ側で書かなくても動くようにする
  • prefix のtypoを早期検出するため、R2に存在しないキーを叩いた瞬間にコンソールへ警告を出すフォールバックを入れる
  • PowerShellでの一括置換はもう試さない。最初からPythonで書く
  • WAV→MP3変換のビットレートを再検討（現在は標準設定、ファイルサイズと音質のバランスを見直す余地あり）