【仕様変更に負けない】スクレイピング価格結合バグの全データ一括修復と、Next.jsでGA4アクセスデータから人気ランキングを動的ビルドする泥臭い自動化の裏側
・ランキング記事の手動更新が面倒で放置してしまっている ・放置した記事のアクセス数が落ちて悩んでいる ・静的サイト（Next.js/SSG）でデータベースを使わずに自動更新ランキングを作りたい 読者の疑問・悩み： 「せっかく作ったランキング記事だけど、更新するのが面倒で放置してし...
・ランキング記事の手動更新が面倒で放置してしまっている ・放置した記事のアクセス数が落ちて悩んでいる ・静的サイト（Next.js/SSG）でデータベースを使わずに自動更新ランキングを作りたい
読者の疑問・悩み：
「せっかく作ったランキング記事だけど、更新するのが面倒で放置してしまい、情報が古くなってアクセスも激減してしまった……。」
この記事での結論・約束：
「ランキング記事は鮮度が命です。今回は、GA4のアクセスデータを使ってランキングを完全に自動更新する仕組みを構築しました。その具体的な導入効果と、開発中の失敗談を包み隠さず紹介します！」
この記事では「GA4連携によるランキング自動更新の仕組みとメリット」について、実際の体験とデータを交えて詳しく解説します。
🕸️ ランキング記事は更新が止まった瞬間に死ぬ
ブログの収益やアクセスに大きく貢献してくれるのが「ランキング記事」です。しかし、ランキング記事には致命的な弱点があります。それは「更新が止まった瞬間に価値が落ちる」ということです。
紹介している商品の価格が変わったり、新製品が出たり、世の中のトレンドが移り変わったりする中で、数ヶ月前のランキングをそのまま放置しておくと、読者は「情報が古いな」と一瞬で見抜いて離脱してしまいます。結果として検索順位もアクセス数も急降下していくことになります。
【悲報】手動でのランキング更新作業は、個人開発者・ブロガーの心を最も早く折る重労働である。
💡 手動更新に疲れてGA4自動化を思いついた
ぼく自身、ブログの人気商品をまとめたランキング記事を運用していました。最初は「毎週チェックして更新しよう！」と張り切っていたのですが、作業が本当に面倒でした。
各サイトの価格やアクセス傾向を調べて、HTMLを書き換えて、再ビルドして…というルーティンが重荷になり、気づけば記事は放置状態に。案の定、アクセス数も右肩下がりに落ちていきました。
そこで思いついたのが、「Google Analytics 4（GA4）のアクセスデータを使って、ランキングを完全自動更新する仕組み」です。
読者が実際にアクセスした生データ（PV数）をもとに自動でソートをかけ、静的サイトビルド時にねじ込む。これなら、一度仕組みを作れば、あとは完全に放置していても常にリアルタイムの「読者のリアルな人気順」が保たれるはずだと考えました。
💥 認証エラーと価格バグで地獄を見る
「よし、自動化だ！」と意気込んで開発を始めたものの、世の中そんなに甘くありません。さっそく2つの大きな壁にぶつかりました。
1. GA4 API連携の認証切れエラー
まず、GA4からアクセスデータを取得するスクリプトを走らせたところ、認証エラーが発生。「おいおい嘘だろ…」と頭を抱えました。APIのアクセストークン取得と認証認可まわりで設定が噛み合わず、解決までに3時間以上が溶けていきました。
2. スクレイピングの「価格結合バグ」
さらに、ECサイトから最新価格を自動収集する処理で、通常価格と割引セール価格が同じタグ内にあったため、それらが合体して「792990円」のような超高額なバグデータになってしまう問題が発生。すでに生成されていた過去のデータ（約190件）すべてがこのバグに汚染されており、絶望しました。
・原因：親要素のテキストをそのまま取得していたため、割引前後の数値が結合してしまった。
・対策：Cheerioの抽出処理に .first() を追加し、アクティブな価格のみを取得するように修正。
・復旧：過去の約190件のデータは、割引率（10%〜95%）の傾向から元の価格を逆算するクレンジングスクリプトを作成し、一瞬で一括修復しました。
🎉 アクセスデータでランキングが動いた瞬間
数々のエラーと戦いながら、ようやく自動ソートロジックが完成しました。GA4から取得したPV数データをビルドプロセスに結合し、静的ファイルとして書き出します。
実際にビルドコマンドを実行した瞬間、画面上のランキングが自動的に最新のアクセス数順にカチッと並び変わりました。手動でのHTML変更は一切していません。客観的なユーザーデータに基づいて、ブログが自律的に動き出したのを感じた瞬間でした。
もしGA4のデータが取得できないなどのエラーが起きても、自動的に「レビューの評価が高い順 ➡ 新着順」へ切り替えるフォールバックも仕込み、ビルドが途中で止まらない堅牢な設計に仕上げました。
📊 なぜ自動化はブログ継続に効くのか
この自動更新システムを導入した結果、得られた成果は想像以上に大きいものでした。
| 比較項目 | 手動での運用（以前） | GA4自動連携（導入後） |
|---|---|---|
| 毎月の更新作業時間 | 約180分（データ確認と手動修正） | 0分（完全自動ビルド） |
| ランキングの鮮度 | 数ヶ月前のまま放置されがち | ビルドのたびに最新状態を維持 |
| 読者のサイト内滞在時間 | 古い情報による即離脱が多い | 関連コラム等の回遊強化で向上 |
| 管理にかかる精神的負担 | 「更新しなきゃ…」というプレッシャー | 完全に忘れていてOKな解放感 |
ブログ運営で一番エネルギーを使うのは、「記事を書くこと以外のメンテナンス作業」です。ここを徹底的に自動化したことで、「更新作業の重荷」が一切消え去り、新しいコンテンツの執筆だけに集中できるようになりました。ブログの継続において、自動化は最大の特効薬です。
🚀 次はSNSデータも取り込んでみる
今回はGA4のPVデータに基づいた「ブログ内アクセスランキング」の実装でした。これだけでも十分に価値がありますが、今後はさらに進化させたいと考えています。
具体的には、X（旧Twitter）などのSNS上の言及数やいいね数などの外部トレンドデータもスクレイピングしてランキングに加重ブレンドする仕組みに挑戦する予定です。ブログの外側で起きている熱量も自動で取り込むことで、さらに読者にとって価値の高いランキングが構築できるはずです。
まとめと次回予告
・ランキング記事は鮮度が命。更新放置はアクセスの死を招く。 ・GA4のデータを使うことで、DB不要・表示速度も犠牲にしない静的な自動更新ランキングが実現可能。 ・データ収集バグや認証切れの失敗を乗り越え、更新作業時間を「毎月180分 ➡ 0分」へ削減！
今回はGA4連携まで実装できました。次回は、実際にランキングを生成しているコード構成や、失敗したポイントを詳しく共有します。こうした「放置型サイト運営の裏側」を発信しています。興味があれば登録しておいてください。