Geolocation APIとぐるなびAPIを使って近くの飯屋を探すWebアプリの実装例

携帯やスマートフォンでは標準搭載と言ってもいいGPS機能ですが、最近はブラウザからJavascript位置情報を取得することができるGeolocation APIというものがあるようなので試してみました。
最近の悩みである昼食問題解決への挑戦でもあります。

AD

Geolocation APIとは

簡単に言うとJavascriptから位置情報(経度・緯度)を取得することができる仕組みです。W3Cが仕様策定を進めている規格ですので、将来多くのブラウザやデバイスで利用できるようになることが予想されます。

詳しくはHTMLクイックリファレンスのGeolocation APIのページなどが詳しいです。

現時点では、光ファイバーやADSLなどの固定回線で位置情報を取得しようとしても市・区レベルまでしか取得できないケースがほとんどのようです(技術的な問題よりセキュリティ上の仕様かもしれません)。ですので現実問題としてスマートフォン・タブレット専用の技術ということになるでしょう。

現在地を取得して近所の飯屋を探す処理

ここからが本題ですが、会社員にとって昼食というのはとても大切なイベントです。どこで食べるか、何を食べるかによってその1日の命運が左右されると言っても過言ではありません。
しかし何年も同じ会社に勤めている会社員の昼食は得てしてマンネリ化しがちです。きっともっといい店が近くにあるはずなのにいつも同じ店に行ってしまう・・・そんな悩みをお持ちの方も多いでしょう。

そこでGeolocation APIで現在地を取得し、ぐるなびAPIに投げて近所の食事処を表示させるというスクリプトを考えました。

DEMO:500m以内の飯屋探し
※あくまでGeolocation API解説用なのでエラー処理とかは全然入ってません。

Javascriptで行うのは

 1.Geolocation APIによる現在地の経度・緯度の取得
 2.上記で得られた値+αにより、APIリクエスト用の値の生成
 3.上記の値をPOST/GETする
 4.その結果得られたXML/JSONを適宜整形して表示する

という処理になります。

以下の例ではXMLの整形はPHPで行い、Javascriptでは取得のみを行なっています。

HTMLは非常に簡単です。
リンクをクリックした時にinnerHTMLを検索キーワードとして取得する手抜き仕様なので、自分がよく食べるジャンルをボタンとして用意すれば1クリックで店を探すことができます。

今回用意した見本は僕がよく食べるものです。

ちなみに上記で取得しているimport.phpは以下の様な処理です。単にXMLを取得して整形して表示させるだけのもので、もし使用するAPIがJSONPで取得できるのであれば不要なものです(ぐるなびさんご検討をお願いします・・・)。

エラー処理のほか、近い順にソートとか営業時間を取得するとかをやっていけばもっと実用的なものになるかもしれません。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。