[{"data":1,"prerenderedAt":260},["ShallowReactive",2],{"content-/prefecture-agriculture-quiz":3,"all-pages-for-dir":258,"og-image-/prefecture-agriculture-quiz":259},{"id":4,"title":5,"body":6,"category":240,"description":241,"extension":242,"meta":243,"navigation":208,"ogImage":244,"path":245,"project_name":246,"published":247,"publishedAt":248,"seo":249,"stem":250,"tags":251,"todo":244,"unpublished":247,"updatedAt":244,"__hash__":257},"pages/2026-05/2026-05-13/prefecture-agriculture-quiz.md","統計データブックから都道府県農作物クイズを作った日",{"type":7,"value":8,"toc":227},"minimark",[9,13,17,20,23,26,29,34,37,40,44,47,54,114,117,120,167,170,174,177,180,194,197,223],[10,11,12],"h2",{"id":12},"今日やったこと",[14,15,16],"p",{},"統計年鑑の主産地データ（2022年産収穫量）から、都道府県の農作物クイズを実装した。みかんの1位はどこか、りんごの1位はどこか、といった4択を、左のSVGチャートと連動させながら順に解いていくページ。",[14,18,19],{},"最初は別プロジェクト（書籍ナレッジベース側）に作ったのだが、リポジトリを横断して動かすうちに「mdx-playground 側に置いた方が読み手が触りやすい」と判断して移植した。同じVueでもページの作法が違うため、まるごと書き換えになった。",[10,21,22],{"id":22},"完成形",[14,24,25],{},"左ペインに横棒の都道府県ランキングをSVGで描き、右ペインに同じ品目の4択問題を縦に並べる。スクロールすると右ペインの問題カードが切り替わり、左ペインのチャートも同期して切り替わる。矢印キー（←→）で前後の問題に移動でき、右ペインも一緒に動く。",[10,27,28],{"id":28},"詰まったところ",[30,31,33],"h3",{"id":32},"intersectionobserverのバンドが狭すぎた","IntersectionObserverのバンドが狭すぎた",[14,35,36],{},"最初の実装では、画面中央付近を判定バンドにしていた。Q1を読んでいるつもりなのに、画面の上下にQ2/Q3の端が入った瞬間に左ペインの図が切り替わってしまう。「Q1のチャートが見たいのに、Q3のチャートが表示される」状態で、初期表示の時点ですでに崩れていた。",[14,38,39],{},"判定バンドの上下マージンを広げ、画面の中央付近に厚みを持たせて、Q1がはみ出にくいようにした。ここはEurekapu-NUXT4のQuizPageを参考にしつつ、しきい値だけ調整している。",[30,41,43],{"id":42},"自動スクロール中にobserverが拾いすぎる","自動スクロール中にObserverが拾いすぎる",[14,45,46],{},"矢印キーでQ2に飛ぶときに、スクロールが滑っていく途中で Observer がQ1とQ2の境目を一瞬拾い、左ペインの図がチラチラ切り替わる現象が出た。",[14,48,49,53],{},[50,51,52],"code",{},"suppressObserverUntil"," というタイムスタンプを Ref に持たせて、自動スクロール開始から900msのあいだは Observer の callback を return で打ち切るようにした。ユーザーの自然スクロール時には反応する、矢印キーでの飛び移動時には黙る、という二段構えになる。",[55,56,61],"pre",{"className":57,"code":58,"language":59,"meta":60,"style":60},"language-ts shiki shiki-themes vitesse-light vitesse-light","// 概念だけ抜粋\nif (Date.now() \u003C suppressObserverUntil.value) return\n","ts","",[50,62,63,72],{"__ignoreMap":60},[64,65,68],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"sxvE3","// 概念だけ抜粋\n",[64,73,75,79,83,87,90,94,97,100,103,105,108,111],{"class":66,"line":74},2,[64,76,78],{"class":77},"sHkkW","if",[64,80,82],{"class":81},"shFtX"," (",[64,84,86],{"class":85},"s4oTP","Date",[64,88,89],{"class":81},".",[64,91,93],{"class":92},"senZ8","now",[64,95,96],{"class":81},"()",[64,98,99],{"class":81}," \u003C",[64,101,102],{"class":85}," suppressObserverUntil",[64,104,89],{"class":81},[64,106,107],{"class":85},"value",[64,109,110],{"class":81},")",[64,112,113],{"class":77}," return\n",[10,115,116],{"id":116},"ユーザーから細かい指示が連続して入った",[14,118,119],{},"ここからが今日の本番。一度動くようになってからの調整が長かった。",[121,122,123,131,137,143,149,155,161],"ul",{},[124,125,126,130],"li",{},[127,128,129],"strong",{},"正解の色",": 最初はマゼンタで「正解！」を出していた。「正解は緑、誤答はグレーに✗マーク」と指示が入り、配色を組み直した。マゼンタはたしかに目立ちすぎて、画面を見るたびに目が痛い",[124,132,133,136],{},[127,134,135],{},"解説の出し方",": 「正解の選択肢だけに解説」ではなく「選択肢全部の末尾に解説を出す」に変更。誤答を選んだ人にも、なぜそれが違うのかが届く",[124,138,139,142],{},[127,140,141],{},"解説の中身",": 「なぜ和歌山がみかん1位なのか」「なぜ静岡・愛媛が続くのか」を細かく書いた。地形・気候・歴史の3点を毎回入れる形に統一",[124,144,145,148],{},[127,146,147],{},"件名（都道府県名）を隠す",": グラフの棒に最初から「和歌山」と書いてあったら答えがバレる。回答前は順位だけ、回答後に「9-1 和歌山」のように表示する形に変えた",[124,150,151,154],{},[127,152,153],{},"「いまここ」表示",": 現在の問題カードに active クラスを当て、濃いグレー（#4b5563）の枠線と影を載せた。スクロール中にどのカードが採点対象なのか目で追える",[124,156,157,160],{},[127,158,159],{},"フォントと選択肢",": 解説は16px、行間1.75に上げた。選択肢は縦並びだと縦に間延びするので、横4列に並べ直した",[124,162,163,166],{},[127,164,165],{},"解説の見出し",": v-html を使い、【日本全体の偏り】【1位 ○○が首位の理由】を独立行の太字で出す",[14,168,169],{},"修正のたびにブラウザを再読み込みして、選択肢を1つ選んでみて、また指示が飛んでくる。1往復で1つの違和感を潰していく作業を10往復ほど続けた。",[10,171,173],{"id":172},"indexvue-への動線","index.vue への動線",[14,175,176],{},"「学習・クイズ」セクションに🗾アイコンのカードを追加して、トップから一気に飛べるようにした。ここを作っておかないと、せっかく実装したクイズが奥に埋まる。",[10,178,179],{"id":179},"学び",[121,181,182,185,188,191],{},[124,183,184],{},"IntersectionObserverは「拾いすぎ」と「拾わなさすぎ」のあいだに細い谷がある。バンド幅と suppress 時間の両方を持っておくと安定する",[124,186,187],{},"正解色をマゼンタにしてはいけない。緑＋グレー＋✗が、目に優しいし意味も伝わる",[124,189,190],{},"「正解の選択肢にだけ解説を出す」と、誤答を選んだ人にとっては何が起きたのか分からない。全選択肢に同じ解説を出す方が、教材としては親切",[124,192,193],{},"UIは画面を見ながら指示が飛んできて初めて磨かれる。最初に全部決めようとせず、まず動かして、見ながら直す方が早い",[10,195,196],{"id":196},"明日やること",[121,198,201,211,217],{"className":199},[200],"contains-task-list",[124,202,205,210],{"className":203},[204],"task-list-item",[206,207],"input",{"disabled":208,"type":209},true,"checkbox"," 統計データブックの他ページ（工業出荷額・人口など）も同じ枠組みでクイズ化できるか試す",[124,212,214,216],{"className":213},[204],[206,215],{"disabled":208,"type":209}," スマホ幅で左ペインが潰れるので、768px以下では左右を縦積みに切り替える",[124,218,220,222],{"className":219},[204],[206,221],{"disabled":208,"type":209}," 正答率を localStorage に保存して、復習モードを用意する",[224,225,226],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":60,"searchDepth":74,"depth":74,"links":228},[229,230,231,236,237,238,239],{"id":12,"depth":74,"text":12},{"id":22,"depth":74,"text":22},{"id":28,"depth":74,"text":28,"children":232},[233,235],{"id":32,"depth":234,"text":33},3,{"id":42,"depth":234,"text":43},{"id":116,"depth":74,"text":116},{"id":172,"depth":74,"text":173},{"id":179,"depth":74,"text":179},{"id":196,"depth":74,"text":196},"dev","統計年鑑の主産地データをTurso DBから取り出し、左にSVGチャート・右に4択クイズの2ペインクイズページを実装。IntersectionObserverのバンド調整とsuppressObserverUntilで詰まった。","md",{},null,"/prefecture-agriculture-quiz","mdx-playground",false,"2026-05-13T00:00:00.000Z",{"title":5,"description":241},"2026-05/2026-05-13/prefecture-agriculture-quiz",[252,253,254,255,256],"クイズ","Vue","IntersectionObserver","SVG","都道府県","mNym1qmqSE3m-PA1GoASKv_4Cz3IW4yNfih_VWWJmag",[],"https://log.eurekapu.com/og/blog/prefecture-agriculture-quiz.png?v=2026-05-13T00%3A00%3A00.000Z&title=%E7%B5%B1%E8%A8%88%E3%83%87%E3%83%BC%E3%82%BF%E3%83%96%E3%83%83%E3%82%AF%E3%81%8B%E3%82%89%E9%83%BD%E9%81%93%E5%BA%9C%E7%9C%8C%E8%BE%B2%E4%BD%9C%E7%89%A9%E3%82%AF%E3%82%A4%E3%82%BA%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E6%97%A5&author=Kei%20Komatsu&sig=7392a8d0f4f6e8f5",1782528836297]