[{"data":1,"prerenderedAt":251},["ShallowReactive",2],{"content-/oshieru-sansu-interactive":3,"all-pages-for-dir":230,"related-/oshieru-sansu-interactive":231,"og-image-/oshieru-sansu-interactive":250},{"id":4,"title":5,"body":6,"category":211,"concepts":212,"description":213,"extension":214,"meta":215,"navigation":140,"ogImage":212,"path":216,"project_name":217,"published":218,"publishedAt":219,"seo":220,"source":221,"stem":222,"tags":223,"todo":212,"unpublished":218,"updatedAt":212,"__hash__":229},"pages/2026-06/2026-06-12/oshieru-sansu-interactive.md","小学校算数のインタラクティブ学習コンテンツを作る - 蔵書DBから全12章60セクションを一気に構築",{"type":7,"value":8,"toc":200},"minimark",[9,13,17,21,29,32,54,61,64,67,70,84,87,90,93,99,102,105,108,115,118,122,129,159,162,165,180,183,186],[10,11,12],"h1",{"id":12},"小学校算数のインタラクティブ学習コンテンツを作る",[14,15,16],"p",{},"蔵書DB（Turso）に取り込んである算数の参考書を素材に、「子どもに教えられる算数」というインタラクティブ学習コンテンツを作った。トップページにカードを置き、一旦非公開のまま全12章・60セクションを構築。夜には小5の長男との会話がそのままコンテンツの1セクションになった。",[18,19,20],"h2",{"id":20},"構成案からフェーズ実装へ",[14,22,23,24,28],{},"最初の指示は「この書籍をオリジナルコンテンツに取り込みたい。トップページにカードコンポーネントを作って、章立てごとか、もっと良い編集案があればそれで」というふわっとしたもの。プランモードで蔵書DBの書籍構造と既存のトップページのカードパターンを調査させ、",[25,26,27],"strong",{},"4分野×12章＋全章収録＋教具は厳選","という方針に落ち着いた。",[14,30,31],{},"計画はCodexにレビューさせ、指摘4点（＋セクション見出しの扱い1点）をすべて反映してから承認。フェーズごとにコミット可能な区切りを設けた:",[33,34,35,42,48],"ul",{},[36,37,38,41],"li",{},[25,39,40],{},"Phase A（骨格）",": 共通コンポーネント3つ（Section / GuideChapter / Hub）、12章分のページシェル。同型のプレースホルダはbashループで一括生成",[36,43,44,47],{},[25,45,46],{},"Phase B（計算編）",": 教具の純粋ロジック3本→テスト24件pass→Vueコンポーネント3本。第1〜3章の図解と本文",[36,49,50,53],{},[25,51,52],{},"Phase C〜F",": 数の性質編・図形編・割合編など残り9章。教具ロジック計8本、図解約20枚",[14,55,56,57,60],{},"書籍の本文は使わず、DBからは「教え方の要点」の要旨だけを把握して独自記述で執筆する方針。テストはSSOT整合性と章本文網羅の2本を先に書き、ロジックも",[25,58,59],{},"テストファースト","で進めた。展開図判定の教具では「11種すべてが成立、ひっかけ4種が不成立」をテストで検証している。",[14,62,63],{},"途中、樹形図ロジックのテストが1件落ちた。原因は許容誤差が丸め（1/6≒0.17）より厳しかったこと。仕様側を直して全フェーズ完了、テスト50件pass。",[18,65,66],{"id":66},"表示崩れの修正ループ",[14,68,69],{},"完成後にブラウザで眺めていたら、図解が崩れているページを見つけた。スクリーンショットを貼って「これ表示が崩れてるので直して」と投げる→修正→他の図解も全部撮って横展開チェック、というループを回した。",[33,71,72,78],{},[36,73,74,77],{},[25,75,76],{},"円周率の図解",": ピンクの数式ボックスが円のキャプション「まわりの長さ＝円周」に重なって文字を隠していた",[36,79,80,83],{},[25,81,82],{},"点対称の図解",": 180度回転した平行四辺形が回転前と完全に重なってしまい、見せたい「S字」の配置になっていなかった。回転後の座標を明示して修正",[14,85,86],{},"合計4枚を直した。スクショを貼るだけで座標レベルの修正まで進むので、目視チェック係に徹すればいい。",[18,88,89],{"id":89},"小5の長男の説明がコンテンツになった",[14,91,92],{},"夜、小5の長男がいま小数の割り算を習っていると聞いて、「計算はできるけど何を表してるのかわからんよなぁ。1÷0.4とか、0.4で割るってどういうこと？」と振ってみた。返ってきた答えに手が止まった。",[94,95,96],"blockquote",{},[14,97,98],{},"「それは1の中に0.4が《いくつ入るか》ってことだよ。2.5個入るでしょ？」",[14,100,101],{},"教えるつもりが教えてもらった。しかも作ったばかりのコンテンツの第3章（小数計算）の最終セクション「1より小さい数で割ると答えが大きくなる理由」が、まさに同じ筋（2÷0.4=5）を扱っていた。",[14,103,104],{},"そこで、長男の説明した「答えが半端になるケース」（1÷0.4=2.5）専用の図解を1枚追加し、本文に発展形として書き足した。途中devサーバーがビルド完了直後にexit 1で死ぬトラブルがあったが、ログを追って復旧。図解を撮影して確認し、コミットまで通した。家庭の会話が当日中にコンテンツへ反映される速度が、自前で教材を作る一番のうまみだと思う。",[18,106,107],{"id":107},"パンくずの一括追加と一覧性の改善",[14,109,110,111,114],{},"新ハブページを開いたら、ホームへ戻るパンくずリストが無いことに気づいた。調べると、ピアノロールのページなど他にも入っていないページが残っていた。既存のbuildBreadcrumbs実装と中間セグメント（guide等）の扱いを確認させ、",[25,112,113],{},"4ページにまとめてBreadcrumbを追加","。",[14,116,117],{},"合わせて、ハブページが2列レイアウトで一覧性に欠けていたので「もうちょっと工夫できないか」と注文し、レイアウトを改善した。",[18,119,121],{"id":120},"明日のtodoをmemoに固定","明日のToDoをmemoに固定",[14,123,124,125,114],{},"「明日でいいんですけど」と前置きして、積み残しをマークダウンに残させた。保存先は ",[126,127,128],"code",{},"memo/2026-06-12/todo-oshieru-sansu-section-charts.md",[33,130,133,143,153],{"className":131},[132],"contains-task-list",[36,134,137,142],{"className":135},[136],"task-list-item",[138,139],"input",{"disabled":140,"type":141},true,"checkbox"," ヘッダーレベル2のセクションごとに、ドキュメントコミュニケーション＋SVGダイアグラムのスキルで図解を入れる（無理に全部ではなく、入れられるところは必ず）",[36,144,146,148,149,152],{"className":145},[136],[138,147],{"disabled":140,"type":141}," 図形系セクションは静的SVGではなく",[25,150,151],{},"インタラクティブ優先","。参考実装として既存の多角形の外角ページと立方体の恒等式ページのパスを memo に明記",[36,154,156,158],{"className":155},[136],[138,157],{"disabled":140,"type":141}," 参考になるOSSのリサーチステップも追記済み",[14,160,161],{},"多角形の外角の和のように「触って動かせる」形にできる題材が図形編には多い。静的な図解で済ませず、既存のインタラクティブページと同じイメージで楽しくする方向に倒す。",[18,163,164],{"id":164},"分割コミットで締める",[14,166,167,168,171,172,175,176,179],{},"昼のセッションでは ",[126,169,170],{},"/commit"," で82ファイル・7,836行をステージし、並行セッションの別作業（tokibo等）が混ざった ",[126,173,174],{},"index.vue"," はoshieru-sansu分のハンクだけ（8行＋1行）を抜き出してステージした。その後「その他も意味がある単位で」と頼んで計10コミットに分割。最後に全ユニットテストを回し、",[25,177,178],{},"17,207件すべてpass","でクリーンに着地した。",[14,181,182],{},"夕方のセッションでも、memo追記やパンくず修正を含む59ファイルを5コミットに分割してプッシュ。機能単位で履歴が切れているので、後から「あの日何をやったか」がコミットログだけで追える。",[18,184,185],{"id":185},"学び",[33,187,188,191,194,197],{},[36,189,190],{},"蔵書DBの書籍は本文転載ではなく「要旨の把握→独自記述」で教材化する。著作権面でも品質面でもこの順序が正しい",[36,192,193],{},"スクショを貼って指摘→修正→横展開チェックのループは、図解の品質保証として手数が少ない。人間は画面の違和感を拾う係に徹する",[36,195,196],{},"子どもとの会話は教材の素材になる。「1の中に0.4がいくつ入るか」のような腹落ちする説明は、その日のうちにコンテンツへ入れてしまう",[36,198,199],{},"並行セッションでファイルが交錯するときは、ハンク単位のステージングで作業を分離できる",{"title":201,"searchDepth":202,"depth":202,"links":203},"",2,[204,205,206,207,208,209,210],{"id":20,"depth":202,"text":20},{"id":66,"depth":202,"text":66},{"id":89,"depth":202,"text":89},{"id":107,"depth":202,"text":107},{"id":120,"depth":202,"text":121},{"id":164,"depth":202,"text":164},{"id":185,"depth":202,"text":185},"dev",null,"Turso DBに取り込んだ算数の参考書を素材に、教具・図解入りのインタラクティブ学習コンテンツを構築した記録。表示崩れの修正ループ、小5の子どもとの会話のコンテンツ反映、パンくず一括追加まで。","md",{},"/oshieru-sansu-interactive","mdx-playground",false,"2026-06-12T00:00:00.000Z",{"title":5,"description":213},"make-diary","2026-06/2026-06-12/oshieru-sansu-interactive",[224,225,226,227,228],"算数","インタラクティブコンテンツ","学習教材","Turso","Nuxt","N5D4dGAu9JPBE1eTfK6yfMsFx2cyElY3VAqHUJ2pGo8",[],[232,236,239,243,246],{"title":233,"path":234,"publishedAt":235},"2026年6月16日の開発日記 - Cloudflare の1MB壁とNuxtビルド20分の壁、両方に頭をぶつけた日","/2026-06-16-diary","2026-06-16T00:00:00.000Z",{"title":237,"path":238,"publishedAt":219},"不動産登記簿の解説コンテンツを全8章に展開し実物謄本のデータ化に着手","/tokibo-registry-content-expansion",{"title":240,"path":241,"publishedAt":242},"数学参考書をOCRで全文DB化し、その日のうちにインタラクティブ教材へ変換した記録","/math-textbook-interactive-content","2026-06-10T00:00:00.000Z",{"title":244,"path":245,"publishedAt":242},"蔵書DBから財務DD学習コンテンツを自作する——解説とクイズをローカル限定で組み上げた記録","/zaimu-dd-learning-content",{"title":247,"path":248,"publishedAt":249},"memory-makers ページに台湾系3社（Apacer / Phison / Etron）と TSMC・Samsung のチャートを足した日","/memory-makers-tw-fabless-add-and-charts","2026-06-05T00:00:00.000Z","https://log.eurekapu.com/og/blog/oshieru-sansu-interactive.png?v=2026-06-12T00%3A00%3A00.000Z&title=%E5%B0%8F%E5%AD%A6%E6%A0%A1%E7%AE%97%E6%95%B0%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E5%AD%A6%E7%BF%92%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E4%BD%9C%E3%82%8B%20-%20%E8%94%B5%E6%9B%B8DB%E3%81%8B%E3%82%89%E5%85%A812%E7%AB%A060%E3%82%BB%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%B8%80%E6%B0%97%E3%81%AB%E6%A7%8B%E7%AF%89&author=Kei%20Komatsu&sig=18e9f4ce83cf1c94",1786424367842]