[{"data":1,"prerenderedAt":293},["ShallowReactive",2],{"content-/excel-course-donts-screen-recreation":3,"all-pages-for-dir":271,"related-/excel-course-donts-screen-recreation":272,"og-image-/excel-course-donts-screen-recreation":292},{"id":4,"title":5,"body":6,"category":250,"concepts":251,"description":252,"extension":253,"meta":254,"navigation":255,"ogImage":251,"path":256,"project_name":257,"published":258,"publishedAt":259,"seo":260,"source":261,"stem":262,"tags":263,"todo":251,"unpublished":258,"updatedAt":251,"__hash__":270},"pages/2026-09/2026-09-30/excel-course-donts-screen-recreation.md","Excel講座のNG集をブラウザ上のExcel再現に作り直す：並行セッションの分担と確認URLのGoogleタスク登録",{"type":7,"value":8,"toc":239},"minimark",[9,14,22,25,30,37,40,43,46,56,59,62,65,68,71,74,89,92,95,98,101,104,107,110,122,133,136,139,142,149,152,166,172,176,183,194,197,208,212,215,222,225,228],[10,11,13],"h1",{"id":12},"excel講座のng集をブラウザ上のexcel再現に作り直す","Excel講座のNG集をブラウザ上のExcel再現に作り直す",[15,16,17,21],"p",{},[18,19,20],"code",{},"localhost:3200/dev/excel-render?section=donts-c03-s01"," を開いたら、NG集の区間の冒頭で、まだ文章の読み上げが流れていた。\nそのあとに続くのも、Excelの再現画面ではなく自分の録画だった。\n講座の動画は、基本的にすべてブラウザ上でExcelの画面を再現する形に移すつもりでいた。\nNG集は対象から外れていたのだろうか。",[15,23,24],{},"この日の eurekapu-nuxt4 には、4つのセッションの記録が残っている。\nNG集の作り直しを進めながら、その横では、別の章の画面再現を2つのセッションに分担させてコミットまで持っていった。\n確認すべきページはGoogleタスクに積んだ。",[26,27,29],"h2",{"id":28},"ng集が止まっていた理由","NG集が止まっていた理由",[15,31,32,33,36],{},"計画書を見直すように頼むと、NG集は対象に入っているという答えが返ってきた。\n計画書の137区間のうち、24区間がNG集である。\n止まっていたのは、計画書 §3-1 に「試作の見た目が決まるまで、その部品を使う区間には広げない」と自分で決めていたからだった。\nNG集で作ってあったのは、試作P4（Alt+Tab でファイルを切り替える区間 ",[18,34,35],{},"donts-c00-s00","）の1本だけで、残り23区間はP4の確認待ちになっていた。\n同じ理由で止まっている区間と未着手の区間を合わせると、54区間ある。",[15,38,39],{},"P4のURLを出してもらって見たところ、問題はなかった。\n「P4はこれでOK、NG集の残りも進めて」と返した。",[15,41,42],{},"P4を作った別セッション（876137）はもう動いていなかったので、このセッションで引き取らせた。\n指示書と計画書を更新させてから、Opus のサブエージェントを5体起動し、1体5区間ずつ、計25区間（NG集23区間とキーボードの2区間）を作り直させた。",[15,44,45],{},"上がってきた区間は、Claude Code に静止画で全数を確かめさせた。\n引っかかったのは2点である。",[47,48,49,53],"ul",{},[50,51,52],"li",{},"「SUMIFSを使う理由」の23秒の画面に、黒い空の塊が1枚映っていた。台本を直す前に撮った古い静止画で、撮り直すと消えた",[50,54,55],{},"台本が音声より後に直された区間が9本あった。語りの文と音声がずれていないかを突き合わせさせた",[15,57,58],{},"途中で、音声合成の待ちプロセスが3つ残っているのに気づいた。\nこのまま待っても永久に動かない状態だというので、自分で止めた。\n止めたあと、合成のロックが残っていないことと、音声が何も変わっていないことを確かめさせた。",[26,60,61],{"id":61},"グループ化とマイナス表示は再現しきれない",[15,63,64],{},"作り直した画面を見ていくと、グループ化の区間で引っかかった。\nマイナスの表示が、本物のExcelと違う。",[15,66,67],{},"ここは再現を頑張るより、自分の録画を使うほうがいい。\nただ、どちらがいいかは並べて見ないと決められない。\nそこで、プレビューに「録画の版」と「再現の版」の2つを並べて、選べるようにしてほしいと頼んだ。\n録画の版は冒頭のイントロダクションを直し、再現の版はそれ専用に組み直す。\n細かい進め方は「おすすめの方法で全部やってください」と任せた。",[15,69,70],{},"作業の途中で、Claude Code から報告が1つ上がってきた。\n「出典の明示」の区間は、作り直す前の元の版のほうが良く、作り直しで元の版のいちばん大事な点が抜けていたという。",[15,72,73],{},"録画の版（A版）は、冒頭がなかなか録画の画面にならなかった。",[75,76,77,80,83,86],"ol",{},[50,78,79],{},"4本の録画の最初の画面を確かめさせ、新しい冒頭の語りを本人の声で合成させた",[50,81,82],{},"A版を開くと、冒頭でまだ文章の画面が出ていた。録画の画面に切り替わる仕組みを調べさせた",[50,84,85],{},"再生の最初の一瞬に文章が見えて、それから録画へ流れる動きが残っていた",[50,87,88],{},"最初から録画を出すために、A版では冒頭の文章の欄そのものを出さない形に直させた",[15,90,91],{},"A版とB版の並びはブラウザで確かめさせ、ユニットテストも流させた。",[15,93,94],{},"録画のある4区間は、A版とB版を並べた状態で自分の確認を待っている。\nどちらを採用するかは、まだ決めていない。",[26,96,97],{"id":97},"並行セッションとのコミット分担",[15,99,100],{},"NG集と並行して、別の2つのセッションが講座の別の章を画面再現にしていた。\n片方（eurekapu-nuxt4-85）は基本機能の23区間を、もう片方（876137）はキーボードショートカット、Stream Deck、Excel設計の原則を受け持っていた。",[15,102,103],{},"876137側は、設計の原則の25区間を Opus のエージェント5体に作らせていた。\n25区間ともExcelでの検算が全一致し、本人の声での合成まで済んだ。\n静止画は Claude Code に全数を見させ、登録の検査も195件すべて通った。\n1区間だけ、配色ルールに無い薄い水色（DDEBF7）で列を塗っていて、ルール内の色に替えるかどうかの判断を自分に求めてきた。",[15,105,106],{},"困ったのは共有部品である。\nbookScene.ts や ExcelRibbon.vue など10本のファイルでは、両方の変更が1つのファイルの中で混ざっていて、ハンク単位で分けてコミットするのは難しかった。\nセッション同士でやりとりさせた結果、案Bに落ち着いた。\nコミットの指示を受けていない876137側はコミットせず、85側が共有部品の両方の変更をまとめて1回でコミットする。",[15,108,109],{},"コミットの手前では、こんなことが起きていた。",[47,111,112,115],{},[50,113,114],{},"85側から、876137側の台本3本に、使っていない import があるという ESLint の指摘が届いた。消させて、エラー0を確かめさせた",[50,116,117,118,121],{},"85側のコミットゲートで、Codex が876137側の ",[18,119,120],{},"DeskApps.vue"," に high を1件出した。アイコンを選ぶ関数に、型の上では渡せないファイルの種類（xlsx、pdf）を渡していたという指摘である。実行時は変換が効いて正しいアイコンが出るので、85側も876137側も low と判定した。ただ、コミットを止めないために、85側で型の注記だけ直させた",[15,123,124,125,128,129,132],{},"コミット ",[18,126,127],{},"8bff4d64","（121ファイル）に、876137側の作業分もすべて入った。\nこの時点では push していない。\n876137側ではこのあと、PDFなどを前に出している間はメニューバーをそのアプリのものに切り替える変更も入れさせた（",[18,130,131],{},"1a42e6a0","）。",[26,134,135],{"id":135},"基本機能の23区間で直したもの",[15,137,138],{},"85側のセッションでは、基本機能の画面再現を仕上げさせた。\n再現エンジンに PV 関数を足させ、Excel全幅の画には、フィルターのボタンと絞り込み中の行番号の青を重ねて描かせた。\nリボンには数式タブとメニューを足させた。\n「形式を選択して貼り付け」の画面は、教材にある模擬画面の文言と突き合わせさせた。\n語りの「行列を入れ替える」も画面の表記に合わせて直し、その区間の音声を作り直させた。",[15,140,141],{},"全20区間の静止画を、区間ごとに6時点ずつ撮り直させた。\nはみ出しは直ったものの、今度は演算の欄の2列が左に寄って詰まった。\n中身に合わせて幅を配分するのは、上の「貼り付け」の欄だけに絞らせた。\n3区間の音声も作り直させ（112秒、122秒、120秒）、直した字幕が1行に収まることを静止画で確かめさせた。",[15,143,144,145,148],{},"876137側からは、フィルターの描画の不具合が1件届いた。\n",[18,146,147],{},"readable-sheets-c00-s02"," で A社に絞り込むと、隠れた行8〜10の行番号が、行7の下に重なって描かれる。\n原因は、フィルターで隠した行の高さはゼロなのに、重ねて描く層が行番号を描き続けていたことだった。\n見えている行だけに描く形に直させると、46秒の画面で行7のすぐ下に行11が来た。",[15,150,151],{},"最後に通したものは次のとおりである。",[47,153,154,157,163],{},[50,155,156],{},"登録の検査 195/195、回帰テスト 43/43",[50,158,159,162],{},[18,160,161],{},"excel-render.vue"," の ESLint エラー5件。コミット済みの版にも同じエラーがあり、元からの問題だった。型の宣言を import の後ろへ移して直させた",[50,164,165],{},"ユニットテスト全体（4,423件）で落ちていた2件。区間が増えて並びが変わったサイドバーのテストで、直したあと 4/4 通った",[15,167,168,169,171],{},"一度目のコミットのあと、Codex のレビューの記録が見当たらなかった。\nゲートが飛ばされた可能性があるので、残りのコードと計画書をステージし直してレビューを受けさせた。\nhigh が3件出た。\n先の ",[18,170,120],{}," の件もこの中にある。\n中身を見させ、型検査（vue-tsc）でも関係するファイルにエラーが出ないことを確かめさせてから、コミットし直させた。\n次に出た指摘は型の注記だけで、実行時の動きは正しかった。\nClaude Code の判定は low である。\nそれでも、戻り値の型を1か所広げれば済むので直させ、最後は pass で通った。",[26,173,175],{"id":174},"googleタスクへの登録と一時スクリプトの正式化","Googleタスクへの登録と一時スクリプトの正式化",[15,177,178,179,182],{},"どのセッションでも、最後は同じ頼み方で締めた。\n確認すべきページを ",[18,180,181],{},"http://localhost:3200/..."," のフルパスで、何を見ればいいかと組にしてGoogleタスクに積んでおいてほしい、と。",[47,184,185,188,191],{},[50,186,187],{},"876137側：確認事項9件。各タスクの詳細欄に、URLと見るポイントを書かせた",[50,189,190],{},"NG集のセッション：期日10/1の確認用タスク3件。翌朝、ここから始めるためである。計画書の進捗も更新させ、4つのコミットに分けて origin/main まで push させた",[50,192,193],{},"85側：5件。実物のExcelと表示が一部合わない箇所について、本番の音声の長さから「何分何秒あたりに何が映るか」を求めさせ、その時刻も添えさせた",[15,195,196],{},"85側で「反映して」と言ったときは、着手前に意味を確かめられた。\npush か、講座に組み込むか、の2通りである。\nまだ自分が確認している最中なので、push だけにした。",[15,198,199,200,203,204,207],{},"876137側を閉じる前に、もう1つ頼んだ。\n画面の再現に使った一時スクリプトは、正式なスクリプトにしておいてほしい。\n2027年版、2028年版と年度ごとにExcelの機能が増えたり、中身を微修正したりするときに、何度も使うからである。\n書き捨てのファイルなら要らない。\n6本を動かして確かめさせ、一時スクリプトを消して、参照している文書の名前も書き換えさせた（",[18,201,202],{},"f0ef2133","）。\n消す前に、876137側から別のセッションへ問い合わせも行っていた。\n問い合わせを受けたセッションは ",[18,205,206],{},"scripts/_*.tmp.*"," を実行しているプロセスが0件だと確かめ、すぐ消してよいと返していた。",[26,209,211],{"id":210},"tiktokの予約投稿をやり直す","TikTokの予約投稿をやり直す",[15,213,214],{},"NG集のセッションの冒頭では、Googleタスクの未完了27件を「自分にしかできないもの」と「Claude Code ができるもの」に仕分けさせた。\n自分の判断や目視が要るものが19件、Claude Code ができるものが7件、分担するものが1件だった。\n急ぎはTikTokの#02のハッシュタグ確認で、#03がその日の19時に公開される予定だった。",[15,216,217,218,221],{},"#02を開いて説明文を確かめさせると、ハッシュタグは効いておらず、公開から15時間たっても再生は0回だった。\n#03〜#06を、タグ5つ付きで予約し直させ、古い予約は削除させた。\n",[18,219,220],{},"#IF関数"," だけは候補を選んだあとに消えたので、足し直させた。\n#06は、動画のアップロードの段階で自動モードの権限確認に止まった。\n自分が「やっていい」と返して、残りを済ませてもらった。",[15,223,224],{},"片付けの段階で、Claude Code が作業用の一時フォルダを消そうとしていることに気づいた。\nそれは自分で消すと言って、コマンドだけ教えてもらった。\n中身はすでに消してあり、空のフォルダだけが残っていた。\n前回の削除が「使用中」で失敗したのは、Claude Code のシェルがそのフォルダの中にいたためだろう、という説明だった。\n自分で実行し、消えたことを確かめさせた。",[26,226,227],{"id":227},"学び",[47,229,230,233,236],{},[50,231,232],{},"区間を止めていたのは、計画書に自分で書いた「試作の見た目が決まるまで広げない」というルールだった。止まっている理由は、まず計画書の中に探す",[50,234,235],{},"再現しきれない画面は、直すか諦めるかの二択にしなくてよい。録画と再現を並べて残せば、判断を後へ回せる",[50,237,238],{},"録画の版の冒頭に一瞬だけ文章が映る問題は、文章の欄そのものを出さない形にして、最初から録画を出すようにした",{"title":240,"searchDepth":241,"depth":241,"links":242},"",2,[243,244,245,246,247,248,249],{"id":28,"depth":241,"text":29},{"id":61,"depth":241,"text":61},{"id":97,"depth":241,"text":97},{"id":135,"depth":241,"text":135},{"id":174,"depth":241,"text":175},{"id":210,"depth":241,"text":211},{"id":227,"depth":241,"text":227},"dev",null,"Excel講座のNG集、基本機能、設計の原則の区間を、録画ではなくブラウザ上でExcel画面を再現する形へ作り直した日の記録。並行セッションとのコミット分担、再現しきれない区間のA/B並べ、確認URLのGoogleタスク登録までをまとめた。","md",{},true,"/excel-course-donts-screen-recreation","eurekapu-nuxt4",false,"2026-09-30T00:00:00.000Z",{"title":5,"description":252},"make-diary","2026-09/2026-09-30/excel-course-donts-screen-recreation",[264,265,266,267,268,269],"Excel講座","画面再現","Claude Code","サブエージェント","Googleタスク","Codex","PWkf5XthLgxHvWrM5O9-grjJy_bqKbnrnhOOHhaDr5Q",[],[273,277,281,285,288],{"title":274,"path":275,"publishedAt":276},"Excel講座動画の「読み上げだけ」の区間を画面再現に作り替える：試作1本の確認からサブエージェント並列化まで","/excel-course-read-aloud-to-screen-replay","2026-09-29T00:00:00.000Z",{"title":278,"path":279,"publishedAt":280},"Excel講座の画面再現へのフィードバック対応：関数の活用5本の修正とCF精算表の列固定","/excel-scene-feedback-column-freeze","2026-09-27T00:00:00.000Z",{"title":282,"path":283,"publishedAt":284},"2026年9月26日の開発日記 - 再現動画のレビュー画面づくりと、メモリで落ちるdevサーバー","/2026-09-26-diary","2026-09-26T00:00:00.000Z",{"title":286,"path":287,"publishedAt":284},"Nuxtのdevサーバーがheap out of memoryで落ちた原因：再現動画のシーン分割読み込みと終わらない回帰テスト","/excel-scene-dev-memory-split-loading",{"title":289,"path":290,"publishedAt":291},"Excel講座の本人音声を全編再合成した日：読み上げ台本を「耳で分かるか」でレビューし、聞いた感想を区間単位で直す","/excel-course-narration-ear-review-feedback","2026-09-23T00:00:00.000Z","https://log.eurekapu.com/og/blog/excel-course-donts-screen-recreation.png?v=2026-09-30T00%3A00%3A00.000Z&title=Excel%E8%AC%9B%E5%BA%A7%E3%81%AENG%E9%9B%86%E3%82%92%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E4%B8%8A%E3%81%AEExcel%E5%86%8D%E7%8F%BE%E3%81%AB%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%99%EF%BC%9A%E4%B8%A6%E8%A1%8C%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%88%86%E6%8B%85%E3%81%A8%E7%A2%BA%E8%AA%8DURL%E3%81%AEGoogle%E3%82%BF%E3%82%B9%E3%82%AF%E7%99%BB%E9%8C%B2&author=Kei%20Komatsu&sig=a46db6d95f3ecd68",1790910507172]