これは何？
今話題のGo To Eatですが、その利用可能店舗を知るためには、利用可能店舗一覧ページを見るしかなく、それぞれに住所は書いてあるものの、地図上で確認することが出来ませんでした。
そこで、上記の情報を基に埼玉県のGo To Eat対象店舗を地図上で見ることが出来るWebサービス 「Go To Eat 埼玉マップ！」を作りました。
※ここで扱うのは埼玉県のGo To Eatの食事券が使える店舗です。これ以外に予約サイトのポイントがたまるというのもGo To Eatの施策がありますが、そちらに対応している店舗はもっとあるはずです。
類似サービス
同じような課題を感じている方は他にもいて、下記のような類似サービスが開発されているようです。
正直なところ、私が作ったものより、これらのサービスのほうが使い勝手が良いと感じます。また埼玉県以外もサポートしているようです。
まぁすでに自分も作ってしまったし、同じようなサービスが切磋琢磨したほうが良いものができると思うので、皆さんそれぞれのサイトを使ってみてください。
自由な地図API
地図系のサービスを作るということであれば Google MapsやYahoo! 地図が真っ先に思い浮かぶのですが、Google Mapsは有料化され、Yahoo! 地図のAPIは廃止されています。
（後で良く良く調べると、Google Mapsは条件によっては無料で使えるらしく、今回の用途であればマイマップを使うのが良かったかもしれません。類似サービスの中には枚マップを使ったものもありました。）
まぁ、ともあれ、地図系のWebサービスを作るときに他社のご機嫌をうかがいながら開発するのも気持ちの良いものではありません。
ということで、今回はLeafletと国土地理院の地図を使ってみることにしました。
Leafletというのは ブラウザ上で地図を表示するためのオープンソースのJavaScriptライブラリです。OpenStreetMapのタイルサーバを参照することで、世界中の地図を表示することが出来ます。
また地図のドラッグアンドドロップや、地図上にマーカーを描画するなど、いわゆるYahoo! 地図やGoogle Mapsのような使い勝手を、非常に少ないコーディングで実現することが出来ます。
Leafletについては下記サイトが非常に参考になりました。
日本の政府機関である国土地理院は、OpenStreetMap互換のタイルサーバを提供しています。
利用のガイドラインも非常に緩く、今回の用途でも問題なく利用できそうでした。
地理院タイルをウェブサイトやソフトウェア、アプリケーション上でリアルタイムに読み込んで利用する場合、地理院タイルは出典の明示のみで申請不要でご利用いただけます。
本当はOpenStreetMapの本家のタイルサーバを利用したかったのですが、これは不特定多数が利用するWebサービスから参照することは、規約上NGのようだったので、使用を見送りました。
- Heavy use (e.g. distributing an app that uses tiles from openstreetmap.org) is forbidden without prior permission from the Operations Working Group. See below for alternatives.
住所文字列から緯度経度への変換
Go To Eatの対象店舗情報は、各自治体ごとに公表されています。
埼玉県の場合は下記サイトにHTMLで一覧が記載されています。
ここには店の名前、電話番号、住所などが記載されていますが、地図上に表示する際に必要な「緯度・経度」が記載されていません。
ということで「住所文字列から緯度・経度を求める」必要があります。
幸いなことにYahoo! JAPANが提供しているAPIに良いものがありました。
ということで材料はそろいました。
埼玉県のGo To Eat対象店舗一覧のHTMLをスクレイピングして、店舗の情報を取得し、YOLPのジオコーダAPIをつかい、それらの緯度・経度を求めます。
最後にこれらの情報をLeafletを使って国土地理院のタイルの上に描画すれば完成です。
マーカーが多すぎる問題の回避
Leafletを使って、マーカーを大量に配置すると、ブラウザが固まってしまうほど動作が遅くなってしまいました。
これはLeafletあるある、な問題のようで、今回はMarkerではなくCircleMarkerという別の仕組みを使って地点を描画することで、この問題を回避しました。
MakerはDOMを生成するため大量に登録するとブラウザが重くなるようです、しかしCircleMarkerの場合はCanvasに図形を描画するため、ブラウザはそこまで重くならないようです。
下記のStackoverflowが参考になりました。
埼玉県への要望
できれば、Go To Eat対象店舗の情報をCSVのようなコンピュータで扱いやすい形式で公開してほしいです。
ちょうど埼玉県のオープンデータのポータルがあるようなので、ここで公開するのが良いのでは？と考えています。
https://opendata.pref.saitama.lg.jp/
（すでに上記サイトから要望は送ってみました）
最後に
まぁこんな感じで無事「Go To Eat 埼玉マップ！」が完成しました。
MITライセンスでソースコードもオープンにしているので、似たようなものを作りたい人は参考にしてみてください。
また、修正点・改善点のPullRequestもお待ちしています。
