[{"data":1,"prerenderedAt":298},["ShallowReactive",2],{"content-/textbook-prototype-and-svg-integration":3,"all-pages-for-dir":296,"og-image-/textbook-prototype-and-svg-integration":297},{"id":4,"title":5,"body":6,"category":277,"description":278,"extension":279,"meta":280,"navigation":241,"ogImage":281,"path":282,"project_name":283,"published":284,"publishedAt":285,"seo":286,"stem":287,"tags":288,"todo":281,"unpublished":284,"updatedAt":281,"__hash__":295},"pages/2026-05/2026-05-13/textbook-prototype-and-svg-integration.md","決算書教科書ページの立ち上げとSVG統合",{"type":7,"value":8,"toc":262},"minimark",[9,14,18,26,32,35,39,42,53,57,60,63,67,70,73,77,80,85,88,96,100,103,110,114,117,124,137,141,144,155,162,172,175,179,182,185,189,192,203,206,227,230],[10,11,13],"h2",{"id":12},"朝計画書からcodexに殴られに行った","朝、計画書からCodexに殴られに行った",[15,16,17],"p",{},"決算書の教科書ページを新規に立ち上げる日だった。",[15,19,20,21,25],{},"いきなり手を動かすのではなく、まず ",[22,23,24],"code",{},"memo/2026-05-13/textbook-pages-plan.md"," に計画書を書き起こした。章構成、ルート設計、クイズデータとの紐付け、フェーズ分け（X-0/X-1/X-2）まで一通り並べてから、Codexに投げた。",[27,28,29],"blockquote",{},[15,30,31],{},"「このプランをレビューして。瑣末な点へのクソリプはしないで。致命的な点だけ指摘して」",[15,33,34],{},"返ってきた指摘でレジストリの粒度を直し、再レビュー。今度は型定義の整合性を突かれた。3往復目でようやくCodexが致命傷を指摘しなくなった。手を動かす前にレビューを3周回したおかげで、後の実装中に「設計から考え直し」の戻りが発生しなかった。",[10,36,38],{"id":37},"phase-x-0-984問のクイズデータをpythonで切り出す","Phase X-0: 984問のクイズデータをPythonで切り出す",[15,40,41],{},"基盤を固めるフェーズから始めた。",[15,43,44,45,48,49,52],{},"既存のクイズデータが984問あって、これを章別・節別に並べ替えてレジストリ化する必要があった。Pythonスクリプトを書いてもらい、",[22,46,47],{},"quizRegistry.ts"," と ",[22,50,51],{},"textbookChapters.ts"," を生成。型定義を先に切ってからデータを流し込む順序にしたので、後段の章ページが型エラーで止まることがなかった。",[10,54,56],{"id":55},"phase-x-1-ch1パイロットを書いてユーザーに見せた","Phase X-1: CH1パイロットを書いてユーザーに見せた",[15,58,59],{},"いきなり7章全部を書かせず、CH1だけパイロット実装してレビューに出した。",[15,61,62],{},"ここで「この導線でいいか」「クイズの埋め込み方はこの粒度でいいか」を確認してもらってから次に進む。先にパイロットを通すと、後でまとめて書き直す手戻りが消える。",[10,64,66],{"id":65},"phase-x-2-並列サブエージェントで6章を一気に書く","Phase X-2: 並列サブエージェントで6章を一気に書く",[15,68,69],{},"CH2〜CH7を、サブエージェント4本＋2本の並列構成で走らせた。",[15,71,72],{},"サブエージェントには章別の素材と型定義だけ渡して、あとは独立に書かせる。並列で動かすと、メインのターンが手詰まりにならず、こちらは別の作業（SVG統合の検討など）と同時に進められた。",[10,74,76],{"id":75},"書籍のテキストをdbから引いてきてで立ち止まる","「書籍のテキストをDBから引いてきて」で立ち止まる",[15,78,79],{},"途中でユーザーから指示が入った。",[27,81,82],{},[15,83,84],{},"「TursoDBに入れた書籍の編集済みテキストを、教科書ページに参照させてほしい」",[15,86,87],{},"ここで一度手を止めた。決算書解説の参考書をOCR→編集してDBに格納してあるが、それを教科書ページ本文に取り込むと、翻案にあたるリスクがある。引用の範囲を超えるし、翻案権の侵害を構成しうる。",[15,89,90,91,95],{},"「やります」ではなく「ちょっと相談させてください」と返した。落としどころとして、",[92,93,94],"strong",{},"章節の見出しレベルの『論点骨組み』だけを抽出","して、構成のガイドに使う方針に切り替えた。本文は自分の言葉で書き直し、書籍のテキストそのものは画面に出さない。著作権の地雷を踏まず、書籍の論点構造の有用性だけを使う形に着地した。",[10,97,99],{"id":98},"svg図をhighlight指定で組み込む","SVG図をhighlight指定で組み込む",[15,101,102],{},"クイズで使っていたSVG図を、教科書ページに再利用する実装。",[15,104,105,106,109],{},"ただ貼るだけでなく、教科書本文の流れに合わせて図の特定要素を強調表示できるよう、",[22,107,108],{},"highlight"," プロパティを足した。本文で「ここがB/Sの右側」と書いたタイミングで、SVG内の右側ブロックだけがマゼンタになる。文字での説明と図の指差しが一致するので、読者の視線が散らからない。",[10,111,113],{"id":112},"別セッションで決算書解説の参考書統合プロジェクトのphase-01","別セッションで決算書解説の参考書統合プロジェクトのPhase 0/1",[15,115,116],{},"並行して別セッションでは、決算書解説の参考書の構成を下敷きにした業種別解説プロジェクトを進めていた。",[15,118,119,120,123],{},"Phase 0で企業選定、Phase 1でEDINETからの財務データ取得まで。途中、EDINETDB_API_KEYが invalid で弾かれてストップ。ユーザーから新キーを受け取ったが、",[22,121,122],{},".env"," への書き込みは harness の禁止ルールで弾かれた。",[15,125,126,127,130,131,133,134,136],{},"ここで横着せず、Pythonの ",[22,128,129],{},"os.environ"," 経由でセッション内だけにキーを持たせて取得処理を回した。",[22,132,122],{}," を書き換えない代わりに、セッションが切れたら鍵も消える状態にしてある。鍵が ",[22,135,122],{}," に残らないので、git に紛れ込む事故も起きない。",[10,138,140],{"id":139},"phase-2-業種別16-svg図のパイロット-並列で17個追加","Phase 2: 業種別16 SVG図のパイロット → 並列で17個追加",[15,142,143],{},"パイロットで業種別のSVG図を16個書き、レイアウトと配色の方針が固まった段階で、残り17個を4並列のサブエージェントに分担させた。",[15,145,146,147,150,151,154],{},"並列で走らせると、当然のように品質のばらつきが出る。特にフォントサイズの統一が崩れた。SVGガイドラインでは見出しと本文と注釈で決められたサイズがあるのに、サブエージェントが書いたSVGには ",[22,148,149],{},"font-size=\"15px\""," や ",[22,152,153],{},"font-size=\"14px\""," が混じっていた。",[15,156,157,158,161],{},"ここで力技に走らず、",[22,159,160],{},"grep"," で違反箇所をスキャン。",[163,164,169],"pre",{"className":165,"code":167,"language":168},[166],"language-text","font-size=\"15px\"  # ガイド違反\nfont-size=\"14px\"  # ガイド違反\n","text",[22,170,167],{"__ignoreMap":171},"",[15,173,174],{},"該当ファイルを並べて、Editツールで一括置換。1ファイルずつ目視で直す手順だったら半日溶けていた。検出と置換を別工程にしたおかげで、20分で全SVGがガイドに準拠した。",[10,176,178],{"id":177},"chapternavの目次を-h3-まで対応","ChapterNavの目次を h3 まで対応",[15,180,181],{},"目次の階層を h2 までで止めていたが、章が長くなると h3 がないと現在地が掴めない。",[15,183,184],{},"色やアイコンで階層を表すと情報量が増えすぎるので、フォントサイズとインデントだけで階層を表現する方針にした。h2 と h3 で字下げ量を変え、フォントサイズで主従を出す。装飾を増やさず、文字の差だけで階層が伝わる形に落ち着いた。",[10,186,188],{"id":187},"矢印キー-で章間を移動","矢印キー（← →）で章間を移動",[15,190,191],{},"最後に、TextbookPageに矢印キーのショートカットを追加した。",[15,193,194,195,198,199,202],{},"教科書を読んでいるとき、マウスでChapterNavのリンクを毎回クリックするのは指が止まる。",[22,196,197],{},"←"," で前章、",[22,200,201],{},"→"," で次章に飛べるようにすると、読書のリズムが切れない。入力フィールドにフォーカスがあるときは無効化する条件分岐も入れて、ショートカットが暴発しない形にした。",[10,204,205],{"id":205},"今日の手応え",[207,208,209,213,216,219],"ul",{},[210,211,212],"li",{},"計画書 → Codex 3往復 → 着手の順序を踏むと、実装中の戻りが消えた",[210,214,215],{},"書籍の文章をDBから直接引く方針は、止まって相談したおかげで翻案リスクを回避できた",[210,217,218],{},"並列サブエージェントで量産したSVGの品質ブレは、grepで違反パターンを拾えば後追いで揃えられる",[210,220,221,223,224,226],{},[22,222,122],{}," を書き換えなくても、",[22,225,129],{}," でセッション内だけにキーを持たせる回避路がある",[10,228,229],{"id":229},"明日やること",[207,231,234,244,250,256],{"className":232},[233],"contains-task-list",[210,235,238,243],{"className":236},[237],"task-list-item",[239,240],"input",{"disabled":241,"type":242},true,"checkbox"," 教科書ページのCH1〜CH7を一通り通読し、章間の文体の揺れを拾う",[210,245,247,249],{"className":246},[237],[239,248],{"disabled":241,"type":242}," 業種別SVG図33個を1枚のインデックスページにまとめて、業種選択UIを作る",[210,251,253,255],{"className":252},[237],[239,254],{"disabled":241,"type":242}," highlight機能の動作を、矢印キー移動と組み合わせて検証する",[210,257,259,261],{"className":258},[237],[239,260],{"disabled":241,"type":242}," 翻案リスクで保留した「書籍テキスト参照」を、引用範囲（短いセクション見出しのみ）で再設計できないか検討",{"title":171,"searchDepth":263,"depth":263,"links":264},2,[265,266,267,268,269,270,271,272,273,274,275,276],{"id":12,"depth":263,"text":13},{"id":37,"depth":263,"text":38},{"id":55,"depth":263,"text":56},{"id":65,"depth":263,"text":66},{"id":75,"depth":263,"text":76},{"id":98,"depth":263,"text":99},{"id":112,"depth":263,"text":113},{"id":139,"depth":263,"text":140},{"id":177,"depth":263,"text":178},{"id":187,"depth":263,"text":188},{"id":205,"depth":263,"text":205},{"id":229,"depth":263,"text":229},"dev","教科書ページプロジェクトを新規に立ち上げて、Codexと3往復のレビューを回してから着手した。書籍の文章をDBから引いてくる方針は著作権の翻案リスクで一度止めて、章節見出しの骨組みだけ抽出する形に切り替えた。並列サブエージェントで章を量産しつつ、フォントサイズ違反をgrepで一気に拾った1日。","md",{},null,"/textbook-prototype-and-svg-integration","eurekapu-nuxt4",false,"2026-05-13T00:00:00.000Z",{"title":5,"description":278},"2026-05/2026-05-13/textbook-prototype-and-svg-integration",[289,290,291,292,293,294],"教科書","SVG","Codexレビュー","サブエージェント並列","著作権","EDINET","6LJ1wpMQ1pEbomaPYIU30cDgpZgj4Df9wy8xQ929iVo",[],"https://log.eurekapu.com/og/blog/textbook-prototype-and-svg-integration.png?v=2026-05-13T00%3A00%3A00.000Z&title=%E6%B1%BA%E7%AE%97%E6%9B%B8%E6%95%99%E7%A7%91%E6%9B%B8%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%81%A8SVG%E7%B5%B1%E5%90%88&author=Kei%20Komatsu&sig=237289f58e904b8d",1782528836412]