[{"data":1,"prerenderedAt":309},["ShallowReactive",2],{"content-/excel-course-cfws-freeze-and-render-preview":3,"all-pages-for-dir":289,"related-/excel-course-cfws-freeze-and-render-preview":290,"og-image-/excel-course-cfws-freeze-and-render-preview":308},{"id":4,"title":5,"body":6,"category":269,"concepts":270,"description":271,"extension":272,"meta":273,"navigation":274,"ogImage":270,"path":275,"project_name":276,"published":277,"publishedAt":278,"seo":279,"source":280,"stem":281,"tags":282,"todo":270,"unpublished":277,"updatedAt":270,"__hash__":288},"pages/2026-09/2026-09-28/excel-course-cfws-freeze-and-render-preview.md","Excel講座の動画制作：精算表の再現動画20本に列固定の切り替えを入れ、動画制作ページをMP4なしのプレビューに変えた",{"type":7,"value":8,"toc":251},"minimark",[9,13,18,27,30,33,40,43,47,50,53,56,73,76,79,85,88,91,94,101,105,109,115,118,124,135,138,141,144,147,169,179,182,197,200,204,210,213,216,219,222,228,231,234,237,240],[10,11,5],"h1",{"id":12},"excel講座の動画制作精算表の再現動画20本に列固定の切り替えを入れ動画制作ページをmp4なしのプレビューに変えた",[14,15,17],"h2",{"id":16},"_5分10秒まで語りは表の上半分にいる","5分10秒まで、語りは表の上半分にいる",[19,20,21,22,26],"p",{},"朝6時すぎ、キャッシュフロー精算表の再現動画（Step 7 の3本目、",[23,24,25],"code",{},"cfws-step7c","）を見ていて引っかかった。\n5分10秒前後まで、語りはずっと精算表の上側、だいたい32行目までの話をしている。\nそれなのに、画面の固定は D 列（期首残高）までだった。",[19,28,29],{},"そこで、説明している場所に合わせて固定する列を切り替えてほしいと Claude Code に頼んだ。\n上半分の話をしているあいだは増減の H 列まで固定し、キャッシュフロー計算書の話に入ったら D 列までの固定に切り替える、という案である。",[19,31,32],{},"Claude Code は、シートの状態を丸ごと差し替えると全セルの再計算が走るため、その時点で効いている固定設定だけを上書きする仕組みを足した。\n切り替えの位置は「下半分が、キャッシュフロー計算書です。」の一文にした。",[19,34,35,36,39],{},"この決まりを計画書にまとめ、Codex にレビューさせた。\n指摘は1件で、SUM 式を読む部分が Step 7 のブックを直接見ている、というものだった。\n「いま動いているブックから読む」を必須条件として書き足し、再レビューは通った。\n回帰テストで変わったのは 7c だけで、狙いどおりだった（",[23,37,38],{},"103d6fa4","）。",[19,41,42],{},"引き継ぎのプロンプトはターミナルに出してもらっていたが、ダウンロードフォルダにテキストファイルで置き直してもらった。",[14,44,46],{"id":45},"step-7-から-step-2-へ1ステップずつ広げる","Step 7 から Step 2 へ、1ステップずつ広げる",[19,48,49],{},"8時36分、そのテキストファイルを渡して新しいセッションで続きを始めた。\n計画書には筆者の判断待ちが4件あった。\n回答を待つあいだに、判断に左右されない共通部品化から Claude Code に進めてもらった。",[19,51,52],{},"Step 7 の残り（7b〜7f）は、切り替え前後のカメラの動きを数値で比べてから、静止画で確かめた。\n7b と 7e は、カメラの往復が大きく減った。\n7d と 7f はわずかに増えたので中を見ると、7f の「下半分が〜」の文だけ左端が E 列になっていた。\n空いた列が画に入るおそれがあるので、ここだけ左端を D 列に移した。",[19,54,55],{},"途中で3回つまずいている。",[57,58,59,63,66],"ul",{},[60,61,62],"li",{},"静止画を撮っている最中に、API の子プロセスが編集に反応して再起動した。7c 以降の時刻が取れていなかったので、復旧後に 7b〜7f を並列で撮り直した",[60,64,65],{},"確認用ページが開かなくなった。nitropack のファイルが node_modules から消えており、Claude Code は別のセッションが依存を入れ直した可能性を疑った",[60,67,68,69,72],{},"カメラのテストが1件落ちた。見出しに ",[23,70,71],{},"frozen: true"," が付いた固定列を、テストの側が勘定に入れていなかった",[19,74,75],{},"Step 7 の記録を取り直してから、Step 6、5、4、3、2 と1ステップずつ進めた。\n6b は下半分のズームが 0.65 から 0.88 に上がり、上半分は変わらなかった。\n前面タブに開いてもらった 6b を見て、問題ないと判断した。\nStep 4 は下半分が 0.59 から 0.70〜1.0 に、Step 2 は 0.65 から 0.88〜1.0 になった。\nStep 4 を push したときには、Excel ショート動画を作っている別セッションのローカルコミット2件も一緒に出ていった。",[19,77,78],{},"ここで判断待ちの4件に答えた。\n演習ファイルにも同じ固定を入れる案（判断4）を選び、下半分では D 列の見出しを「合計」に差し替える案（判断3）も入れてもらった。\nあわせて縦線も細くしてもらった。",[19,80,81,82,39],{},"ダウンロード用のブックは、画面とは別の書き出しスクリプトで作っている。\nそのため、画面の表示用に置いた C 列と D 列の写しが、意図せず紛れ込むことはない。\n演習ファイルには写しと固定（I4、つまり H 列と3行目まで）を入れ、実物の Excel で検算した。\nStep 1 から Step 6 までは、全セルが一致した。\n最後に Step 7 の検算を待ってから push した（",[23,83,84],{},"1f467424",[14,86,87],{"id":87},"本当に20本全部に入ったのか",[19,89,90],{},"完了の報告を受けて、聞き直した。\n連結精算表ではなく、キャッシュフロー精算表のステップ学習の Step 1〜7 全部に修正が入ったのか。",[19,92,93],{},"答えは「20本すべてが対象で、連結には手を入れていない」だった。\nただし、実際に画面が変わったのは14本だけである。\n残りの6本は、キャッシュフロー精算表のシートを一度も開かない動画で、直す場所がなかった。",[19,95,96,97,100],{},"計画書の進捗を更新してもらい、自分の目での確認は翌日の Google タスクに積んだ。\n並行して開いた別のセッションでは、Google タスクから今日が期日の4件を確かめ、リポジトリごとにセッションを分けるかを相談した。\nClaude Code は分けるほうを勧めた。\n理由の一つは、ここから作業するとほかのリポジトリの ",[23,98,99],{},"CLAUDE.md"," やルールが読み込まれないことだった。",[14,102,104],{"id":103},"午後関数の活用と動画制作ページの-mp4","午後：関数の活用と、動画制作ページの MP4",[106,107,108],"h3",{"id":108},"区間が選ばれないまま前の画面が残る",[19,110,111,112,39],{},"14時20分からは、関数の活用の作業に移った。\n画面再現ページでセクションかチャプターを切り替えても、区間が何も選ばれず、右側に前の区間が残っていた。\n先頭の区間に必ず合わせてほしいと頼み、ブラウザで実際にクリックして直ったことを確かめてもらった（",[23,113,114],{},"564f7d54",[106,116,117],{"id":117},"悪い式を先に見せるナレーション",[19,119,120,123],{},[23,121,122],{},"iferror-ex-consolidation"," にフィードバックを書き足し、台本とナレーションの修正を頼んだ。\n手本にしたのは、別の区間（text-comment）を初めて直したときの型で、まず間違った式を作ってから正しい式に書き換える流れである。\nCtrl+[ の読みは「Ctrlを押しながら、開き角かっこ」に揃えた。\n台本の検査（1文に句点1つ、70字以内）に2文が引っかかり、分割した。",[19,125,126,127,130,131,134],{},"実物の Excel での検算は 120/120 で一致した。\n本人の声での合成は、10クリップ、272秒になった。\nその直後にプレビューが開かなくなった。\n原因は ",[23,128,129],{},"nuxt.config.ts"," の読み込みエラー（",[23,132,133],{},"fileURLToPath is not defined","）で、別セッションが memo ビューアの設定を編集している途中だった。\nimport 行はすでに足されていたので、読み直すだけで直った。",[106,136,137],{"id":137},"書き出し時間の見積もりを止める",[19,139,140],{},"画面再現で OK にした区間を、動画制作ページにも移してほしいと頼んだ。\nClaude Code の突き合わせでは、関数の活用は62区間ある。\n画面再現の完了記録は37本すべてに付いていたが、動画制作側には24本が古い MP4 のまま移り、13本はまだ移っていなかった。",[19,142,143],{},"報告に MP4 の書き出しの話が出てきたところで、待ったをかけた。\n動画制作ページはプレビューで、MP4 は読み込んでいないと思っていたからだ。\nコードで確かめてもらうと、MP4 を読まずにその場で描いているのは画面再現ページのほうで、動画制作ページは MP4 を読み込んでいた。",[19,145,146],{},"修正のたびに古い MP4 を捨てて書き出し直していたら、時間が足りない。\nGPU もメモリも無駄に使う。\n講座に載せるには MP4 が要るが、それは最後でいい。\n画面再現と同じ仕組みで、その場で描いてプレビューすれば足りるはずだ、と伝えた。",[19,148,149,150,153,154,157,158,161,162,165,166,39],{},"Claude Code は、画面再現ページに埋め込み用の表示（",[23,151,152],{},"embed=1","）を足し、動画制作ページでは ",[23,155,156],{},"\u003Cvideo>"," の代わりにそれを出すようにした。\n最初は、埋め込み枠が表示を拒否された。\n応答ヘッダーは狙いどおりで（",[23,159,160],{},"/dev/"," 配下だけ埋め込みを許し、講座ページは従来どおり DENY）、確かめ直すと表示できた。\n再生が終わり近くからではなく頭から始まる不具合も出た。\nClaude Code は、枠の要素も中の window も同じままなのに、中のページだけが描き直されていることを突き止めた。\n最終的に、動画制作ページでも画面再現の区間は MP4 を読まずにその場で描くようになった。\nMP4 は、講座へ載せる最後の段階で書き出せば足りる（",[23,163,164],{},"53d82b1a","、",[23,167,168],{},"9a0ac8e6",[19,170,171,172,175,176,39],{},"計画書の更新では、Claude Code が一度「組5の組み込みスクリプトはまだ無い」と報告した。\n確かめ直すと ",[23,173,174],{},"batch5.mjs"," はあったので、計画書の該当2か所を直してもらった（",[23,177,178],{},"9fc77cf4",[106,180,181],{"id":181},"受け皿の章を作る",[19,183,184,185,187,188,190,191,193,194,39],{},"受け皿の章が無ければ作っておくよう頼んだ。\n章の作り方は、組5の組み込みスクリプト（",[23,186,174],{},"）にあった。\n章づくりとスクリプトの手直しでは、3か所で引っかかった。\nエスケープが崩れた2か所は ",[23,189,174],{}," の行をそのまま写して直し、罫線の文字を含む行の突き合わせに失敗したところは短い目印に置き換えた。\n生成した行に改行が実際の改行として入ってしまった箇所は、Edit で直接直した。\n",[23,192,174],{}," は、章がすでにあれば解答側の会話に動画だけを足し、目次の行が足してあれば飛ばすように直した（",[23,195,196],{},"20e06cfa",[19,198,199],{},"ROUND の演習ファイル2つは R2 に上げ、中身が手元と一致することを確かめた。\nただ、CDN のキャッシュを消すトークンがこのシェルに無く、公開 URL は21時ごろまで 404 のまま残る見込みになった。",[106,201,203],{"id":202},"memo-ビューアの画像","memo ビューアの画像",[19,205,206,207,39],{},"14時35分のセッションでは、関数の活用のチェックのタスクを完了にしようとした。\nGoogle タスクでは、関連する3件が朝8時48分ごろにすでに完了になっていた。\nmemo ビューアで計画書の画像が出ない件は、Claude Code に直させた。\n直した正規表現は正しく動いていたので、dev サーバーが変更を拾っているかを確かめ、画像が表示されるところまで確認してもらった。\n計画書の進捗は実装と突き合わせて更新し（関数の活用の再現動画は確認36/37本、Web 公開22本）、計画書の中の相対リンク9本も開くようにした（",[23,208,209],{},"ccc333f5",[14,211,212],{"id":212},"チェックマークは何の印か",[19,214,215],{},"15時すぎ、動画制作ページの目次にある緑の ✓ の意味がわからなくなった。\nClaude Code の答えは「MP4 を書き出し済み」で、手元の出力フォルダに 1080p の MP4 があるかどうかを見ているだけだった。",[19,217,218],{},"最初は ✓ を「MP4」という文字に置き換えてもらった。\nしかし、全区間が完了になるまでは、講座の配信先へ登録することも MP4 を書き出すこともない。\n書き出し済みかどうかを目次に出す意味がない、と気づいた。\n印を外し、目次は「完」（完了）と「フ」（フィードバックあり）の2つに絞った。",[14,220,221],{"id":221},"スライドを読み上げるだけの冒頭",[19,223,224,227],{},[23,225,226],{},"functions-ref-ex-ratio"," を開くと、スライドの文章をひたすら読み上げていた。\nExcel の画面で見せられる内容なのに、なぜ計画から漏れたのかを Claude Code に調べさせた。",[19,229,230],{},"理由は、9/24 の見直しでこの区間が優先度 B と判定されたことだった。\n計画は優先度 A の区間だけを再現動画にしている。\n見直しは冒頭の語りを「演習の導入としては許容範囲」として、優先度に数えていなかった。\n同じ作りの区間は7本あり、どれも冒頭の12〜68秒は文章のスライドだけで、操作動画が出てこない。",[19,232,233],{},"7本それぞれに2案を作ってもらった。\nA は既存の「問題の動画」を引き継ぐ案、B は画面再現で作り直す案である。\nB の台本はサブエージェント4体に並行して書かせ、実物の Excel で全本を検算した（構成比27/27、SUMIFS 224/224 など）。\n合成は、構成比が220秒、VLOOKUP の2本が174秒と238秒になった。\nB の7本は、本人の声での合成と実物の Excel での検算まで済んだ。",[19,235,236],{},"見比べていて、構成比の A の動画に見覚えがなかった。\nClaude Code が作ったのかと聞くと、上司との会話の場面に付いていた、もともとある2024年9月の動画だという。\nそれなら、Claude Code が作った B のほうがずっといい。\nたぶん解像度も合っている。\nプレビューには A を残したまま、採用は7本とも B にすると決めた。\n7本の確認は、翌日の Google タスクに積んだ。",[14,238,239],{"id":239},"学びメモ",[57,241,242,245,248],{},[60,243,244],{},"「20本すべてを対象にした」と「20本すべての画面が変わった」は別の報告である。聞き直したことで、14本が変わり、6本は直す場所がなかったという区別がはっきりした",[60,246,247],{},"動画制作ページが修正のたびに MP4 を求めていたのは、プレビューと完成品の役割が混ざっていたからだった。MP4 は講座へ載せる最後の段階だけで作り、目次の ✓ もその判断に合わせて外した",[60,249,250],{},"冒頭7区間が計画から漏れたのは、9/24 の見直しが冒頭の語りを評価に入れていなかったからだった。優先度の判定を読むときは、何を数えなかったかまで確かめたい",{"title":252,"searchDepth":253,"depth":253,"links":254},"",2,[255,256,257,258,266,267,268],{"id":16,"depth":253,"text":17},{"id":45,"depth":253,"text":46},{"id":87,"depth":253,"text":87},{"id":103,"depth":253,"text":104,"children":259},[260,262,263,264,265],{"id":108,"depth":261,"text":108},3,{"id":117,"depth":261,"text":117},{"id":137,"depth":261,"text":137},{"id":181,"depth":261,"text":181},{"id":202,"depth":261,"text":203},{"id":212,"depth":253,"text":212},{"id":221,"depth":253,"text":221},{"id":239,"depth":253,"text":239},"dev",null,"キャッシュフロー精算表の再現動画で、説明している場所に合わせて固定する列を切り替える決まりをStep 1〜7の20本に当てた。関数の活用では動画制作ページのMP4読み込みをやめて画面再現の埋め込みに替え、スライドを読み上げるだけの冒頭7区間を画面再現で作り直した。","md",{},true,"/excel-course-cfws-freeze-and-render-preview","eurekapu-nuxt4",false,"2026-09-28T00:00:00.000Z",{"title":5,"description":271},"make-diary","2026-09/2026-09-28/excel-course-cfws-freeze-and-render-preview",[283,284,285,286,287],"Excel講座","動画制作","精算表","Claude Code","Nuxt","5JaXJ9DOM3SMGrjY05hUhBtJjpcnF2BFTlT_4iA7NWA",[],[291,295,298,301,305],{"title":292,"path":293,"publishedAt":294},"2026年9月26日の開発日記 - 再現動画のレビュー画面づくりと、メモリで落ちるdevサーバー","/2026-09-26-diary","2026-09-26T00:00:00.000Z",{"title":296,"path":297,"publishedAt":294},"Nuxtのdevサーバーがheap out of memoryで落ちた原因：再現動画のシーン分割読み込みと終わらない回帰テスト","/excel-scene-dev-memory-split-loading",{"title":299,"path":300,"publishedAt":294},"Excel講座の画面再現動画をレビューしやすくする：カメラ固定、数式バーの可視化、確認済みステータスのCloudflare保存","/excel-scene-review-ui-tuning",{"title":302,"path":303,"publishedAt":304},"Excel操作動画のレッスン画面をミラーカラムに直す：自動再生とdev限定カード、CF精算表Step 7のカメラ調整","/excel-scene-mirror-column-autoplay-step7-camera","2026-09-25T00:00:00.000Z",{"title":306,"path":307,"publishedAt":278},"2026年9月28日の開発日記 - TikTokに上げた6本を消して、カバー付きで出し直した日","/2026-09-28-diary","https://log.eurekapu.com/og/blog/excel-course-cfws-freeze-and-render-preview.png?v=2026-09-28T00%3A00%3A00.000Z&title=Excel%E8%AC%9B%E5%BA%A7%E3%81%AE%E5%8B%95%E7%94%BB%E5%88%B6%E4%BD%9C%EF%BC%9A%E7%B2%BE%E7%AE%97%E8%A1%A8%E3%81%AE%E5%86%8D%E7%8F%BE%E5%8B%95%E7%94%BB20%E6%9C%AC%E3%81%AB%E5%88%97%E5%9B%BA%E5%AE%9A%E3%81%AE%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%92%E5%85%A5%E3%82%8C%E3%80%81%E5%8B%95%E7%94%BB%E5%88%B6%E4%BD%9C%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92MP4%E3%81%AA%E3%81%97%E3%81%AE%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%AB%E5%A4%89%E3%81%88%E3%81%9F&author=Kei%20Komatsu&sig=dc56a9b88bfbca18",1790638944317]