Excel操作動画のレッスン画面をミラーカラムに直す：自動再生とdev限定カード、CF精算表Step 7のカメラ調整

Excel の操作を再現した動画を見るページ（excel-scene の開発用ページ）では、サイドバーに「関数の活用」の動画とCF精算表の動画が同じ並びで入っていた。 CF精算表の動画はStepごとに増えていて、最終的にはStep 7まで入る見込みである。前日には、Step 2〜5 の動画を並列セッションで作っていた（Claude Codeの並列セッションでExcel操作動画を作る）。朝、精算表のステップ学習を一つのセクションにし、その中にStepをチャプターとして並べて、関数の活用とは分けてほしいと Claude Code に頼んだ。

サイドバーを3階層にしたら「違う違う」

最初に出てきたのは、サイドバーを「セクション → チャプター → 動画」の3階層に組み直したものだった。セクションは「関数の活用」と「CF精算表ステップ学習」の2つである。表示確認の途中でサイドバーが空になり、ページがハイドレートされていなかったので、Claude Code が読み込み直す一幕もあった。追加したユニットテスト2件も通っていた。

ただ、欲しかったのは入れ子の階層ではない。「違う違う、ミラーカラムにしてほしいんですよ」と返した。 Claude Code は、左から「セクション｜チャプター｜動画」の3列に作り直した。セクションを押すとチャプター列が、チャプターを押すと動画列が切り替わる。

チャプターを押したら1本目を開く

3列になったところで、今度はクリックの数が気になった。チャプターを押しても動画列が切り替わるだけで、動画を開くにはもう一度押さなければならない。チャプターを選んだら、そのチャプターの一番最初の動画に切り替えてほしいと頼んだ。

Claude Code はブラウザで「Step 3 貸付金」を押し、Step 3 の1本目（貸付金と利息を年次推移表まで入れる場面）が開いて、3列とも選択がそろうことを確かめた。いま見ている動画のチャプターを押したときは、1本目へ戻さずにそのままにする扱いも入っていた。

講座のミラーカラムに見た目と開閉をそろえる

ここで講座の basic-functions のレッスンページを示し、ミラーカラムの CSS をこれに合わせてほしいと伝えた。セクションとチャプターの列を、ちゃんと閉じられるようにしたかった。

Claude Code が講座側の実装を調べると、ミラーカラムは3列ではなく、2列に閉じるボタンを付けた構成だった。そこで excel-scene 側も2列にした。左が「セクション」の列、右が「チャプター」の列で、チャプター列では各 Step の下にそのチャプターの動画を常に並べる。閉じるボタンの動きと、動画を切り替えても閉じた状態が残ることまで、Claude Code がブラウザで確かめた。

矢印キーと「自動で次へ」

続けて、矢印キーで動画を移れるようにしてほしいと頼んだ。あわせて、1本終わったら止まらずに次の動画へ移る自動再生も頼み、トグルボタンで切り替えられるとうれしいと付け加えた。

← で前の動画、→ で次の動画へ移る。講座と同じ割り当てである。ツールバーには「自動で次へ」のボタンが付き、動画をまたいでも再生速度を引き継ぐようにした。

自動再生の確認では、Claude Code がボタンをオンにし、2倍速で終わり間際までシークして再生した。次の動画へ移り、そのまま再生が続いた。テストのために変えた速度とボタンは、Claude Code が1倍とオフに戻した。ユニットテストは3件通った。

dev限定ページへの入口を見出しで分ける

