2026年5月6日の開発日記
今日は eurekapu-nuxt4 プロジェクト一本に集中した。朝は財務3表コクピット画面のホバー連動ハイライトから始まり、昼前には22取引アニメーションの表示バグを踏み、午後はずんだもんの音声を132本生成してR2にデプロイするところまで進んだ。
今日のタイムライン
今日やったこと
1. 財務3表コクピット：ホバー連動ハイライトとグレースケール改善
昨日の積み残しだった「Z軸浮き上がり」を実装した。BS・PL・CSの対応セルが仕訳プッシュ時に同時にアウトラインでハイライトする機能で、3ペアをそれぞれ別色（teal・amber・他）に色分けしている。
あわせてユーザーが「二重線になってる」と画像で指摘した外枠のSVG矩形（cue-box）も削除し、破線アウトライン1本だけに整理した。合計行の背景も「黒+白文字」から「GLグレー薄め+黒文字」に変えてBSバランス照合スクリプト（verify.mjs）も新ID体系に対応させた。
主な成果:
hoverPairId＋ポインターハンドラで3ペアのホバー連動を実装- SVG
cue-box矩形を削除（CSS破線アウトラインのみ残す） - BS/PL/CS合計行をGLグレースケール+黒文字に統一
- verify.mjs を「最終残高照合＋BSバランスチェック」方式に書き直し（
contra科目の符号バグも修正） /lessonsの財務3表カードにリンクを追加（topics.tsにcockpit-00-summaryを追記）
詳細: 財務3表コクピット：ホバー連動ハイライトとグレースケール合計行の改善
2. 22取引アニメーション：Nuxtコンポーネント登録と花火SMIL化
確認ページ（/dev/journal-push-animation-test）を開いたら全SVGが空白だった。Nuxtが DevTransactionsTransactionNo01Animated と登録しているのに、ページ側が <TransactionNo01Animated> と呼んでいたのが原因。nuxt.config.ts に pathPrefix: false で追加登録して解消した。
続いて no08（買掛金発生シーン）の花火アニメーション実装でCSS transform がSVG要素に効かないことを発見し、SMILに切り替えた。no09の座標計算ミスも修正。
主な成果:
nuxt.config.tsにcomponents/dev/transactions/をpathPrefix: falseで追加- no08 花火アニメーションをCSS→SMIL（
<animateTransform>+<animate>）に切り替え - no09 のbefore座標（お金袋・リンゴ）の計算ミスを修正
- no06 のインラインSVGを
memo/に抽出（Illustrator編集用）
詳細: 22取引アニメーション：Nuxtコンポーネント登録ミスとSMIL花火アニメーション
3. VOICEVOXずんだもん：132ステップ音声生成からR2デプロイまで
財務3表コクピットの解説カードにずんだもん（speaker_id=3）音声を追加する機能を実装した。UIは「解説ボタン＋音声切替ボタン」を四角枠でグループ化し、倍速切替（1.0×/1.5×/1.8×）とデバッグ用リピートボタンも追加。
全取引ガイド132ステップを tsx スクリプトで一括生成（generated=128/errors=0）してCloudflare R2にアップロードした。途中でVOICEVOX辞書の読み誤りが8種類発覚し、前処理ルールを追加しながら該当ファイルを逐次再生成した。
主な成果:
showGuideStep時に音声再生、closeGuide時に停止を実装- 倍速切替（1.0×/1.5×/1.8×）をUIに追加
- VOICEVOX:ずんだもん クレジット表示
- 132ステップ一括生成スクリプト（tsx）を作成・完走（errors=0）
- Cloudflare R2 へ132ファイルをアップロード（errors=0）
詳細: ずんだもん音声解説を財務3表コクピットに組み込む：132ステップ一括生成とR2デプロイ
今日の試行錯誤
| # | テーマ | 試したこと | 結果 | 気づき |
|---|---|---|---|---|
| 1 | SVG二重線 | 画像で「枠が1本多い」を確認 | cue-box矩形削除で解消 | SVGとCSSで二重に枠を描いていた |
| 2 | 花火アニメーション | CSS @keyframes + transform | SVGに効かず（identity固定） | SVGにはSMILが必要 |
| 3 | 花火SMIL化 | <animateTransform> + beginElement() | 動作確認済み | svgRef.querySelector で要素を直取りする方式 |
| 4 | verify.mjs クラッシュ | インデックス参照でクラッシュ | 照合方式を書き直し | エントリー増加（27→30件）でインデックスがずれていた |
| 5 | B/S 誤読 | VOICEVOX辞書登録（半角） | 全角Ｂ／Ｓに揃えて再生成で解消 | 辞書は全角で登録されていた |
| 6 | 132本のR2アップロード | バックグラウンドでwranglerループ | バッファリングで詰まる | フォアグラウンドに切り替えると完走 |
| 7 | Nuxt コンポーネント未表示 | DevTransactions~ vs <TransactionNo~> の名前不一致 | pathPrefix: false で解消 | Nuxtのディレクトリベース命名がそのままプレフィックスに |
今日の学び
- CSS の
transformは通常のDOM要素には効くが、SVGの子要素には効かない（transform-box: fill-boxを設定してもSMILの方が確実） - VOICEVOX辞書は半角・全角を区別する。生成テキストと辞書の表記を揃えないとマッチしない
- Nuxt のコンポーネント自動登録はディレクトリ構造がそのままプレフィックスになる。
dev/transactions/配下はDevTransactions~になる