Excel講座の画面再現ページを3つに分け、演習10区間を作り直した日(並行セッションの重複整理つき)

開発eurekapu-nuxt4

Excel講座の画面再現ページを3つに分け、演習10区間を作り直した日

朝の棚卸しで閉じたのは23件中11件

朝、Googleタスクを開いて、昨日からの積み残しを Claude Code に見てもらった。 昨日が期限のものは自分の iOS 関連が2件で、Claude Code 側の積み残しは実質なかった。

気になったのは、昨日より前のタスクである。 Excel 系は、制作画面で「完了」が付いている区間が多いはずなのに、タスクは開いたままだった。 進捗を確かめて、閉じられるものは閉じてもらうことにした。

完了の記録は Cloudflare D1 に入っていた。 読み取りだけで184区間分を取り出してもらい、各計画書のチェック欄と突き合わせた。 Excel 系の23件のうち、根拠がそろった11件を完了にした。 残る12件は、まだ終わっていなかった。

閉じるつもりで始めた一日だったが、最後は明日のタスクを足して終わることになる。

3つの講座が混ざっていた画面再現ページ

制作画面(excel-scene)では、cfws-step1 を開いても、Excel基礎講座とキャッシュフロー精算表ステップ学習とエクセルスマホの区間が混ざって並んでいた。 管理しやすくするため、キャッシュフロー精算表とスマホを切り出して、それぞれ独立したページにすることにした。 トップページの開発用の欄に各ページへ移れるカードを置けば、何が進んでいるかも一覧できる。

実装は Claude Code に任せた。 「URL からどのシリーズか」「シーンがどこに属するか」を返す純粋関数を先に作ってテストを通し、ページ本体を URL ごとに絞る形へ書き換えてもらった。 キャッシュフロー精算表のページには、CF の20本だけが並ぶようになった。 旧 URL からの転送も確かめた。

トップのカードは奇数枚で、右下に灰色の空きマスが出ていたので埋めてもらった。 カードには完了本数も出る。 コミットは 85b2d7fc(5ファイル)。

設計の原則とNG集のフィードバックを直す

続いて、設計の原則と NG集の区間に付けたフィードバックを流し込んだ。 仕分けの結果をもとに改善ドキュメントを2本(Ⅲ 設計の原則、Ⅳ NG集)書いてもらい、本計画とのあいだに相互リンクを張った。 判断事項の6つには決裁フォームで答え、6つとも推奨の A を選んだ。

直す区間は6つあり、3区間はサブエージェント3体に任せ、残りの3区間は Claude Code 本体に直させた。 新しいチェックリストの区間が、Ⅲ の中ではなく末尾の別セクションに出る問題も見つかった。 目次の正本(tocExcel.ts)に章が入っていなかったためで、章を足して目次を生成し直した。

コミット d34d7015(25ファイル)の前の Codex レビューで、1件止まった。 講座本文の「Ctrl+A で全体を選んで」という説明について、表の中のセルを選んでいると1回目は表の範囲しか選ばれない、という指摘である。

donts-c15-s00 が「読み込み中」のまま止まる

NG集の donts-c15-s00 を開くと、画面が「読み込み中」から進まなかった。

最初の見立ては、マインドマップ版(B)が別の区間から借りている画面の読み込みに失敗している、というものだった。 借りている区間の API を直接叩いてもらうと、正常に返ってくる。 そこで、ブラウザ側で何が起きているかを調べる方向に切り替えた。

直してもらったあとは、別の区間から画面内で移ってきたときに、借りる画面の動画6本を取りに行くようになった。 確認は、自分がやったのと同じ手順(別の区間から画面内で移る)で再現してもらった。 この症状が出るのは donts-c15-s00 の B だけで、ほかの動画には影響がない。 コミットは d94e78a3(1ファイル)。

同じ区間に、フィードバックをもう1件足した。 音声入力が「地下のダイアログ」と変換していたが、「置換のダイアログ」のことだと読み取ってもらえた。 B が借りていたのは Ⅲ c02-s00 の置換の場面で、簡易版の画面が rsAlignIndent.ts の1か所にだけ残っていた。 手本の basicExReplaceWildcard.ts の書き方にそろえて直してもらった。 ついでに c08-s00 のフィードバックも片付けた。 画面に出る2か所(E4 の見出しと B1 のメモ)を「出所」にし、字幕は語りの読みに合わせてそのままにした。 コミットは ea5a1025(2ファイル)。

