たぶん1時間でできるマッシュアップ講座たぶん1時間でできるマッシュアップ講座

クラウドで動く
GPS連動スマホ用Webアプリを作る


株式会社リクルート メディアテクノロジーラボ
山本 大策
2010/11/4

【50〜60分】スポット情報を表示

- PR -

 ここまでの開発で、現在位置を動的に地図に反映し表示するWebアプリケーションができました。ここからはAPIを利用し、現在位置の周辺のスポット情報を表示する機能を追加したいと思います。今回利用するAPIは「マピオンローカルサーチAPI」です。

 通常、このローカルサーチAPIは有償で利用するAPIですが、前述のMashup Awards 6向けに期間限定で無償で利用できるようになっています。ローカルサーチAPIはJSONPに対応しているので、今回のようなHTML+JavaScriptで開発するアプリでは非常に使いやすいAPIです。

 ローカルサーチAPIを利用するためには、以下のようにコードを変更します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<title>Spotnavi</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize(){
if (typeof(navigator.geolocation) != 'undefined') {
navigator.geolocation.watchPosition(success, error);
}
}
function listSpot(data) {
var spot = document.getElementById("spot");
while(spot.firstChild){
spot.removeChild(spot.firstChild);
}
for (var i = 0; i < data.Result.ResultList.length; i++) {
var result = data.Result.ResultList[i];
var div = document.createElement("div");
var str = document.createTextNode(result.poi_name);
div.appendChild(str);
spot.appendChild(div);
}
}
function success(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;

var msg = document.getElementById("msg");
msg.innerHTML = "<div>緯度:" + lat + " 経度:" + lng + "</div>" + "<div>" + (new Date()).toString() + "</div>";

var localsearchURL = "http://searchapi-stg.mapion.co.jp/search/ver1/localsearch/landmark/?key=MA6&lat=" + lat + "&lon=" + lng + "&dtm=wgs&ot=jsonp&callback=listSpot";

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = localsearchURL;
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);

var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var googlemap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: googlemap
});
}
function error(e){
alert("エラーが発生しました - " + e.message);
}
</script>
</head>
<body onload="initialize()">
<div id="msg"></div>
<div id="map_canvas" style="width:230px; height:320px;"></div>
<div id="spot"></div>
</body>
</html>

 ローカルサーチAPIに取得した緯度・経度を渡すと、周辺の施設をJSONPレスポンスとして返します。そのJSONPレスポンスを受信した際に実行するコールバック関数のなかで、以下のようにレスポンスを解析して表示します。動作を確認すると、地図の下にスポット情報が表示されます。

 スポット情報が表示されるだけだと便利ではないので、スポット情報をクリックすると、地図上にマーカーが表示されるようにしてみましょう。コードを以下のように変更します。マーカーに指定する画像はGoogleマップの連番マーカー画像とします。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<title>Spotnavi</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var googlemap;
var markers = [];
function initialize(){
if (typeof(navigator.geolocation) != 'undefined') {
navigator.geolocation.watchPosition(success, error);
}
}
function setMarker(p_lat,p_lon,marker_title){
var marker = new google.maps.Marker({
map : googlemap,
position: new google.maps.LatLng(p_lat,p_lon),
icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
});
google.maps.event.addListener(marker, 'click', function(event){
alert(marker_title);
});
markers.push(marker);
}
function listSpot(data) {
var spot = document.getElementById("spot");
while(spot.firstChild){
spot.removeChild(spot.firstChild);
}
for (var i = 0; i < data.Result.ResultList.length; i++) {
var result = data.Result.ResultList[i];
var div = document.createElement("div");
var a = document.createElement("a");
a.setAttribute("href","javascript:void(0);");
a.setAttribute("onClick","javascript:setMarker(" + result.lat + "," + result.lon + ",'" + result.poi_name + "')");
var str = document.createTextNode(result.poi_name);
a.appendChild(str);
div.appendChild(a);
spot.appendChild(div);
}
}
function success(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;

var msg = document.getElementById("msg");
msg.innerHTML = "<div>緯度:" + lat + " 経度:" + lng + "</div>" + "<div>" + (new Date()).toString() + "</div>";

var localsearchURL = "http://searchapi-stg.mapion.co.jp/search/ver1/localsearch/landmark/?key=MA6&lat=" + lat + "&lon=" + lng + "&dtm=wgs&ot=jsonp&callback=listSpot";

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = localsearchURL;
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);

