[{"data":1,"prerenderedAt":445},["ShallowReactive",2],{"content-/2026-05-26-diary":3,"all-pages-for-dir":443,"og-image-/2026-05-26-diary":444},{"id":4,"title":5,"body":6,"category":424,"description":425,"extension":426,"meta":427,"navigation":381,"ogImage":428,"path":429,"project_name":430,"published":431,"publishedAt":432,"seo":433,"stem":434,"tags":435,"todo":428,"unpublished":431,"updatedAt":428,"__hash__":442},"pages/2026-05/2026-05-26/diary-2026-05-26.md","2026年5月26日の開発日記 - 非表示スクローラーのバグ退治とAmazon画像のかき集め",{"type":7,"value":8,"toc":409},"minimark",[9,14,18,22,29,32,37,40,52,58,78,89,92,96,103,110,114,128,136,145,147,151,154,156,159,333,335,338,364,366,370,390,392,395],[10,11,13],"h1",{"id":12},"_2026年5月26日の開発日記","2026年5月26日の開発日記",[15,16,17],"p",{},"画面の数字が前の章を引きずったまま動かない。Amazonの画像取得は広告通信に足を取られて固まる。今日は「見えているものと、コードが掴んでいるものがズレている」たぐいのバグを2件、別々のプロジェクトで踏み抜いた。どちらも真因は素直なところになく、思い込みを1枚ずつ剥がして奥にたどり着いた。",[19,20,21],"h2",{"id":21},"今日のタイムライン",[15,23,24],{},[25,26],"img",{"alt":27,"src":28},"タイムライン","/2026-05/2026-05-26/timeline-2026-05-26.png",[19,30,31],{"id":31},"今日やったこと",[33,34,36],"h3",{"id":35},"_1-キャッシュフロー教材のスクロールリセットバグ修正eurekapu-nuxt4","1. キャッシュフロー教材のスクロールリセットバグ修正（eurekapu-nuxt4）",[15,38,39],{},"会計学習サイトのキャッシュフロー教材で、ページ最下部までスクロールしてから次の章に切り替えると、本文が前章の位置（scrollTop=5440）を引きずったまま先頭に戻らない。画面を見ていて数字が動かないのに気づいた。",[15,41,42,43,47,48,51],{},"watchの発火方法を疑い、HMRを疑い、配信ソースまで確認したが、どれも外れ。ログを仕込んで「watchは発火しているのにリセットが効いていない」と分かった瞬間に、真因が見えた。MillerViewerがデスクトップ版とモバイル版の両方でスロットをレンダリングしていて、",[44,45,46],"code",{},"ref=\"contentRef\""," が2つの ",[44,49,50],{},".scroll-content"," に重なり、非表示のモバイル側だけをリセットしていた。",[15,53,54],{},[55,56,57],"strong",{},"主な成果:",[59,60,61,72,75],"ul",{},[62,63,64,65,67,68,71],"li",{},"「表示中の ",[44,66,50],{}," を掴む」",[44,69,70],{},"getScrollEl"," ヘルパー方式に置き換え",[62,73,74],{},"右TOCクリックも非表示側を操作していた副次バグが同時に消えた",[62,76,77],{},"同一構造の ch0〜ch5 全6ファイルに一括適用、Codexでレビュー（致命的指摘なし）してmainにコミット",[15,79,80,83,84],{},[55,81,82],{},"詳細:"," ",[85,86,88],"a",{"href":87},"/cashflow-lesson-scroll-reset-fix","章を切り替えてもスクロールが先頭に戻らないバグの真因を突き止めるまで",[90,91],"hr",{},[33,93,95],{"id":94},"_2-家電記事用amazonカードと商品画像のかき集めmdx-playground","2. 家電記事用Amazonカードと商品画像のかき集め（mdx-playground）",[15,97,98,99,102],{},"家電まとめ記事に商品画像＋Amazonボタンを並べたくて、カードコンポーネントを作った。リンク生成は純粋関数 ",[44,100,101],{},"amazonLink.ts","（ASIN→tag付きリンク）に閉じ込め、ユニットテスト17件でカバレッジ100%。アフィリエイトの「リンク」は売上ゼロでも作れて、売上実績が要るのはPA-API（商品情報の自動取得）側だけ、という切り分けが効いた。",[15,104,105,106,109],{},"画像は泥仕事だった。",[44,107,108],{},"networkidle"," 待ちがAmazonの広告通信で固まり、bot検出のインタースティシャルに阻まれ、三菱の白物家電だけ取得できずに悩んだ末、原因は検索ヘッダーの「結果」を拾う抽出ロジックのタイミングバグだった。最終的に18カード中15枚に正しい画像が入った。",[15,111,112],{},[55,113,57],{},[59,115,116,122,125],{},[62,117,118,121],{},[44,119,120],{},"::appliance-card"," で呼べるMDCコンポーネントを作成",[62,123,124],{},"カードに混入した行番号と「####」を、要素のdiv化でグローバルカウンターの対象外にして解消",[62,126,127],{},"Chrome DevTools MCPのバージョン別仕様をCLAUDE.md 3箇所に正確に書き残した",[15,129,130,83,132],{},[55,131,82],{},[85,133,135],{"href":134},"/amazon-card-and-image-scraping","AmazonアフィリエイトカードをMDCで作り、商品画像をブラウザ自動操作でかき集めた話",[15,137,138,83,141],{},[55,139,140],{},"成果物:",[85,142,144],{"href":143},"/home-appliance-picks","家電と調理器具、これを選べば外さない（2026年版）",[90,146],{},[33,148,150],{"id":149},"_3-ai時代にアツいビジネス領域の壁打ち思考メモ","3. AI時代にアツいビジネス領域の壁打ち（思考メモ）",[15,152,153],{},"朝、AIが限界費用ゼロでコモディティ化できない領域はどこか、を壁打ちした。残るのはアトム・資本・現場・横断責任・未観測データ側で、オルタナデータで上場企業のKPIに賭ける、といった切り口を並べた。ただ、どれもピンとこなかった。問いが「自分の外」を向いている限り手触りが出ない、というところで一旦止めた。考えを外に置いて眺めるだけでも、なぜ刺さらないかは見えた。",[90,155],{},[19,157,158],{"id":158},"今日の試行錯誤",[160,161,162,184],"table",{},[163,164,165],"thead",{},[166,167,168,172,175,178,181],"tr",{},[169,170,171],"th",{},"#",[169,173,174],{},"テーマ",[169,176,177],{},"試したこと",[169,179,180],{},"結果",[169,182,183],{},"気づき",[185,186,187,205,220,236,252,268,284,300,316],"tbody",{},[166,188,189,193,196,199,202],{},[190,191,192],"td",{},"1",[190,194,195],{},"スクロールリセット",[190,197,198],{},"watchの発火方法を route クエリ監視に置換",[190,200,201],{},"失敗",[190,203,204],{},"scrollTopは5440のまま。発火方法は原因ではなかった",[166,206,207,210,212,215,217],{},[190,208,209],{},"2",[190,211,195],{},[190,213,214],{},"HMR未反映を疑い完全リロード／配信ソース確認",[190,216,201],{},[190,218,219],{},"新コードはロード済み。HMRも無罪",[166,221,222,225,227,230,233],{},[190,223,224],{},"3",[190,226,195],{},[190,228,229],{},"ログを仕込んでwatch発火を確認",[190,231,232],{},"切り分け成功",[190,234,235],{},"resetCount=1。「走るが効かない」と判明し真因へ",[166,237,238,241,243,246,249],{},[190,239,240],{},"4",[190,242,195],{},[190,244,245],{},"表示中要素を掴む getScrollEl 方式に変更",[190,247,248],{},"成功",[190,250,251],{},"refが非表示のモバイル側に重複バインドされていた",[166,253,254,257,260,263,265],{},[190,255,256],{},"5",[190,258,259],{},"Amazon画像",[190,261,262],{},"agent-browser で networkidle 待ち取得",[190,264,201],{},[190,266,267],{},"広告通信が止まらず永久ハング。待ち方を変更",[166,269,270,273,275,278,281],{},[190,271,272],{},"6",[190,274,259],{},[190,276,277],{},"連続アクセスでbot検出",[190,279,280],{},"突破",[190,282,283],{},"「ショッピングを続ける」クリックで回避",[166,285,286,289,291,294,297],{},[190,287,288],{},"7",[190,290,259],{},[190,292,293],{},"三菱白物家電がNONE続き",[190,295,296],{},"原因特定",[190,298,299],{},"bot検出でなく、抽出が検索ヘッダーを拾うタイミングバグ",[166,301,302,305,308,311,313],{},[190,303,304],{},"8",[190,306,307],{},"画像取得手段",[190,309,310],{},"Chrome DevTools MCPで接続を試行",[190,312,201],{},[190,314,315],{},"Chrome 136+ のデフォルトプロファイル制約。agent-browserで続行",[166,317,318,321,324,327,330],{},[190,319,320],{},"9",[190,322,323],{},"三菱上位機種",[190,325,326],{},"Amazon検索トップを採用",[190,328,329],{},"見送り",[190,331,332],{},"トップが互換フィルター・廉価機。誤画像を避けプレースホルダー",[90,334],{},[19,336,337],{"id":337},"今日の学び",[59,339,340,346,352,358],{},[62,341,342,345],{},[55,343,344],{},"「見えているもの」と「コードが掴んでいるもの」を疑う","。スクロールバグは、watchもHMRも無罪で、refが2つの要素に重複バインドして非表示側を掴んでいたのが真因だった。レスポンシブで両方レンダリングするコンポーネントは、ref参照が二重化する罠がある",[62,347,348,351],{},[55,349,350],{},"切り分けのログ一発で景色が変わる","。「resetCountが1」と分かった瞬間、原因の探索範囲が「発火するか」から「どの要素に効くか」に切り替わった",[62,353,354,357],{},[55,355,356],{},"失敗の見た目に騙されない","。三菱家電のNONE続きをbot検出と決めつけかけたが、検索結果は51件あった。真因は自分の抽出ロジックのタイミングバグだった",[62,359,360,363],{},[55,361,362],{},"バージョンを確認せず言い切らない","。「ログイン済みChromeにDevToolsは繋げない」は誤りで、Chrome 144+なら chrome://inspect 経由で可能。古い思い込みを正しくCLAUDE.mdに書き直した",[90,365],{},[19,367,369],{"id":368},"明日やること任意","明日やること（任意）",[59,371,374,384],{"className":372},[373],"contains-task-list",[62,375,378,383],{"className":376},[377],"task-list-item",[379,380],"input",{"disabled":381,"type":382},true,"checkbox"," 三菱の上位白物家電の正しい商品画像をどう揃えるか（型番直リンクをユーザーから受け取る運用を検討）",[62,385,387,389],{"className":386},[377],[379,388],{"disabled":381,"type":382}," Amazonカードを他の買い物メモ記事にも横展開できるよう汎用化を検討",[90,391],{},[19,393,394],{"id":394},"関連記事",[59,396,397,401,405],{},[62,398,399],{},[85,400,88],{"href":87},[62,402,403],{},[85,404,135],{"href":134},[62,406,407],{},[85,408,144],{"href":143},{"title":410,"searchDepth":411,"depth":411,"links":412},"",2,[413,414,420,421,422,423],{"id":21,"depth":411,"text":21},{"id":31,"depth":411,"text":31,"children":415},[416,418,419],{"id":35,"depth":417,"text":36},3,{"id":94,"depth":417,"text":95},{"id":149,"depth":417,"text":150},{"id":158,"depth":411,"text":158},{"id":337,"depth":411,"text":337},{"id":368,"depth":411,"text":369},{"id":394,"depth":411,"text":394},"diary","章を切り替えても先頭に戻らないスクロールバグの真因を掘り当て、家電記事用のAmazonカードを作って商品画像をブラウザ自動操作でかき集めた一日。","md",{},null,"/2026-05-26-diary","daily-log",false,"2026-05-26T00:00:00.000Z",{"title":5,"description":425},"2026-05/2026-05-26/diary-2026-05-26",[436,437,438,439,440,441],"日記","Vue","Nuxt","デバッグ","Amazonアフィリエイト","ブラウザ自動操作","IlpKOl4YQSF2S0kE_CcwxyDYbiD-I4dQAciI8xhz8fM",[],"https://log.eurekapu.com/og/blog/2026-05-26-diary.png?v=2026-05-26T00%3A00%3A00.000Z&title=2026%E5%B9%B45%E6%9C%8826%E6%97%A5%E3%81%AE%E9%96%8B%E7%99%BA%E6%97%A5%E8%A8%98%20-%20%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC%E3%81%AE%E3%83%90%E3%82%B0%E9%80%80%E6%B2%BB%E3%81%A8Amazon%E7%94%BB%E5%83%8F%E3%81%AE%E3%81%8B%E3%81%8D%E9%9B%86%E3%82%81&author=Kei%20Komatsu&sig=13ec055112943492",1782528842440]