[{"data":1,"prerenderedAt":227},["ShallowReactive",2],{"content-/beppyo-figures-svg-pipeline":3,"all-pages-for-dir":206,"related-/beppyo-figures-svg-pipeline":207,"og-image-/beppyo-figures-svg-pipeline":226},{"id":4,"title":5,"body":6,"category":186,"concepts":187,"description":188,"extension":189,"meta":190,"navigation":191,"ogImage":187,"path":192,"project_name":193,"published":194,"publishedAt":195,"seo":196,"source":197,"stem":198,"tags":199,"todo":187,"unpublished":194,"updatedAt":187,"__hash__":205},"pages/2026-09/2026-09-01/beppyo-figures-svg-pipeline.md","別表四・五講座の図解を SVG 生成器で作り直す：図解49枚と帳票175枚をギャラリーに並べるまで",{"type":7,"value":8,"toc":171},"minimark",[9,13,16,21,24,27,35,38,41,44,47,50,53,57,60,63,67,70,77,80,83,102,105,109,112,115,119,122,125,128,132,135,138,141,144,160,163],[10,11,12],"p",{},"朝からのやり取りを並べると、同じ形の質問が何度も出てくる。\n「これ、進んでますか」「多分止まってますよね」「作られてないじゃないですか」。",[10,14,15],{},"答えは毎回ちがった。\n動いていたこともあれば、本当に止まっていたこともあり、ディスクは新しいのにブラウザのタブだけが古かったこともある。\n別表四・五講座の図の作り直しは、この日で Phase 2 の仕上げから Phase 3.5 まで進んだ。\n枚数だけ見れば大きく動いたが、後から効いたのは「できているかどうかを自分の目でどう確かめるか」を決め直したところだった。",[17,18,20],"h2",{"id":19},"朝レビュー1周目を4つの段に割る","朝、レビュー1周目を4つの段に割る",[10,22,23],{},"前日の続きで、Phase 2（別表生成器）のレビュー1周目を再開した。\nWindows 機の作業ツリーに途中編集が残っていたので、まず stash へ退避させた。\nそのうえで origin から Codex 側のコミットを fast-forward で取り込んでから始めた。\n向こうは codex-v2 配下の追加とギャラリーページの修正だけで、こちらの生成器、JSON 正本、public の SVG には触れていない。\n2台運用なので、この重なりの確認を毎回はさむ。",[10,25,26],{},"指摘を4つの段（A〜D）に割って、段ごとにサブエージェント（opus）を1体ずつ走らせた。\n段 A は枠線と空欄行、段 B は帯ラベルの折り返しと丸め、段 C は器を担当させた。\n段 D では、五(二)から五(一)への転記と別表四から五(一)への転記を、縦積みの複票に作り替えさせた。\n各段の完了通知が来るたびに、上がってきたスクショを自分で開いて見る。\n報告文だけで OK にしない。\nこれはこの日ずっと守った。",[10,28,29,30,34],{},"途中で vitest が5件落ちた。\n中を見ると、どれも本番 instance の旧数値と旧 ID をテスト側に直値で書いてあるものだった。\n新しい数値へ機械的に置換させたら、",[31,32,33],"code",{},"formatRate(-3.2828)"," の純粋関数テストまで巻き込んで書き換えてしまい、そこだけ戻した。\n「本番データの期待値」と「関数そのものの期待値」が同じファイルに同居していると、一括置換が滑る。",[10,36,37],{},"段 D の後にコードレビュー（opus）を通したら、3件の指摘が返ってきた。\n検算の参照先が不正なときに「空欄なのでスキップ」として無音で通ってしまう。\n折り返した帯ラベルが帯の高さを超えても例外にならない。\nバッジのクランプで衝突が復活しても検出しない。\nどれも壊れているのに黙って通る型だったので、直させた。\n修正後は SVG が1バイトも変わらず、差分検査も通っている。",[17,39,40],{"id":40},"数字は関係するものだけ残す",[10,42,43],{},"ギャラリーの p28 を見て、図の中の数字について指示を出した。\n関係のある数字だけ残して、関係のない数字は「×××」で統一する。\n図の主張に関わらない桁が並んでいると、そこを読もうとして時間を使ってしまう。",[10,45,46],{},"これは実装させず、フィードバック台帳に改善事項として書き足させるだけにした（B-6 から B-12 の仮番号）。\n段 A から D の反映が終わっていない状態で新しい指示を混ぜると、どの指摘がどの成果物に効いたのか追えなくなる。\n記録の追記でも小さく詰まった。\nheredoc の引用符解釈でコマンドが落ちたので、いったん scratchpad にファイルとして書き出してから追記させた。",[17,48,49],{"id":49},"なぜここだけ洗い替えないのか",[10,51,52],{},"ch2 の記事を読んでいて、準資産まわりの説明が足りないことに気づいた。\n繰越損益金と納税充当金、未納法人税等だけが洗い替えになる理由が、本文のどこにも書かれていない。\n2-6 のパターン A と B の説明の直後に、なぜこの2つに分かれるのかを説明する段落を足させた。\n差分は2行。\nChrome で表示を見ると、パターン B の直後、表の手前に入って崩れもなかった。",[17,54,56],{"id":55},"確認は-svg-のパスではなくページの-url-で","確認は SVG のパスではなくページの URL で",[10,58,59],{},"Phase 2 の1周目が終わったときに、確認用の一覧として SVG のファイルパスが並んで出てきた。\nそれでは開いて比べられない。\nbefore と after が横並びになるギャラリーのページ URL で出し直させた。",[10,61,62],{},"確認の導線をどう渡すかは、一日のうちに何度も出た話だった。\ndev サーバーは 3200 番で動いているので、ページの URL さえ渡ればクリックひとつで見に行ける。\nファイルパスを渡されると、そこから表示までの手順が全部こちら側の手間になる。",[17,64,66],{"id":65},"午後図解49枚を-svg-にする","午後、図解49枚を SVG にする",[10,68,69],{},"Phase 3 は「図解の SVG 化 → ギャラリーに全部出す」。\n章ごとに A から F のバッチへ割り、サブエージェントを並列で走らせて 49 枚を出した。\n上がってきたバッチから順に、親の側で描画し直して全数を目視する。\n共通ライブラリの細部（タイムライン右端ラベルの余白、注記の折り返し幅、合計行だけの濃淡、貸方のない仕訳行）を直してから、41 枚を一度まとめて再生成した。",[10,71,72,73,76],{},"ギャラリーには Codex 版の図がオーバーレイで重なる仕組みが入っているので、確認するときは DOM で ",[31,74,75],{},"img[src*=\"codex\"]"," を隠してから撮る。\n記事本文の HTML には手を入れていない。\n8コミットに分けて push した。",[17,78,79],{"id":79},"拡大モーダルが横いっぱいに開く",[10,81,82],{},"ギャラリーで Codex 版の図をクリックすると、モーダルが画面の横幅いっぱいに広がって、図の全体が一覧できない。\nClaude Code 版は縦いっぱいに開いて全体が入る。\n同じページの同じ図なのに開き方が違うので、まず SVG 側の属性の差を疑った。",[10,84,85,86,90,91,94,95,94,98,101],{},"調べさせたら、原因は拡大モーダルの側にあった。\n",[87,88,89],"strong",{},"縦横比が 1.4 倍を超える縦長の画像は幅優先で開き、縦はスクロールさせる","、という判定が入っていた。\n720×4712 のような、別の教材から起こした極端に縦長の図を枠に収めると、字が読めなくなる。\nその対策として入れたものだった。\np28 で比べると、Codex 版は 720×1208 で 1.68 倍、こちらは 720×872 で 1.21 倍。\n",[31,92,93],{},"viewBox","・",[31,96,97],{},"width",[31,99,100],{},"height"," の書き方はどちらも同じで、違っていたのは図の高さだけだった。\nその高さから出る縦横比が、たまたま閾値の両側に落ちていた。",[10,103,104],{},"同じものが2つ並んでいて片方だけ挙動が違うと、つい書き方の差を探しにいく。\n今回は書き方に差がなく、受け側の分岐が図の縦横比を見ていた。",[17,106,108],{"id":107},"夕方帳票175枚と足りない様式","夕方、帳票175枚と足りない様式",[10,110,111],{},"Phase 3.5 は「帳票ページ 175 枚の after を生成器で出してギャラリーに並べる」。\n波ごとにサブエージェントを5体前後投入し、記入例の JSON を書かせては親が PNG に描いて全数を目視する、という手順を繰り返した。\nこのとき、レビュー前の SVG が台帳で done にならないよう、選別スクリプトに「親が目視した担当だけ done にする」ゲートを入れさせた。\nこれがないと、上がった瞬間に台帳が緑になって、後から見たときに何を確認済みなのか分からなくなる。",[10,113,114],{},"途中で仕分けの結果が出た。\n175 枚のうち、既存の4様式で描けるのが 90 枚、設例が同じで1枚にまとまるのが 37 枚、新しい様式が要るのが 48 枚だった。\n足りない様式が 10 種あり、あらかじめ決めておいた中断条件（4種以上なら止めて相談）に当たったので、そこで判断を求められた。",[17,116,118],{"id":117},"テンプレートを足すか汎用の図解スキルで書くか","テンプレートを足すか、汎用の図解スキルで書くか",[10,120,121],{},"気になったのは、新しい様式を生成器の template として足すのと、汎用の図解スキルの生成スクリプトで書くのとで、本質的な違いがあるのかという点だった。\nどちらもスクリプトから SVG を吐く前提なので、手で描いて再現性を失う心配は同じようにない。\n他プロジェクトへの持ち出しやすさで言えば、汎用側で書いたほうがよさそうにも思える。",[10,123,124],{},"返ってきた答えは、再現性の面では差がない、というものだった。\nどちらもスクリプト生成で、手編集は差分検査と書き出し側の lint が拾う。\n差が出るのは、同じ1枚の中に別表と組めるかどうかだった。\n新様式が要るページの多くは「引当前の決算書と税金引当前の別表四」「税金勘定の動きと Tax Proof」のように、別表と決算書を1枚に積む構成になっている。\n生成器の縦積み複票（矢印や箱、番号バッジ）に載せるには、template 側でないと組めない。\n汎用スキルで書くと、同じページの中で別表部分と決算書部分が2系統に割れる。",[10,126,127],{},"納得したので template を足す方針にした。\n11 種類の template が入り、テストは 242 件緑、既存の 96 枚は差分なしで通った。\nその上で第3波の4体（47 枚）を投入し、累計 115 枚まで after が出た。",[17,129,131],{"id":130},"まだ作っていませんが残っている","「まだ作っていません」が残っている",[10,133,134],{},"夕方、ギャラリーを見ていて引っかかった。\nPhase 2 の生成器で作ると書いてあるはずのページに、「まだ作っていません」の表示が残っている。\n第5章あたりが該当した。\nこれはその場で片付けさせて、17 件が after 付きになった。",[10,136,137],{},"次に別のページを開いて同じことを言ったら、今度は違った。\nディスク上には SVG があり、台帳も done になっていて、開いていたタブが古いデータのままだっただけだった。\n朝から続いていた「進んでますか」の答えが、ここで3つ目に分かれた。\n動いている、止まっている、画面が古い。\nどれも同じ見え方をする。",[10,139,140],{},"そこで、個別のページを1つずつ聞くのをやめた。\nこのメッセージが残っているのはおかしいので、残らないように全数をチェックしてほしいと伝えて、機械で確認させた。\n結果は0件。\n見えていたのは、その日の夜の更新より前のデータだった。",[17,142,143],{"id":143},"学び",[145,146,147,151,154,157],"ul",{},[148,149,150],"li",{},"報告文とスクショだけで完了にしない。段ごとに自分で開いて見る手順を崩さなかったのは正解だった",[148,152,153],{},"同じものが2つあって片方だけ挙動が違うときは、中身の差より受け側の分岐条件を先に見る。今回は縦横比 1.4 倍という閾値ひとつだった",[148,155,156],{},"台帳の done は「上がった」ではなく「目視した」で立てる。ゲートを1つ入れるだけで、後から状態を信用できる",[148,158,159],{},"「できていない」には3種類ある。本当に未生成、処理中、表示が古い。1ページずつ聞くより、全数を機械でチェックさせたほうが早い",[17,161,162],{"id":162},"明日",[145,164,165,168],{},[148,166,167],{},"新様式が要る残りのページについて、template を足す優先順位を決める",[148,169,170],{},"「×××」表記の統一（台帳に仮番号で積んだぶん）を実装に落とす",{"title":172,"searchDepth":173,"depth":173,"links":174},"",2,[175,176,177,178,179,180,181,182,183,184,185],{"id":19,"depth":173,"text":20},{"id":40,"depth":173,"text":40},{"id":49,"depth":173,"text":49},{"id":55,"depth":173,"text":56},{"id":65,"depth":173,"text":66},{"id":79,"depth":173,"text":79},{"id":107,"depth":173,"text":108},{"id":117,"depth":173,"text":118},{"id":130,"depth":173,"text":131},{"id":143,"depth":173,"text":143},{"id":162,"depth":173,"text":162},"dev",null,"別表四・五講座の図を作り直した一日の記録。レビュー1周目の反映、図解49枚のSVG化、帳票175枚の仕分けと新様式11種の追加、拡大モーダルが横いっぱいに開く不具合の原因までをまとめた。","md",{},true,"/beppyo-figures-svg-pipeline","eurekapu-nuxt4",false,"2026-09-01T00:00:00.000Z",{"title":5,"description":188},"make-diary","2026-09/2026-09-01/beppyo-figures-svg-pipeline",[200,201,202,203,204],"SVG生成","図解","サブエージェント","税務コンテンツ","Claude Code","Br_xNHvewKQxzGO4ovayHOXUzE2nCBYzJJmU3L7TsWA",[],[208,211,215,219,223],{"title":209,"path":210,"publishedAt":195},"2026年9月1日の開発日記 - 図解と帳票を並べ直し、検索順位の測り方を変えた","/2026-09-01-diary",{"title":212,"path":213,"publishedAt":214},"別表四・五の講座図をbefore/after方式で作り直す（JSON正本からSVGを生成する仕組みへ）","/beppyo-figure-before-after-rebuild","2026-08-31T00:00:00.000Z",{"title":216,"path":217,"publishedAt":218},"SVG図解を4:3比率から解放する ─ スキルに縦流しルールを追加して記事図解を一括刷新した","/svg-diagram-vertical-flow-rule","2026-07-04T00:00:00.000Z",{"title":220,"path":221,"publishedAt":222},"常時稼働のLinuxが付くAI Botの使いどころ：Claude Codeとの線引きで解説記事を書き直した","/always-on-cloud-agent-research","2026-09-02T00:00:00.000Z",{"title":224,"path":225,"publishedAt":222},"計画書と実物の進捗を突き合わせ、タスクリストと自分の認識のズレを1か所に絞った","/corporate-tax-schedule-progress-sync","https://log.eurekapu.com/og/blog/beppyo-figures-svg-pipeline.png?v=2026-09-01T00%3A00%3A00.000Z&title=%E5%88%A5%E8%A1%A8%E5%9B%9B%E3%83%BB%E4%BA%94%E8%AC%9B%E5%BA%A7%E3%81%AE%E5%9B%B3%E8%A7%A3%E3%82%92%20SVG%20%E7%94%9F%E6%88%90%E5%99%A8%E3%81%A7%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%99%EF%BC%9A%E5%9B%B3%E8%A7%A349%E6%9E%9A%E3%81%A8%E5%B8%B3%E7%A5%A8175%E6%9E%9A%E3%82%92%E3%82%AE%E3%83%A3%E3%83%A9%E3%83%AA%E3%83%BC%E3%81%AB%E4%B8%A6%E3%81%B9%E3%82%8B%E3%81%BE%E3%81%A7&author=Kei%20Komatsu&sig=d2020a3ca3137830",1788417368101]