K2さんの雑記
2018-05-02(Wed) [長年日記]■ 日本一マクドナルドから遠い場所の記事が面白そうだったので、やってみたGoogle Mapに、自分の好きなマーキングができそうな記事を、はてなブックマーク経由で見つけていて、面白そうだったのでやってみた。 シナリオは、マクドナルドのページから、店舗情報を取得してローカルに保存、Google Map上に表示するものを作成するというもの。タイトルのページでは、日本で一番マクドナルドから遠い場所はどこかを調べたり非常におもしろい考察をしているので、見てください。私は、とりあえず表示するところまでがんばってやってみようと思った。 まずマクドナルドから店舗情報をjson形式のファイルでローカルにダウンロードする方法を探す。詳細はタイトルページには載っていないので、自分でChromeのデベロッパーツールで調べた。今回デベロッパーツールもはじめて本格的に見たので、店舗情報を探し出すまではかなり手間取った。 Networkのタブで表示されるオブジェクトを一つ一つ見ていくと、地図の表示領域の範囲にある店舗情報が入っているオブジェクトを見つけた。全2887店舗分は入っていない。タイトルページでは、全店舗のjsonがデベロッパーツールで見れるとあったが、結局それは探し出せず。で、表示領域の範囲の店舗情報は、マクドナルドのホストにクエリを出せばもらえているので、ノーオプションで試して見ると、無事全店舗情報が取得できた。 さて、次はFusionTableが紹介されているので、使ってみた。Googleドライブで、まずFusionTableサービスを追加して、新規作成、ファイルをインポートするのだが、ここではcsvファイルを要求される。上記のjsonファイルをK2Editorに読み込んで、キーマクロでcsvファイルに変更。2900店舗分ほどのファイルで、変更に30分くらいかかった。本当はスクリプト言語で変換すれば簡単だと思うのだが、直感的なキーマクロでやってしまった。 で、Fusion Tableにインポートすると、元のファイルに含まれている緯度と経度は自動的に緯度と経度として認識されていて、そのままMap表示をすると全店舗が表示された。 ここでタイトルページは、方針変更、Google Maps JavaScript APIを使用するシナリオに進むので、私もそちらへ。Google APIを使用するのも始めてだったので、全部一から調べたが、Google Developers Consoleに行き、そのまま新規プロジェクトを作成、Google Maps Javascript APIを有効化して、APIキーを取得できた。 で、タイトルページに掲載されているhtmlファイルとjsファイルを使用して、ローカルのChromeで全マクドナルド店舗を地図上に表示することに成功した。下記の図は、1kmの円で描画したマクドナルド店舗マップ。 結構簡単にGoogle Mapが使えることがわかったので、これは仕事で使えそう。個人情報保護の観点であまり公開できるものにはならないが、身内で使うツールとかが作れそうなので、GW明けからがんばってみたい。 1965|09|
|
//
自己紹介
自己紹介
広告
計るだけダイエット
つっこみリスト
TrackBacks
日記仲間
な/
す/
ひ/
最近の日記
|
いいですね。やってみようと思って頂けて手順までなぞってもらえて、あの記事を書いた甲斐がありました。 <br>自分でも出来そうと思って頂けるように、まさにこんなリアクションを期待して面白げに書いたものですから嬉しいです。 <br>ていうか、自分でやってみると面白かったでしょう?私もそうでしたw
記事作者様からコメントをいただけて恐縮です。以前から地図を使っていろいろやりたいと思っていたのですが、忙しさにかまけてほったらかしになっていました。あの記事がきっかけでいろいろやってみようとモチベーションが高まりましたので、感謝です。 <br>記事を書いていただいて、ありがとうございました。 <br>楽しかったですよ!