2026年3月15日の開発日記

朝6時からeurekapu-nuxt4に張り付いた一日。テキストと図だけだった学習コンテンツに声を吹き込み、ブラウザで再生ボタンを押すと27分間の音声付き授業が流れるところまで持っていった。その過程でSSRバグを潰し、レスポンシブのCSS崩れも直した。

今日やったこと

1. MillerViewer SSRハイドレーションバグ修正

3列目のスライドが二重にハイライトされるバグを修正した。SSRが globalIdx=0 で初期HTMLを返し、クライアント側がlocalStorageから異なる値を復元するため、selectedクラスが2箇所に残っていた。

主な成果:

Chrome DevToolsでSSR HTMLを分析し根本原因を特定
ロジックを純粋関数（resolveStoredIdx, calcProgress, countSlides）に切り出し
ユニットテスト28件追加、既存243件と合わせて全271件通過
~/.claude/CLAUDE.mdに「副作用を隔離する」コーディングルールを追加

詳細: MillerViewer SSRハイドレーションバグ修正と純粋関数リファクタリング

2. 音声ナレーション機能の構築

VOICEVOXで181台詞分の音声を生成し、NarrationViewer.vueで自動再生する仕組みを作った。その後Google Cloud TTS（Chirp 3 HD）に切り替えてボイスを選定し、第1話の55行をGCP音声に差し替えた。

主な成果:

VOICEVOX APIで181台詞（約27分）の音声WAV生成
NarrationViewer.vue: 自動再生、倍速（5段階）、シーン一覧ドロワー、トランジション
ランディングページ（カラム版/フォーカス版/ナレーション版の3カード）作成
GCP TTS Chirp 3 HDでボイス選定（Leda / Zephyr / Algieba）
Cloudflare R2に210ファイルをアップロードしCDN配信
GCP ADC認証方式に移行、サービスアカウントキーファイル削除
コードレビュー（3エージェント並列）後のリファクタリング

詳細: 会計学習コンテンツのナレーション機能構築

3. レスポンシブ対応修正

モバイルで画像が消えるバグと、iPad Proフォーカスモード時のレイアウト崩れを修正した。

主な成果:

:deep() CSSのスコープ漏れによるモバイル画像非表示バグを修正
iPad Pro (1366px) 向けの2カラムレイアウト実装（テキスト左・画像右）
revertされていたPR #1の変更を再実装

詳細: MillerViewerのレスポンシブ対応修正

今日の学び

VOICEVOXで素早くプロトタイプを作り、GCP TTSで品質を上げ、R2で配信基盤を整える。この順番で進めると各段階で動くものを確認できる
wrangler r2 object put はデフォルトでローカルR2エミュレータに書き込む。--remoteを忘れると本番に届かない
GCP ADC認証を使えばサービスアカウントのキーファイルが不要になる。gcloud auth application-default login一発で済む
:deep()のスコープ漏れはデスクトップでは正常に見えてモバイルで壊れるパターンを生む。親コンポーネントのクラスでスコープを絞る

明日やること

第2話・第3話のGCP TTS音声差し替え
スライドデータのslides/texts統合（インデックス対応 → オブジェクト配列化）
ナレーション版のデプロイ確認

関連記事