var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
googlemap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: googlemap
});
}
function error(e){
alert("エラーが発生しました - " + e.message);
}
</script>
</head>
<body onload="initialize()">
<div id="msg"></div>
<div id="map_canvas" style="width:230px; height:320px;"></div>
<div id="spot"></div>
</body>
</html>

 動作を確認してみましょう。

 これで、スポット情報のリンクをクリックした際にマーカーが表示されるようになりました。ここで再度Google App Engineにデプロイし、スマートフォンからサイトにアクセスしてみましょう。

 これで完成です! いろいろな場所で動作させると、その場所に応じて、表示されるスポット情報が変わることが確認できると思います。

HTML5やjQueryで、さらに高機能に

 現時点では、ごくごく簡単なマッシュアップアプリですが、このWebアプリにHTML5の仕様であるWebStorageを使ったお気に入り施設登録機能や、自分の歩いた地点を記録するトラッキング機能を追加するのは簡単です。

 また、先日アルファ版がリリースされた「jQuery Mobile」などのJavaScriptフレームワークを利用して、よりスマートフォンで使いやすいUIを作成することも可能です。

 さらに、マッシュアップという観点でアイデアを膨らませると、位置情報とAPIを連携させたアプリはいろんな方向性(グルメ・イベント・交通など)でアイデアを膨らませることができます。ぜひ皆さんのアイデアで面白いマッシュアップアプリを開発してみてください。この記事が、皆さんのアプリ開発の一助になれば幸いです。

 Google App Engineの環境構築やデプロイについては、下記記事も参考にしてみてください。

■ @IT関連記事

マッシュアップを超えたマッシュアップを−MA5表彰式
D89クリップ(13) 
先日開催された「Mashup Awardss 5」の表彰式では、前回を上回る応募作品数と高いクオリティのなか、おばかアプリ賞を含む、数々の賞が表彰された
マッシュアップ+ひとひねり=MA4の受賞作
D89クリップ(1) リクルートらが主催するマッシュアップアワードの授賞式をレポートする。今年の猛者たちの「ひとひねり」が光るマッシュアップWebサービスの数々をチェック!
本当はすごい、知られざるGoogle Maps APIたち!!
インタビュー特集:Google直伝!(3) 数多く存在するGoogle MapsのAPIや機能のうち、あまり知られていないものや新しいもの、とっておきをGoogle担当者に聞いた
リッチクライアント & 帳票」フ ォーラム 2009/5/21
Windows Live APIをSilverlightでマッシュアップ!
.NETを知らない人でも分かるSilverlight入門(5) 先日、日本語情報が公開されたWindows Live APIを紹介し、相性が良いSilverlightとのマッシュアップについて解説
リッチクライアント & 帳票」フ ォーラム 2008/6/30
APIアクセス権を委譲するプロトコル、OAuthを知る
クロスドメインでのデジタルアイデンティティを守る 
マッシュアップでAPIアクセス権の委譲をどう扱うべきか――この問題を解決すべく作られたプロトコル「OAuth」に迫る
Security&Trust」フォーラム 2008/1/21
3回目にして完成形を迎えた「おばかアプリ選手権」
D89クリップ(12) 
今回も個性あふれるおばかクリエイターたちがお台場へ集結。その模様をダイジェストで紹介する。業界注目のAR(拡張現実)系技術の作品も多数参加!?

著者プロフィール

山本 大策(やまもとだいさく)

1978年広島生まれ。法政大学社会学部卒業。株式会社富士総合研究所(現みずほ情報総研株式会社)で、銀行ディーリング部門向けWebアプリケーション開発を担当。その後、フィードパス株式会社にて、SaaS・イントラ製品開発に従事。現在はリクルートメディアテクノロジーラボに所属。個人でもサービスを開発しており、TAGGYマッシュアップコンテストグランプリ、Mashup Awards 4部門賞(NTTデータ賞)を受賞。シーズン中は、カープの試合結果に一喜一憂する毎日。AB型のやぎ座。
Twitter: http://twitter.com/daisaku

3/3  

 INDEX
たぶん1時間でできるマッシュアップ講座 
クラウドで動くGPS連動スマホ用Webアプリを作る
  Page1
現在地周辺のスポットをリアルタイム表示するWebアプリ
【0〜20分】まずは、せっせと開発環境構築
【20〜30分】新規プロジェクト作成&Hello World!
  Page2
【30〜40分】Web APIで地図表示と現在地取得
【40〜50分】スマートフォンで動作確認
Page3
【50〜60分】スポット情報を表示
HTML5やjQueryで、さらに高機能に


 Smart&Social フォーラム トップページへ



Smart & Social フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Smart & Social 記事ランキング

本日 月間