表示速度が劇的改善！人口マップをGASからCloudflareに引っ越した理由と全手順
こんにちは、本間 充 (Mike Homma) です。
全国の市区町村の人口と世帯数を、地図とグラフで視覚的に見ることができるWebページを公開しています。これまではGoogle Apps Script（GAS）を使ってシステムを動かしていましたが、データ量が増えるにつれて表示が遅くなるという悩みを抱えていました。
そこで今回、思い切ってシステム全体を「Cloudflare に引っ越し」しました。
この記事では、なぜ今までの仕組みでは遅かったのか、そしてどのようにしてCloudflareへ移行したのかを解説します。
プログラミング初心者や、Webサイトの表示速度に悩む社会人の方にも分かりやすく説明していきますので、ぜひ最後までお付き合いください。
運営している2つの人口マップサービス
私が公開しているサイトでは、総務省のオープンデータを利用して2つの画面を提供しています。どちらも同じデータをベースにしていますが、見せ方や目的に違いがあります。
1つ目は「人口マップ」です。
最新の年における地図を表示し、前年からの増減率、総人口、世帯数、1世帯あたりの人数などを色分けして分かりやすくしています。各市区町村のランキングなども一目で確認できるのが特徴です。
2つ目は「人口推移マップ」です。
こちらは2000年からの長期的な移り変わりを見ることができる画面です。直近1年、5年、10年といった期間ごとの増減率で色分けし、グラフを使って人口の推移を詳細に表示します。
地図上の市区町村をクリックすると、その町のさらに詳しい数字やグラフがポップアップで現れます。データは総務省が公開している「住民基本台帳に基づく人口、人口動態及び世帯数」を使用しています。
引っ越し前のGAS版が抱えていた「遅さ」の原因
毎回データを読み込む仕組みの限界
GAS（Google Apps Script）は、Googleのスプレッドシートなどを手軽にプログラムで操作できる大変便利なツールです。Webページとして簡単に公開できるため、初期の構築にはこれを使っていました。
引っ越し前の仕組みでは、まず総務省のExcelデータをGoogleドライブに保存します。それをGASで集計し、スプレッドシートに約6.8万行もの膨大なデータを作成していました。
しかし、ここに大きな問題がありました。ユーザーがページを開くたびに、GASがこの約6.8万行のデータと、地図の形を表すデータ（GeoJSON）を毎回読み込んで画面に送っていたのです。
例えるなら「毎回一から作る料理」
毎回大量のデータを読み直すため、どうしても表示までに時間がかかってしまいます。これは例えるなら、レストランでお客さんが来るたびに、倉庫の奥から材料を出してきて、一から料理を作っているような状態です。
少人数のアクセスなら問題ありませんが、見る人が増えたりデータが大きくなったりすると、待ち時間が長くなります。この「表示の遅さ」を根本的に解決する必要がありました。
Cloudflare に引っ越し！発想を転換した新しい仕組み
「毎回計算する」から「作り置き」へのシフト
そこで、システムの考え方を根本から見直すことにしました。よく考えてみれば、人口のデータは1年に1回しか更新されません。
それならば、ユーザーがアクセスするたびに毎回計算を行う必要は全くありません。あらかじめそのままブラウザで使える形式のファイルを作っておき、それを渡すだけにすれば良いと考えました。
料理の例えで言えば、「事前に作り置きをしておき、お客さんが来たらすぐにお出しする方式」への転換です。
Cloudflare Workersによる高速な配信
新しい仕組みでは、総務省のExcelデータと国の境界データを、事前の変換プログラムによってデータファイルに変換しておきます。そして、ユーザーがアクセスした際は、Cloudflareがこれらのファイルをただ渡すだけで済みます。
ここで活躍するのが「Cloudflare Workers」です。Cloudflareは世界中にサーバーを持っているため、ユーザーに一番近い場所から瞬時にWebページやファイルを届けてくれます。
今回は複雑なプログラムを動かすのではなく、事前に作っておいた軽量なファイルを配るだけの役割を持たせました。さらに、データはユーザーのブラウザやCloudflare上に一時保存（キャッシュ）されるため、2回目以降のアクセスはさらに高速になります。
地図データも劇的に軽量化
ファイルの軽量化にもこだわりました。
地図の形を表すデータには、GeoJSONではなく「TopoJSON」という非常に軽い形式を採用しています。
TopoJSONは、隣り合う町同士が共有している境界線を1回だけ記録する仕組みになっています。これにより、地図のデータサイズを大幅に小さくすることができました。
GASからCloudflareに引っ越すための4つの手順
実際の引っ越し作業は、大きく分けて4つのステップで進めました。
1. データの変換プログラムを作る
まずは、総務省のExcelデータ（2000年から最新まで）を読み込むプログラムを作成しました。これを処理して、Webブラウザですぐに使える1つのJSONファイルにまとめる仕組みです。
2. 地図データを軽くする
次に、国土交通省が提供している約800MBもある「国土数値情報 行政区域データ」の軽量化です。地図の形を少しシンプルにしたうえでTopoJSON形式に変換し、最終的に約1.5MBまで軽くすることに成功しました。
3. 画面を作り直す
画面の表示には、地図用に「Leaflet」、グラフ用に「Chart.js」というライブラリを引き続き使用しています。ただし、データの受け取り方をGAS専用の複雑な書き方から、普通のファイルを読み込むだけのシンプルな方法に書き換えました。
4. Cloudflareに公開する
最後に、「wrangler」という専用ツールを使ってCloudflareにアップロードしました。
独自ドメインを割り当て、現在は私のブログ（Wix）にこのページを埋め込んで表示しています。
引っ越しのついでに実施したデータと機能の改善
システムを作り直す過程で、旧バージョンに潜んでいた不具合や、ユーザーにとって分かりにくかった点も見つかりました。この機会に、それらもしっかりと修正しています。
例えば、2005年のデータだけExcelの列が1つ多く、世帯数が「0」として読み込まれる不具合がありました。新版では、見出しの文字を自動で判別して正しい列を読み込むように改善しました。
また、データの基準日に関する注意書きも追加しました。2013年までは「3月31日時点」、2014年からは「1月1日時点」の数字となっているため、この期間は9ヶ月分の変化しかないことを明記しています。
さらに、2013年からは外国人住民も数に含まれるようになったため、前年からの数字が急増して見える点についても解説を加えました。加えて、純粋な市区町村ではない「郡」などの小計行は集計から除外するようにしました。
手作業から解放！毎年の更新を完全自動化へ
総務省の新しい人口データは、毎年夏ごろに公開されます。これまでは新しいデータが出るたびに手作業で更新していましたが、今回は「GitHub Actions」を使って自動化を実現しました。
GitHub Actionsは、決められた時間や特定のきっかけでプログラムを自動的に動かしてくれる便利な機能です。この仕組みを使って、毎月1日に総務省のページを自動でチェックするようにしました。
新しい年のExcelデータが見つかれば、自動でダウンロードして人口データを再構築します。
その際、市区町村の数や全国の人口推移に異常がないかの自動チェックも行います。
問題がなければ、「この内容でサイトを更新していいですか？」という確認依頼（プルリクエスト）が私に届きます。最後に人間が内容を確認してOKを出せば自動で公開されるため、おかしなデータが勝手に公開される心配もありません。
まとめ：引っ越しで得られた圧倒的な快適さ
今回、システムの遅さの原因であった「毎回大量のデータを読み直す処理」を根本から見直しました。めったに変わらないデータは、あらかじめ作っておいて配るだけにする。この発想の転換が、劇的な表示速度の改善に繋がりました。
GASは手軽に始められる素晴らしいツールです。しかし、アクセスが増えたりデータが肥大化したりした際には、今回のようにCloudflare に引っ越しすることも非常に有効な選択肢となります。
また、システム移行を機に、古い不具合を修正し、毎年の更新作業まで自動化することができました。皆様の業務改善やWebサイト運営のヒントになれば幸いです。
用語メモ
GAS（Google Apps Script）
Googleのサービスを操作できるプログラム。Webページとしても公開可能。
Cloudflare Workers
世界中のサーバーからWebページやプログラムを高速に届けるサービス。
JSON
プログラムで扱いやすいデータ記述形式。
GeoJSON / TopoJSON
地図の形を書く形式。TopoJSONの方がデータサイズが小さい。
キャッシュ
一度受け取ったデータを一時保存し、次回から高速表示する仕組み。
GitHub Actions
決まったタイミングでプログラムを自動実行する機能。
プルリクエスト
変更を取り込んでよいかの確認依頼。
出典
- 人口・世帯数：総務省「住民基本台帳に基づく人口、人口動態及び世帯数」
- 市区町村の境界：国土交通省「国土数値情報 行政区域データ」
- 背景地図：国土地理院「地理院タイル」
コメント