[{"data":1,"prerenderedAt":229},["ShallowReactive",2],{"content-/beppyo-figure-before-after-rebuild":3,"all-pages-for-dir":206,"related-/beppyo-figure-before-after-rebuild":207,"og-image-/beppyo-figure-before-after-rebuild":228},{"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-08/2026-08-31/beppyo-figure-before-after-rebuild.md","別表四・五の講座図をbefore/after方式で作り直す（JSON正本からSVGを生成する仕組みへ）",{"type":7,"value":8,"toc":174},"minimark",[9,13,16,19,23,26,34,37,40,43,46,49,52,55,59,62,70,73,76,80,87,90,93,106,109,112,116,119,122,126,133,136,139,142,145,148,151,154,157,160,163,166],[10,11,12],"p",{},"税大講本の図を before/after で作り直したやり方が思っていたより自分に合っていた。",[10,14,15],{},"左に原図、右に自分で描き直した図を並べる。\n並べると、原図の何を写して何を捨てたかが一目で分かる。\n同じことを別表四・五の講座でもやりたい、というのが今日の出発点だった。",[10,17,18],{},"もとにしている解説書は、図がわかりやすいと言われている。\nただ、その評判が図から来ているのか説明の文章から来ているのかは、自分でも決めきれていない。\nとりあえず図から手を付けることにした。",[20,21,22],"h2",{"id":22},"図の実体が1枚も無かった",[10,24,25],{},"現状を把握するために、調査を4本のサブエージェントへ分けて走らせた。\n税大講本側の before/after の仕組み、別表記事の棚卸し、Turso DB に入っている OCR 図と原本 PDF の照合、表組みを Web で表現する既存スキルの流用性の4本だ。",[10,27,28,29,33],{},"1本目の報告で前提が崩れた。\n書籍側の図ディレクトリがそもそも存在しない。\nマークダウンのほうは図を220件参照しているのに、",[30,31,32],"strong",{},"実体は1枚も無い","。",[10,35,36],{},"3本目も近い話を持ってきた。\n公開している記事の画像20枚は全部が自製の仮図で、うち17枚はプレースホルダのままだった。\nOCR で抜いた原図52枚は memo の下に置かれたきりで、記事には一度も入っていない。\n帳票そのものは HTML の table 161個で書かれていた。",[10,38,39],{},"権利の扱いも税大講本とは違う。\nあちらは公共のデータだが、こちらは市販の解説書なので、原図をそのまま公開物へ並べるわけにはいかない。\nbefore は手元で照合するためのもので、出すのは自分で作り直した after だけにする。\nこの線引きを計画の頭に置いた。",[20,41,42],{"id":42},"計画書に5回ダメ出しが返ってきた",[10,44,45],{},"計画書と説明図2枚を書かせて、Chrome で描画を確認した。\nフェーズ図の Phase 1 と Phase 4 で、説明文が右端で切れている。\n各フェーズを2行構成に直させて再生成した。\nSVG 内テキストの右端を実測し、696px を超えるものが0件になったところで先へ進んだ。\n中身の議論より先に、まず見切れを潰す。",[10,47,48],{},"Codex のレビューは一度では通らなかった。\n初回に4点。\n直しては再レビューに掛け、承認が返ってきたのは5回目だった。",[10,50,51],{},"回すたびに計画の形も変わった。\n帳票の表現は、HTML の table で組む案から「JSON を正本にして、生成器で SVG を吐く」へ置き換わった。\nその手順を別表作成のスキルとして固定するところまで計画に入れた。\n動画にしていくのはこれからの話なので、そこはスコープから外した。",[10,53,54],{},"判断事項は6件になった。\n決裁フォームで答えた。\n注釈や細かい修正は JSON のパラメータで持たせる、という方針まで含めて計画が固まった。",[20,56,58],{"id":57},"phase-0原図を掘り起こす","Phase 0（原図を掘り起こす）",[10,60,61],{},"OCR のやり直しから始めた。\n5分から15分かかるので先にバックグラウンドへ投げて、その間に権利ガードを入れさせた。\n終わってみると図は220枚で、マークダウンが参照していた件数とそろった。",[10,63,64,65,69],{},"途中で2回つまずいた。\n1つはリポジトリ全体に ",[66,67,68],"code",{},"grep -rn"," を掛けさせてしまい、node_modules まで走査して重くなったこと。\nもう1つは監査スクリプトが相対パスでは動かず、絶対パスの指定が要ったこと。\nどちらもすぐ直せるが、作業ディレクトリが動く日には毎回踏む。",[10,71,72],{},"図の分類（帳票、図解、装飾）は、サブエージェント5体に分けて回させた。\n上がってきた判定はそのまま信じず、親のセッションに全数を突き合わせさせた。\n287ページぶんを見て、訂正は1件しか出なかった。\n29ページ目にチェック欄の枠があるので、装飾なしから装飾ありへ直した。",[10,74,75],{},"Phase 0 は9手順すべてを終え、完了条件の4項目とも実測で満たした。\n進捗台帳を新しく作り、チェックを埋めて締めた。\nコミットでは学習ゲートが立ったが、今日はスキップと決め、理由を残して通した。",[20,77,79],{"id":78},"phase-1-でミラーになっていないと言った","Phase 1 で「ミラーになっていない」と言った",[10,81,82,83,86],{},"器づくりは素直に進んだ。\nギャラリーの生成コマンドとチェックコマンドを ",[66,84,85],{},"package.json"," に足させ、テストを2本増やし、全体テストは131ファイル、3,404テストが緑になった（122秒）。\n完了報告もそれらしく整っていた。",[10,88,89],{},"画面を見て止めた。\n図を一覧するページが Miller Column になっていない。\n同じリポジトリの別のビューアで採っているレイアウトで、章から図、図から中身へ、列が右に伸びていく形だ。",[10,91,92],{},"ついでに3点まとめて注文した。",[94,95,96,100,103],"ul",{},[97,98,99],"li",{},"Miller Column（章、図、内容の3列）にする",[97,101,102],{},"矢印キーで動けるようにする（上下で項目、左右で列）",[97,104,105],{},"アイコンは出さない。装飾と判別できたものは最初から一覧に載せない。小さいものはピクセルサイズで落とせる",[10,107,108],{},"本家のビューアの見た目とキー操作をそのまま写させ、作り直させた。\n判断の基準は好みではない。\n自分がチェックしやすいかどうかだけだ。\n200枚を超える図を1枚ずつ確認する前提だと、キーボードから手が離れる回数がそのまま所要時間になる。",[10,110,111],{},"締めでは、本番ビルドの検証を別の worktree でバックグラウンドに回し、生成物を grep した結果を台帳へ追記させた。\n3コミットで Phase 1 を閉じ、検証用の worktree も消してから push した。",[20,113,115],{"id":114},"windows-と-macbook-を行き来する","Windows と MacBook を行き来する",[10,117,118],{},"Phase 1 を締めたところで、続きをどこでやるかで一度迷った。\nリモート（Web 版）のセッションで回るかを、リポジトリに入っているものと Windows 機にしか無いものを突き合わせて判定させた。\nいったんは「明日ローカルでやる、タスクに積んでおいて」と決めたが、すぐ前言を撤回した。\n結局その場で Windows のローカルから続けることにした。",[10,120,121],{},"Phase 2 の途中では逆の動きをした。\nWindows の前を離れることになったので、成果物をコミットして push させ、MacBook 側で見る形にした。\n学習ゲートはクイズに答えられないため、理由を書いてスキップした。\n2台運用だと、こういう「機体をまたぐための push」が普通に混ざる。",[20,123,125],{"id":124},"phase-2生成器と別表作成スキル","Phase 2（生成器と別表作成スキル）",[10,127,128,129,132],{},"JSON 正本の根拠として、令和8年の様式 PDF から項番と欄名を抽出させた。\n仕様書を1本書かせてから、データ層と描画層を別々のサブエージェントに分けて並行で走らせた。\nデータ層にはスキーマ、用語、検証、モデルを、描画層にはレイアウト、描画、CLI を割り当て、どちらも ",[66,130,131],{},"model: opus"," を明示して起動した。",[10,134,135],{},"データ層は用語200語と記入例5本を上げてきた。\n記入例はどれも検算を通った。\n描画層で止まったのは2点だけで、1つは金額欄の幅超過、もう1つはテストが記入例の件数を5で固定していたことだった。\n租税公課の図に使う6本目を足した直後だったので、そこがぶつかった。",[10,137,138],{},"Chrome DevTools のスクリーンショットが応答待ちに退避したので、ヘッドレスのブラウザで6枚撮り直し、自分の目で見た。\n記事に差し替えた3枚は、PC 幅と390px のエミュレーションの両方で図の位置を実測している。\nギャラリーでは before（書籍のページ）と after（生成した SVG）が並んで出るようになった。",[10,140,141],{},"指摘の反映にもサブエージェントを2周ぶん回した。\nテストは64件から66件へ増えても緑のままで、6枚とも再生成の差分は出なかった。\n待っている間に、スキルの規約表を実装値へ合わせておいた。",[10,143,144],{},"ここまでで、JSON 正本から生成器を通して SVG が出る1本の道ができた。\n同じ入力からは毎回同じ SVG が出る。",[20,146,147],{"id":147},"マゼンタは飾りではない",[10,149,150],{},"MacBook で並びを見たとき、最初に引っかかったのは色だった。\n別表四の図で、留保の欄と52行目の「所得金額又は欠損金額」の文字がマゼンタになっている。\n文字は黒でいい。\n背景を濃いグレーにすれば足りる。",[10,152,153],{},"原図では、当期利益の行から末尾の所得金額までがまとめて枠で囲ってある。\nあの囲みが図の主張そのものなので、マゼンタを使うならそちらの枠に使う。\n別表五(一)の純資産も同じで、囲う範囲を原図に合わせる。",[10,155,156],{},"同じ図で細かいところも2つ返した。\n資本準備金の行が落ちているので、原図の中身を省略しない。\n区分の列で未納法人税等が3行分をまたいでいるので、そこも別表の表示形式どおりにする。\n表示形式は見た目の好みではなく、読み手がその図を申告書として認識するための約束なので、崩すと図の意味が変わる。",[10,158,159],{},"指摘は、図を直接直させずに台帳へ逐語で積ませた。\n生成器を通さずに SVG を触っても、次の再生成で消える。\n台帳のルールを生成器のパラメータへ落として、そこから作り直す。\nこの周でパラメータに増えたのは、枠、縦に並ぶ複票、欄の左右、グループのタグ、空欄行だ。\n増えたぶんはスキルの説明と仕様書にも書き戻させた。",[20,161,162],{"id":162},"残っているもの",[10,164,165],{},"図と説明文のどちらがわかりやすいと言われているのか、まだ確かめていない。\n今日は図のほうを作り直したが、答えが文章のほうだったら、次に手を入れる場所が変わる。",[94,167,168,171],{},[97,169,170],{},"レビュー、ルール反映、再生成の周回（残りの図）",[97,172,173],{},"判断待ちが5件",{"title":175,"searchDepth":176,"depth":176,"links":177},"",2,[178,179,180,181,182,183,184,185],{"id":22,"depth":176,"text":22},{"id":42,"depth":176,"text":42},{"id":57,"depth":176,"text":58},{"id":78,"depth":176,"text":79},{"id":114,"depth":176,"text":115},{"id":124,"depth":176,"text":125},{"id":147,"depth":176,"text":147},{"id":162,"depth":176,"text":162},"dev",null,"税大講本の図で確立したbefore/after方式を、別表四・五の講座へ広げた1日の記録。図の実体がゼロだった発見、原図の復元、Miller Columnのやり直し、JSON正本からSVGを生成する別表作成スキルの確立までを、指摘と修正の順に残す。","md",{},true,"/beppyo-figure-before-after-rebuild","eurekapu-nuxt4",false,"2026-08-31T00:00:00.000Z",{"title":5,"description":188},"make-diary","2026-08/2026-08-31/beppyo-figure-before-after-rebuild",[200,201,202,203,204],"図解","SVG","税務","Claude Code","サブエージェント","xh8M_gSYzohr7vQ4-Agg3eGTkruDOTachFrQzeTo7kI",[],[208,212,216,220,224],{"title":209,"path":210,"publishedAt":211},"SVG図解を4:3比率から解放する ─ スキルに縦流しルールを追加して記事図解を一括刷新した","/svg-diagram-vertical-flow-rule","2026-07-04T00:00:00.000Z",{"title":213,"path":214,"publishedAt":215},"別表四・五講座の図解を SVG 生成器で作り直す：図解49枚と帳票175枚をギャラリーに並べるまで","/beppyo-figures-svg-pipeline","2026-09-01T00:00:00.000Z",{"title":217,"path":218,"publishedAt":219},"2026年8月18日の開発日記 - 止めどきを決め続けた一日","/2026-08-18-diary","2026-08-18T00:00:00.000Z",{"title":221,"path":222,"publishedAt":223},"税大講本の図解を作り込んだ一日、国税徴収法の差し押さえ図から所得税法の損益通算図まで","/zeimu-koten-figure-content-fixes","2026-08-17T00:00:00.000Z",{"title":225,"path":226,"publishedAt":227},"税大講本の図をSVG化、所得税から相続税まで4科目を並行セッションで進めた1日","/zeimu-figure-four-tax-codes","2026-08-16T00:00:00.000Z","https://log.eurekapu.com/og/blog/beppyo-figure-before-after-rebuild.png?v=2026-08-31T00%3A00%3A00.000Z&title=%E5%88%A5%E8%A1%A8%E5%9B%9B%E3%83%BB%E4%BA%94%E3%81%AE%E8%AC%9B%E5%BA%A7%E5%9B%B3%E3%82%92before%2Fafter%E6%96%B9%E5%BC%8F%E3%81%A7%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%99%EF%BC%88JSON%E6%AD%A3%E6%9C%AC%E3%81%8B%E3%82%89SVG%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B%E4%BB%95%E7%B5%84%E3%81%BF%E3%81%B8%EF%BC%89&author=Kei%20Komatsu&sig=a1021f11fbe8a046",1788417367409]