2026年3月14日の開発日記

「クリックしても何も起きない」というバグ報告から始まった1日が、MillerViewerを書籍的な学習体験に作り替える作業に膨らんだ。バグ修正、目次リデザイン、動画撮影用フォーカスモードと、3つのセッションを使い切った。

今日やったこと

1. MillerViewerの改善と書籍風目次の実装

BSPLページでチャプターをクリックしても反応しないバグを修正。URLベースのマッチングをnameベースに切り替えた。そこから芋づる式に、単一セクション時のColumn 3自動非表示、説明文の書き換え、非選択項目のグレーアウトと作業が広がった。

目次ページをカード表示からミラーカラムレイアウトに統合し、書籍の巻頭目次のような構造に作り替えた。クエリパラメータ ?ci=&si= でセクション単位のディープリンクにも対応。さらにセクション単位の要約データを追加し、目次を眺めるだけで内容を想起できるようにした。

主な成果:

URLベース → nameベースマッチングでBSPLページのクリックバグ修正
singleSectionModeで不要なColumn 3を自動非表示
書籍風構造化目次 + クエリパラメータディープリンク
セクション単位の要約データ追加
コンポーネントのリファクタリング（:deep() → props化）

詳細: MillerViewerの書籍風目次とディープリンク対応

2. Udemy撮影用フォーカスモードの設計と実装

動画撮影時にColumn 2/3が映り込む問題を解決するフォーカスモードを設計・実装した。useFocusMode() composableでアプリ全体の状態を管理し、フォーカスモード時はコンテンツだけが全幅表示される。

パンくずリストに4段階の進捗バーを統合し、全1306スライドの中での現在位置を背景フィルで表現。セクション/チャプター境界を越えたときには映画的なシーンカードトランジションが入り、大カテゴリー間は暗転演出で「章が変わった」ことを伝える。矢印キーだけで1306枚を端から端まで移動でき、localStorageでスライド位置を自動保存する。

主な成果:

フォーカスモード（Column 2/3非表示 + 全幅コンテンツ表示）
パンくずリスト統合4段階進捗バー（全1306スライド対応）
セクション/チャプター境界のシーンカードトランジション
大カテゴリー間の自動ナビゲーション
localStorageによるスライド位置復帰

詳細: Udemy撮影用フォーカスモードの設計と実装

今日の学び

URLという「たまたま一致していたキー」に依存すると、不整合がデータ構造の奥に隠れる。マッチングキーを変えた瞬間に末尾の句点バグが浮上した
<slot /> はpropsを渡せないというNuxtの制約から、composable + useStateパターンに30分かけて切り替えた。結果的に最もシンプルな設計に落ち着いた
進捗バーの背景フィルは、数字を読まなくても色の面積で進捗が伝わる。二重チャネルの情報伝達
動画撮影では暗転トランジションが「章が変わった」という認知的な区切りになる。テキストだけの学習プラットフォームなら不要だが、映像メディアには必須

積み残し

目次ページのColumn 2ハイライトバグ（リロード時にBSPLがハイライトされる問題）の調査・修正
セクション要約データの残り章分の追加