2026年3月18日の開発日記

朝6時台から夜まで、教材コンテンツの音声化とインタラクティブ実装を並行で回した一日。Fish Audioの音声生成でテキスト前処理の重要性を痛感し、Miller Columnsのslot内でaspect-ratioに3回引っかかり、モバイルの倍速再生ではWeb Audio APIのパイプラインをスキップするという判断を下した。最後に新プロジェクト「即録くん」の設計書をCodexにレビューさせて、2件の致命的指摘を受けて修正した。

今日やったこと

1. Fish Audio音声クローン＆TTS生成

Fish Audio v2/v3とElevenLabsで教材のナレーション音声を100件以上生成した。Chapter 04の33件から始めて、Chapter 01の全68件まで一気に処理。

主な成果:

• Fish Audio v3に切り替えて会計用語の発音精度を改善
• テキスト整備（ダブルクォーテーション除去、文末句点、会計用語の読み替え）
• Python製TTS音声バリデーターを開発（波形解析 + 文字数対ファイルサイズの異常検出）
• R2アップロード＆Cloudflare Pagesデプロイ

詳細: Fish Audio v2/v3とElevenLabsで教材ナレーション音声を一括生成した記録

2. 簿記入門「概要とまとめ」インタラクティブ実装

旧プロジェクトの財務3表コンポーネント・取引入力・段階的表示をMiller Columnsの4列目にslot機構で移行した。

主な成果:

• Phase 1-4を1日で完走（型定義・コンポーネント6個・テスト396本・slot統合）
• 仕訳帳・総勘定元帳のノート風空行、取引テーブルとスライドのハイライト連動
• disabledボタンのナビゲーションヒントをセクション完了状態に応じて出し分け

詳細: 簿記入門「概要とまとめ」インタラクティブセクション移行

3. ナレーションビューアのモバイル対応・UI改善

スマホ/タブレット/PCの3パターンでレスポンシブ対応を仕上げた。

主な成果:

• スマホ: メッセージライン左カラム非表示、画像フル幅
• パンくずリスト・セクションナビゲーション追加
• LocalStorageによる進捗保存（ページリロードしても最後の行から再開）
• モバイル倍速再生の音声途切れ修正（Web Audio APIパイプラインをモバイルでスキップ）

詳細: ナレーションビューアのモバイル対応

4. 即録くん（Sokuroku）計画

リアルタイム文字起こしデスクトップアプリの設計書を作成し、Codexレビューを通した。

主な成果:

• Electron + Vue 3 + TypeScript構成を決定（ReactからVueに変更）
• Deepgram音声パイプライン設計（メインプロセスでAPI管理、IPC経由）
• Codex指摘2件を修正、PoC検証ステップを追加
• 実装は翌日に持ち越し

詳細: 即録くん（Sokuroku）リアルタイム文字起こしアプリ計画

今日の試行錯誤

今日の学び

• TTS音声の品質はモデル性能だけでなく入力テキストの前処理で決まる。ダブルクォーテーション1つでAPI生成結果が壊れる
• scoped CSSの:deepはslot境界を越えない。MillerViewer側でルールを追加する必要がある
• 音声バリデーターの閾値は1発で決まらない。実データで検出漏れを確認しながら段階的に詰める
• モバイルではWeb Audio APIの処理負荷がボトルネックになりうる。パイプラインの簡素化が有効
• 設計書はCodexにレビューさせると、自分の盲点を突いてくれる

関連記事

• Fish Audio v2/v3とElevenLabsで教材ナレーション音声を一括生成した記録
• 簿記入門「概要とまとめ」インタラクティブセクション移行
• ナレーションビューアのモバイル対応
• 即録くん（Sokuroku）リアルタイム文字起こしアプリ計画