開発eurekapu-nuxt4メモ

Excelショートカット講座の移行完了・字幕とtextsの役割分担・VOICEVOX音声テストの顛末

前日の積み残し5タスクを棚卸ししたら、完了済みは1つだけだった。残り4タスクの計画マークダウンを書き出してから作業に入った。字幕の品質改善に取りかかったところで「字幕に入れるべき情報とtextsに入れるべき情報は違う」という当たり前のことに気づいて方針が変わり、そこからtextsの品質レビュー、まとめページのリファクタリング、VOICEVOX音声テストと手を広げていった一日の記録。


1. 字幕品質改善 → 方針転換

最初の想定

字幕テキストの品質が低いセクションがあったので、字幕に文脈説明を追加しようとした。「なぜこの操作をするのか」「どういう場面で使うのか」を織り込めば、動画だけ見ても内容が伝わるはずだと考えた。

気づき: 字幕とtextsは別の仕事をする

実際に書き直し始めると、字幕が長くなりすぎて画面を覆い尽くした。字幕はあくまで動画の操作実況であって、「Ctrl+Sを押します」「セルA1を選択します」のような短い指示が本来の役割だった。文脈や背景の説明はtextsパネルに入れるべき情報で、字幕に詰め込むものではない。

この区別に気づいたことで、以降のコンテンツ改善はtexts側に集中する方針に切り替えた。


2. textsコンテンツの品質レビュー

プレースホルダーの解消

移行時に仮テキストのまま残っていたセクションを洗い出して、実際の説明文に差し替えた。

演習セクションの学習目標追加

演習ページを開くと、いきなり操作手順が始まっていて「何を学ぶセクションなのか」が分からなかった。各演習セクションの冒頭に学習目標テキストを追加し、その演習で身につくスキルを明示した。

説明不足セクションの補強

動画でショートカットの動作を見せるだけで、「いつ使うか」「なぜこの操作が速いか」の説明が抜けているセクションを補強した。


3. textsidxの表示問題と修正

症状

スライド1枚のセクションで、textsパネルが空白のまま何も表示されなかった。

原因

textsの表示ロジックがtexts[idx]でスライドインデックスに対応していた。スライドが複数枚あるセクションではtexts[0], texts[1], ... とインデックスが進んで問題なく動く。しかしスライドが1枚のセクションでは常にtexts[0]しか参照されず、textsにエントリが1つならそれだけが表示され、0件なら空白になる。

修正

スライド1枚のセクションではtextsの全エントリを統合して表示するように修正した。スライドインデックスとtextsインデックスが1対1で対応する前提の設計を、「スライド枚数が1のときは全textsを結合」というフォールバックで補った。


4. 移行対応表の作成と全57ページ完了確認

旧プロジェクトのショートカット講座ページと新プロジェクトの対応を一覧にした移行対応表を新規作成した。57ページを1行ずつ突き合わせ、移行漏れがないことを確認した。


5. まとめページのリファクタリング

Before: 3つに分かれたインデックス

Ctrl系、Alt系、Other系の3つのまとめページが別々に存在していた。ショートカットを探すたびに「あれはCtrl系だったかAlt系だったか」を思い出す必要があり、3ページを行き来していた。

After: 全講座目次テーブルに統合

3つのインデックスを1つの目次テーブルに統合し、種別タグ(セミラティス構造)で分類した。Ctrl系/Alt系/Otherをフィルタで絞り込める。ページ遷移が消えて、1画面で全ショートカットを見渡せるようになった。


6. 個別ページの改善

StreamDeck紹介ページの移植

Excel基礎講座に置いていたStreamDeck紹介ページをショートカット講座にも追加した。同じコンテンツが2箇所に存在するため、canonical URLをExcel基礎講座側に設定して重複を回避した。

パンくずリスト追加

「Eurekapu / 講義ノート / Excelショートカット講座」の階層をパンくずリストとして全ページに追加した。

「非推奨」ショートカットの注記

セル結合、枠線、置換ウィンドウなど、実務で使うと後工程で問題を起こすショートカットに「非推奨」の注記を追加した。合わせてシートの3分類(データシート・集計シート・出力シート)を説明し、どの分類のシートでどのショートカットが有効かを明示した。


7. UIの細かい改善

改善項目内容
テーブル行高さパディングを縮小して一画面あたりの表示行数を増やした
ソート機能目次テーブルのカラムヘッダーをクリックでソートできるようにした
inlineTopicsの2行表示トピック名の括弧内テキストを小さく別行に分離し、メインのトピック名が読みやすくなった

8. VOICEVOX音声ナレーションの導入と撤回

動機

無音の操作動画にずんだもんの声でナレーションを入れたら、理解しやすくなるのではないかと考えた。

試作

VOICEVOX(ずんだもん)で字幕テキストを読み上げた音声ファイルを生成し、動画に重ねて再生するプロトタイプを作った。動画のタイムラインに合わせて音声を差し込む仕組みまで組んだ。

商用ライセンス調査 → 撤回

VOICEVOXの利用規約を確認したところ、商用利用にはクレジット表記が必須だった。全ページにクレジット表記を入れる運用コストと音声ナレーションの学習効果を天秤にかけた結果、現時点では見合わないと判断した。

音声ナレーション機能は削除し、動画の音声ON/OFFトグルのみを残した。ずんだもんの声は聞き取りやすく、テスト再生では操作の意図がすっと頭に入ってきただけに、クレジット表記の運用負荷が惜しかった。


9. Git LFSプッシュ問題の解決

195MB分のLFSオブジェクトがローカルに未プッシュで溜まっていた。git lfs pushを実行して解消した。LFSオブジェクトはコミット時に自動追跡されるが、プッシュは明示的に実行しないとリモートに反映されない。ローカルだけで作業を続けていると、プッシュを忘れがちになる。


今日の学び

  • 字幕とtextsの役割分担: 字幕は操作実況、textsは文脈説明。この線引きを最初に決めておけば、字幕を書き直す時間が浮いた
  • textsidxの設計前提: スライドインデックスとtextsインデックスの1対1対応は、スライド枚数が変動するセクションでは壊れる。フォールバックの設計を最初から入れておくべきだった
  • VOICEVOXの商用利用: クレジット表記必須。音声品質は申し分ないが、全ページにクレジットを入れる運用コストを無視できない。クレジット表記を一括管理する仕組みができたら再検討する余地はある
  • Git LFSのプッシュ忘れ: コミットとプッシュが分離しているLFSは、ローカルで作業を完結させているとプッシュが後回しになる。定期的にgit lfs statusで未プッシュを確認する習慣が要る