Excel講座のNG集をブラウザ上のExcel再現に作り直す:並行セッションの分担と確認URLのGoogleタスク登録

開発eurekapu-nuxt4

Excel講座のNG集をブラウザ上のExcel再現に作り直す

localhost:3200/dev/excel-render?section=donts-c03-s01 を開いたら、NG集の区間の冒頭で、まだ文章の読み上げが流れていた。 そのあとに続くのも、Excelの再現画面ではなく自分の録画だった。 講座の動画は、基本的にすべてブラウザ上でExcelの画面を再現する形に移すつもりでいた。 NG集は対象から外れていたのだろうか。

この日の eurekapu-nuxt4 には、4つのセッションの記録が残っている。 NG集の作り直しを進めながら、その横では、別の章の画面再現を2つのセッションに分担させてコミットまで持っていった。 確認すべきページはGoogleタスクに積んだ。

NG集が止まっていた理由

計画書を見直すように頼むと、NG集は対象に入っているという答えが返ってきた。 計画書の137区間のうち、24区間がNG集である。 止まっていたのは、計画書 §3-1 に「試作の見た目が決まるまで、その部品を使う区間には広げない」と自分で決めていたからだった。 NG集で作ってあったのは、試作P4(Alt+Tab でファイルを切り替える区間 donts-c00-s00)の1本だけで、残り23区間はP4の確認待ちになっていた。 同じ理由で止まっている区間と未着手の区間を合わせると、54区間ある。

P4のURLを出してもらって見たところ、問題はなかった。 「P4はこれでOK、NG集の残りも進めて」と返した。

P4を作った別セッション(876137)はもう動いていなかったので、このセッションで引き取らせた。 指示書と計画書を更新させてから、Opus のサブエージェントを5体起動し、1体5区間ずつ、計25区間(NG集23区間とキーボードの2区間)を作り直させた。

上がってきた区間は、Claude Code に静止画で全数を確かめさせた。 引っかかったのは2点である。

  • 「SUMIFSを使う理由」の23秒の画面に、黒い空の塊が1枚映っていた。台本を直す前に撮った古い静止画で、撮り直すと消えた
  • 台本が音声より後に直された区間が9本あった。語りの文と音声がずれていないかを突き合わせさせた

途中で、音声合成の待ちプロセスが3つ残っているのに気づいた。 このまま待っても永久に動かない状態だというので、自分で止めた。 止めたあと、合成のロックが残っていないことと、音声が何も変わっていないことを確かめさせた。

グループ化とマイナス表示は再現しきれない

作り直した画面を見ていくと、グループ化の区間で引っかかった。 マイナスの表示が、本物のExcelと違う。

ここは再現を頑張るより、自分の録画を使うほうがいい。 ただ、どちらがいいかは並べて見ないと決められない。 そこで、プレビューに「録画の版」と「再現の版」の2つを並べて、選べるようにしてほしいと頼んだ。 録画の版は冒頭のイントロダクションを直し、再現の版はそれ専用に組み直す。 細かい進め方は「おすすめの方法で全部やってください」と任せた。

作業の途中で、Claude Code から報告が1つ上がってきた。 「出典の明示」の区間は、作り直す前の元の版のほうが良く、作り直しで元の版のいちばん大事な点が抜けていたという。

録画の版(A版)は、冒頭がなかなか録画の画面にならなかった。

  1. 4本の録画の最初の画面を確かめさせ、新しい冒頭の語りを本人の声で合成させた
  2. A版を開くと、冒頭でまだ文章の画面が出ていた。録画の画面に切り替わる仕組みを調べさせた
  3. 再生の最初の一瞬に文章が見えて、それから録画へ流れる動きが残っていた
  4. 最初から録画を出すために、A版では冒頭の文章の欄そのものを出さない形に直させた

A版とB版の並びはブラウザで確かめさせ、ユニットテストも流させた。

録画のある4区間は、A版とB版を並べた状態で自分の確認を待っている。 どちらを採用するかは、まだ決めていない。

並行セッションとのコミット分担

NG集と並行して、別の2つのセッションが講座の別の章を画面再現にしていた。 片方(eurekapu-nuxt4-85)は基本機能の23区間を、もう片方(876137)はキーボードショートカット、Stream Deck、Excel設計の原則を受け持っていた。

876137側は、設計の原則の25区間を Opus のエージェント5体に作らせていた。 25区間ともExcelでの検算が全一致し、本人の声での合成まで済んだ。 静止画は Claude Code に全数を見させ、登録の検査も195件すべて通った。 1区間だけ、配色ルールに無い薄い水色(DDEBF7)で列を塗っていて、ルール内の色に替えるかどうかの判断を自分に求めてきた。

困ったのは共有部品である。 bookScene.ts や ExcelRibbon.vue など10本のファイルでは、両方の変更が1つのファイルの中で混ざっていて、ハンク単位で分けてコミットするのは難しかった。 セッション同士でやりとりさせた結果、案Bに落ち着いた。 コミットの指示を受けていない876137側はコミットせず、85側が共有部品の両方の変更をまとめて1回でコミットする。

コミットの手前では、こんなことが起きていた。

  • 85側から、876137側の台本3本に、使っていない import があるという ESLint の指摘が届いた。消させて、エラー0を確かめさせた
  • 85側のコミットゲートで、Codex が876137側の DeskApps.vue に high を1件出した。アイコンを選ぶ関数に、型の上では渡せないファイルの種類(xlsx、pdf)を渡していたという指摘である。実行時は変換が効いて正しいアイコンが出るので、85側も876137側も low と判定した。ただ、コミットを止めないために、85側で型の注記だけ直させた