全区間完了、そして「まだ4つとも動いてない?」

各セクションに完了が付きそろったので、本計画と、そこから枝分かれした改善計画を更新してもらった。 画面再現にした180区間はすべて完了で、設計の原則と NG集の未対応フィードバックも0件。 Googleタスク「Excel設計の原則 25本の画面再現を確認」も閉じた。

次にやることが5つあった。 実機の Excel での確認、店名の差し替え、資産 ID の修正の3つはサブエージェントに任せ、残り17区間の引き継ぎプロンプト、説明2つ、Codex のデューデリジェンス計画の確認は Claude Code 本体に回した。

サブエージェントがまだ4つとも動いているのでは、と聞いた。 動いているのは3体で、デューデリジェンスの報告書を読む1体は止めてあった。

もう一つ、自分が操作していると、実機の Excel を確かめるサブエージェントのキー入力が取られてしまうようだった。 操作をやめたので続けてほしい、とサブエージェントへ伝言してもらった。

実機での確認は、10項目のうち7つが一致し、3つは画面の文言が実物と違っていた。 グループ化の操作にも食い違いが1つあり、4か所を直した。 直した演習ファイル4本を R2 に上げ、コミット(8ddfea24)して、済んだGoogleタスク4件も閉じた。 ところが3本は、CDN に古い版が残っていた(HIT)。 キャッシュの削除は対外的な書き込みなので、了承してから消してもらった。

ここで1回空振りした。 最初の実行は確認用の --force が付いておらず、何も消さずに終わっていた。 付け直して実行し直し、公開側から返るファイルの md5 がローカルと一致することで、新しい版に替わったと確かめた。 --force が要ることと消えたかの確かめ方は、手順書にも書き足してもらった。

実物と完全には一致しない2区間(判断の③)は、画面に見えない差なので受け入れることにした。 計画書にチェックを付けてコミット(3af7fc93)し、タスクも閉じた。

残り17区間のセッションで、同じ区間を2か所で作っていた

残り17区間は、引き継ぎプロンプトを渡した別のセッションで進めた。 ワークツリーを切り、専用ポートで dev サーバーを立て、git 管理外で22GBある audio-assets/ は main 側へのリンクにした。 バージョン管理の方法(c08-s01)は本体に作らせ、本人の声で144秒、5拍に仕上がった。 ハードウェアの3区間はサブエージェントに分け、イントロの3区間(readings、top、contents)も並行で進めた。 演習は下調べを読み取り専用のエージェントに任せ、計画書(判断6つ)を書いてもらった。 Codex の再レビューで「可」が出て、判断の6つにはすべて推奨の A で答えた。

ところが、main 側で動いている別のセッションが、同じ4区間(バージョン管理の方法とハードウェア3つ)を作っていた。 作業が消えていないのは、まず幸いだった。 4区間は向こうの版を残すことにし、こちらの台本は退避用のフォルダへ移した。

演習も重なっていた。 向こうでは、演習の作り直しを別の計画書(redesign-plan)で設計していて、自分の判断を待っていた。 演習は redesign-plan に一本化すると決め、セッション間メッセージで向こうへ伝えてもらった。 こちらの演習計画書は、Codex のレビューまで通したものだったが、冒頭に取り下げと書いて閉じた。 redesign-plan を書いたのは向こうのセッションでも、イントロ3区間と演習10区間を作るのはこちらの担当、という分担はそのまま残った。

線の長さから、マインドマップ版をやめるまで

マインドマップの区間にフィードバックを付けた。 「よくある困りごと」へ伸びる線が長すぎる。 全体を小さくしてまで線を伸ばす理由がわからないので、少なくとも「検証可能性」の横幅までに縮めてほしい、と頼んだ。

原因は、列の幅を計算するときに Excel の画面のノード(幅1280)が入り、次の列が遠くへ押し出されていたことだった。 共通の部品を直し、マインドマップの検査56件が通った。

