【Javascript】【API/マッシュアップ】Geolocation APIとぐるなびAPIを使って近くの飯屋を探すWebアプリの実装例 | Wood-Roots:blog

2013
01/09

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

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

ADs

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では取得のみを行なっています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
(function($){
$(function(){
$('#btn a').click(function(){
$('#result').empty().append('検索しています。しばらくお待ちください。');
var menu = $(this).text(); //検索ワード
navigator.geolocation.getCurrentPosition(
function(position){
var api = 'http://api.gnavi.co.jp/ver1/RestSearchAPI/?';
var key = 'API KEY';
var ran = 2;
var lat = position.coords.latitude; //経度
var lon = position.coords.longitude; //緯度
var request = api + 'keyid=' + key + '&latitude=' + lat + '&longitude=' + lon + '&range=' + ran + '&freeword=' + menu; //リクエスト用のURLを作成
//ここからは普通にAjax
$.ajax({
url: 'import.php',
type: 'post',
cache : false,
data: {
'req': request
},
success: function(xml,status){
$('#map').empty().append('<img src="https://maps.google.com/maps/api/staticmap?center='+lat+','+lon+'&markers='+lat+','+lon+'&zoom=13&size=300x300&sensor=true" />');
$('#result').empty().append(xml);
}
});
},null,{enableHighAccuracy: true});//getCurrentPosition 終わり
 
return false;
});
});
})(jQuery);

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul id="btn">
<li><a href="#" id="menu01">うどん</a></li>
<li><a href="#" id="menu02">とんかつ</a></li>
<li><a href="#" id="menu03">カレー</a></li>
<li><a href="#" id="menu04">唐揚げ</a></li>
</ul>
<div id="result">
 
</div>
<div class="text-center">
<p>あなたの居場所が表示されます</p>
<div id="map"></div>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if(isset($_POST["req"])){
$xml = simplexml_load_file(urldecode($_POST["req"]));
if(!$xml->rest){
echo '見つかりませんでした';
} else {
foreach($xml->rest as $val){
echo '<div class="item">';
echo '<a href="'.$val->url.'">';
echo $val->name;
echo '</a><br />';
echo $val->address;
echo '</div>';
}
}
}

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

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

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

Category

Archive

Search

Social