もう一つ気になっていたのが、動画制作用のページ（excel-render）と excel-scene の2ページに本番から行けるのか、という点である。答えは「どちらも行けない」だった。 app/pages/dev/** は nuxt.config.ts の ignore で本番ビルドから外してあり、本番にはそもそも存在しない。

excel-render には、トップページに開発環境だけで出るカード「Excel講座・動画制作」が前からあった。 excel-scene 側にも、dev 限定のカードを足させた。ところがトップページを見ると、公開用のカードと dev 限定のカードが混じっていて分かりづらい。ツール資料の下に「開発環境でしか表示されない」と分かる見出しを一つ作り、その下にカード2枚を置く形にしようと提案した。

見出しは「開発環境のみ」で、本番には出ない旨の添え書きが付いた。その下に Excel 用のカード2枚が2列で並ぶ。「コンテンツ」のカード5枚は元のままである。

次に excel-scene を開くと、ページの一番上にヘッダーがない。 eurekapu のロゴとサイト名を入れて、dev 環境のほかのページと表記をそろえてほしいと頼んだ。ヘッダーを付けた直後はサイドバーが空になり、動画枠の下端も切れて見えたので、Claude Code はその原因も調べた。仕上がりは excel-render と同じ形のヘッダーで、左に「Eurekapu › 画面再現」（押すとトップへ戻る）、右に「開発環境のみ」のバッジが出る。

ここでコミットを指示し、2件に分けてコミットさせた。 push はしていない。トップページの変更は a9e0a80b である。

CF精算表 Step 7：集計対象の列を全部映す

午後は、前日から続く CF精算表 Step 7（総合演習）の動画に戻った。引き継ぎプロンプトを渡して再開すると、Claude Code は bookScene.ts などに未コミットの差分があるのを見つけた。関数の活用のセッションの作業とみて、そこには触らなかった。

静止画を見ていて引っかかったのは、法人税の支払額や営業キャッシュフローの場面である。集計の対象になっている列は、W 列より左にある。それなのに画面が寄りすぎていて、どこを集計しているのかが見渡せない。文字が小さすぎたら困るが、それでも全体感を優先したほうがいいと考えた。文字が小さければ Excel で確かめられるし、どこを集計しているかが分かるほうが大事だ。そこで「集計対象の列はすべて画面に表示する」というルールでチェックしてほしいと伝えた。

直した 7b では、J〜AO の全体が映り、J54:AI54 が黄色の枠で囲まれた。小計の場面では、AM36:AM50 に縦の枠が付く。 Claude Code は 7c〜7f も静止画を撮り、レイアウト検査を通した（7f は詰めた列が多いぶん、文字が大きめになった）。ハッシュを取り直すと、7a は変わらず、変わったのは 7b〜7f だけだった。

作業の裏では、いつもの dev サーバーが2度止まった。自分の操作かメモリ不足かは分からないまま、Claude Code は自分用に別ポートで dev サーバーを立てて続けた。

カメラの位置を数値で直したい

ハッシュの計算を待つあいだに、Claude Code はカメラの動きを見える化する計画書を書き、Codex のレビューに出していた。判定は「着手可能」で、決めることは3つ。決裁フォームのボタンで、3つとも推奨案を選んだ。

実装では、書き出しの画（見出し、ステージ、字幕）を部品 ExcelSceneFrame.vue に切り出した。切り出す前と後の静止画は、ピクセル単位で一致した。カメラの単体テストでは、倍率の上限（1）にかかって右端が延びる結果が出た。これは仕様どおりの動きで、Claude Code は上限にかからない幅（J〜AO）でテストし直した。

ページを直す前に、Claude Code から一度止められた。開いているタブの手直し（1:40 と 1:55 あたりの青い区間）がまだ保存されておらず、読み込み直すと消えるという。保存してから知らせると、カメラのタイムラインは再生ボタンのすぐ下へ移り、動画の画面をクリックすると再生と一時停止が切り替わるようになった。

実際に手直しを始めて、やりにくさに気づいた。列と行の丸いつまみをドラッグしないとカメラの範囲を動かせず、微修正がむちゃくちゃしづらい。止めた位置で、左端の列、右端の列、上端の行、下端の行の値をパラメータとして常に出し、そこで直せるようにしてほしいと頼んだ。メーターによる見える化は、それはそれで残してよい。

Claude Code はエンジン側に「下端の行」を足し、4つの値を入力欄に常に出して、1ずつ動かせる −/＋のボタンも付けた。対象は、その時刻を含む文である。途中でシェルの引用がこじれ、スクリプトをファイルに書いてから実行し直す場面があった。

コミットは一度では通らなかった。 22ファイルをステージして Codex のレビューのゲートに出したあと、保存 API に手直しの履歴を残す変更を足すことになった。スクリプトでの置き換えが最初の1件で失敗して何も書かれなかったので、Claude Code は Edit ツールで1つずつ入れ直した。 7b の回帰テストとカメラのテスト、あわせて9件が通ってから、コミットをやり直した。

5件の手直しと、翌日のタスク

手直しが5件たまったところで、Claude Code は5つの文を「手直しあり」と「自動」で2枚ずつ、計10枚撮って並べた。共通点を言葉にまとめ、それが合っているかと、ほかの動画への当て方をボタンで答えるページも用意した。

ところが PC のメモリが足りなくなり、裏で動いていたサーバー2つが止まった。確認ページも開けない。そろそろ空いたかと聞くと、空きメモリは 2.7GB だった。 Claude Code は軽い決裁フォームだけを立て直し、4GB 以上使う dev サーバーは立てなかった。

返答は明日に回すことにした。手直しは、まだそれほど積み上がっていない。明日の Google タスクに「Step 7 カメラの手直しの共通点を確認して答える（判断3件）」を登録させ、サーバーは落としてもらった。止めたはずの dev サーバーが1つ生き残っていて、ポートを指定して止め直す一手間が入った。

ほかに積み残しはないか、と最後に聞いた。 Claude Code が前日の計画書を読み直すと、明日のタスク以外にも残っていた。計画書の積み残しの節は、今日の状態に合わせて書き直された。「y」と返すと、「Step 7 総合演習の動画の確認の続き（7b 5:19〜・7a・7c〜7f・講義ノート）」も、期日 2026-09-26 でタスクに登録された。

Claude Code がまとめた共通点は、自分が手を入れたときの意図と合っているのか。それを確かめるのは、明日の自分である。

学び

「ミラーカラム」と言ったとき、自分の頭にあったのは講座の「2列に閉じるボタン」のレイアウトだった。3階層、3列、2列と、朝のうちにサイドバーを2回作り直している。最初から講座のページを示していれば、回り道は減ったかもしれない。
カメラの範囲は、丸いつまみをドラッグするだけでは微修正がしづらい。手直しを始めてから、止めた位置の値を数字で出して直したくなった。
画面の寄り引きは、文字の大きさより「どこを集計しているか」が見えることを優先する。細かい数字は Excel で確かめられる。

#Claude Code#Nuxt#ミラーカラム#Excel#キャッシュフロー精算表#動画制作