そのあと、top と contents に、左にツリー、右に Excel のパネルを並べる表示(side: true)を作ってもらった。 配分は左640、Excel 1220(A の約0.64倍)。 見てみると、Excel 側が引きすぎていて何も見えない。 自分の動画でも、説明している Excel 側に寄っていたと思う。 そう伝えると、Excel を出している間はツリーを消し、Excel を A の約0.98倍で全面に出し、今の論点は見出しの帯のパンくずで見せる形になった。

ここで、行ったり来たりする画面そのものが鬱陶しくなった。 トップの区間は概要なので、ざっと流れれば足りる。 論点の一覧は目次に残っている。 そこで、マインドマップ版はやめると決めた。 代わりに、画面再現版(A)の見出しの帯に、マインドマップで出していた「いまここ」の札を、論点が替わるたびに切り替えて出す。 top と contents の両方をこの形にしてもらい、静止画4枚で見え方を確かめた。

コンテキストが一杯になり、/compact のあとで演習10区間

このセッションはコンテキストが一杯になった。 引き継ぎドキュメントではなく、引き継ぎのプロンプトをダウンロードフォルダのテキストファイルに書き出してもらい、/compact した。

再開直後に、dev サーバーが止まった。 PC のメモリが足りなくなり、Claude Code が自動で止めたもので、サーバー自体の不具合ではない。

そのうえで、演習10区間を作ってもらった。 並びは実務練習を先に置き、卒業課題の章を新しく足し、旧総合演習の章を外す。 卒業課題の Excel は、生成スクリプト(build_graduation.py)で作る。 実務練習の概要と卒業課題の解答①は本体が書き、実務練習01から05はサブエージェントに分けた。

区間声の長さ
実務練習の概要(c01-s00)188秒
実務練習01336秒(9拍)
実務練習02338秒(10拍)
実務練習04278秒
実務練習05318秒
卒業課題 解答①(c02-s01)252秒
卒業課題 解答②(c02-s02)250秒
答え合わせ(c02-s03)172秒

途中で、実務練習05の配布ファイルに打ち間違いが見つかった。 解答の連結WS_sum の E34 に、文字の「b」が入っていた。 この科目は0なので合計は変わらないが、手直しのスクリプトで同じ行と同じ数式に戻した。

実務練習05は、実物の Excel と3,452セル中3,449セルが一致した。 ずれた3セルは、どれも動画には映らない連結WS のチェックの行である。 計算の端数(およそ -0.000000000007)を、エンジンは「▲0」、Excel は「0」と表示していた。

進捗を URL で知りたいと頼んだときには、前の dev サーバーが応答しないまま居座っていた。 そのプロセスだけを番号指定で止めて、起動し直してもらった。

確認は明日に回すことにした。 明日(10/7)のGoogleタスクに登録してもらい、計画書にもフルパスの URL を書き込んでもらった。 登録では一度つまずき、最後は CLI の入口を node で直接呼んで通した。

相互リンクの件は、音声入力のせいで一度すれ違った。 「別途つけた」が「ベッドつけた」に化けていて、言い直しても、卒業課題の配布ファイルのことだと受け取られた。 自分でも何と入力したか覚えていなかったので、届いた音声入力を出し直してもらった。 読み返して、演習を別の計画書に切り出したので、本計画と相互リンクがあるかという質問だったと伝えた。 今日まで、どちらからもリンクはなかった。 今回、両方向に付けてもらった。

最後に静止画を撮ると、レイアウト検査で引っかかる所が出た。 実務練習02から05を、サブエージェント4体で直した。 実務練習05ではキーの札のはみ出しが33件あり、数式バーが開ききる前に札が出ていたのが原因だった。 札を出す時刻は後ろへずらした。 イントロ3区間と演習10区間は、どれも静止画のレイアウト検査に通った。

学び

  • CDN のキャッシュ削除は、--force が無いと何も消さずに終わる。消えたかどうかは、公開側から返るファイルの md5 で確かめる
  • 概要の区間は、マインドマップで行ったり来たりさせるより、見出しの札で「いまここ」を示し、論点の一覧は目次に任せる形にした

明日は、Googleタスクに入れた URL から、イントロ3区間と演習10区間を見る。 dev サーバーは、メモリ不足で起動元のシェルが止められたあとも応答していた。 ただ、この先も応答し続けるかはわからない。

#Excel講座#画面再現#Claude Code#サブエージェント#Googleタスク#Cloudflare