コミット 8bff4d64(121ファイル)に、876137側の作業分もすべて入った。 この時点では push していない。 876137側ではこのあと、PDFなどを前に出している間はメニューバーをそのアプリのものに切り替える変更も入れさせた(1a42e6a0)。

基本機能の23区間で直したもの

85側のセッションでは、基本機能の画面再現を仕上げさせた。 再現エンジンに PV 関数を足させ、Excel全幅の画には、フィルターのボタンと絞り込み中の行番号の青を重ねて描かせた。 リボンには数式タブとメニューを足させた。 「形式を選択して貼り付け」の画面は、教材にある模擬画面の文言と突き合わせさせた。 語りの「行列を入れ替える」も画面の表記に合わせて直し、その区間の音声を作り直させた。

全20区間の静止画を、区間ごとに6時点ずつ撮り直させた。 はみ出しは直ったものの、今度は演算の欄の2列が左に寄って詰まった。 中身に合わせて幅を配分するのは、上の「貼り付け」の欄だけに絞らせた。 3区間の音声も作り直させ(112秒、122秒、120秒)、直した字幕が1行に収まることを静止画で確かめさせた。

876137側からは、フィルターの描画の不具合が1件届いた。 readable-sheets-c00-s02 で A社に絞り込むと、隠れた行8〜10の行番号が、行7の下に重なって描かれる。 原因は、フィルターで隠した行の高さはゼロなのに、重ねて描く層が行番号を描き続けていたことだった。 見えている行だけに描く形に直させると、46秒の画面で行7のすぐ下に行11が来た。

最後に通したものは次のとおりである。

  • 登録の検査 195/195、回帰テスト 43/43
  • excel-render.vue の ESLint エラー5件。コミット済みの版にも同じエラーがあり、元からの問題だった。型の宣言を import の後ろへ移して直させた
  • ユニットテスト全体(4,423件)で落ちていた2件。区間が増えて並びが変わったサイドバーのテストで、直したあと 4/4 通った

一度目のコミットのあと、Codex のレビューの記録が見当たらなかった。 ゲートが飛ばされた可能性があるので、残りのコードと計画書をステージし直してレビューを受けさせた。 high が3件出た。 先の DeskApps.vue の件もこの中にある。 中身を見させ、型検査(vue-tsc)でも関係するファイルにエラーが出ないことを確かめさせてから、コミットし直させた。 次に出た指摘は型の注記だけで、実行時の動きは正しかった。 Claude Code の判定は low である。 それでも、戻り値の型を1か所広げれば済むので直させ、最後は pass で通った。

Googleタスクへの登録と一時スクリプトの正式化

どのセッションでも、最後は同じ頼み方で締めた。 確認すべきページを http://localhost:3200/... のフルパスで、何を見ればいいかと組にしてGoogleタスクに積んでおいてほしい、と。

  • 876137側:確認事項9件。各タスクの詳細欄に、URLと見るポイントを書かせた
  • NG集のセッション:期日10/1の確認用タスク3件。翌朝、ここから始めるためである。計画書の進捗も更新させ、4つのコミットに分けて origin/main まで push させた
  • 85側:5件。実物のExcelと表示が一部合わない箇所について、本番の音声の長さから「何分何秒あたりに何が映るか」を求めさせ、その時刻も添えさせた

85側で「反映して」と言ったときは、着手前に意味を確かめられた。 push か、講座に組み込むか、の2通りである。 まだ自分が確認している最中なので、push だけにした。

876137側を閉じる前に、もう1つ頼んだ。 画面の再現に使った一時スクリプトは、正式なスクリプトにしておいてほしい。 2027年版、2028年版と年度ごとにExcelの機能が増えたり、中身を微修正したりするときに、何度も使うからである。 書き捨てのファイルなら要らない。 6本を動かして確かめさせ、一時スクリプトを消して、参照している文書の名前も書き換えさせた(f0ef2133)。 消す前に、876137側から別のセッションへ問い合わせも行っていた。 問い合わせを受けたセッションは scripts/_*.tmp.* を実行しているプロセスが0件だと確かめ、すぐ消してよいと返していた。

TikTokの予約投稿をやり直す

NG集のセッションの冒頭では、Googleタスクの未完了27件を「自分にしかできないもの」と「Claude Code ができるもの」に仕分けさせた。 自分の判断や目視が要るものが19件、Claude Code ができるものが7件、分担するものが1件だった。 急ぎはTikTokの#02のハッシュタグ確認で、#03がその日の19時に公開される予定だった。

#02を開いて説明文を確かめさせると、ハッシュタグは効いておらず、公開から15時間たっても再生は0回だった。 #03〜#06を、タグ5つ付きで予約し直させ、古い予約は削除させた。 #IF関数 だけは候補を選んだあとに消えたので、足し直させた。 #06は、動画のアップロードの段階で自動モードの権限確認に止まった。 自分が「やっていい」と返して、残りを済ませてもらった。

片付けの段階で、Claude Code が作業用の一時フォルダを消そうとしていることに気づいた。 それは自分で消すと言って、コマンドだけ教えてもらった。 中身はすでに消してあり、空のフォルダだけが残っていた。 前回の削除が「使用中」で失敗したのは、Claude Code のシェルがそのフォルダの中にいたためだろう、という説明だった。 自分で実行し、消えたことを確かめさせた。

学び

  • 区間を止めていたのは、計画書に自分で書いた「試作の見た目が決まるまで広げない」というルールだった。止まっている理由は、まず計画書の中に探す
  • 再現しきれない画面は、直すか諦めるかの二択にしなくてよい。録画と再現を並べて残せば、判断を後へ回せる
  • 録画の版の冒頭に一瞬だけ文章が映る問題は、文章の欄そのものを出さない形にして、最初から録画を出すようにした
#Excel講座#画面再現#Claude Code#サブエージェント#Googleタスク#Codex