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

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

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

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

- PR -

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

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

http://labs.mapion.co.jp/api/localsearch/SectionLocalsearch.html

API リファレンスローカル検索：マピオン via kwout

　ローカルサーチ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の環境構築やデプロイについては、下記記事も参考にしてみてください。

http://www.atmarkit.co.jp/fsmart/gaej.html

Google App Engineで手軽に試すJavaクラウド via kwout

■ ＠IT関連記事

マッシュアップを超えたマッシュアップを－MA5表彰式
D89クリップ（13）　先日開催された「Mashup Awardss 5」の表彰式では、前回を上回る応募作品数と高いクオリティのなか、おばかアプリ賞を含む、数々の賞が表彰された

デザインハック＜リッチクライアント 2009/12/11

マッシュアップ＋ひとひねり＝MA4の受賞作
D89クリップ（1）　リクルートらが主催するマッシュアップアワードの授賞式をレポートする。今年の猛者たちの「ひとひねり」が光るマッシュアップWebサービスの数々をチェック！

デザインハック＜リッチクライアント 2008/10/23

本当はすごい、知られざる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（拡張現実）系技術の作品も多数参加!?

デザインハック＜リッチクライアント 2009/11/20

著者プロフィール

山本大策（やまもとだいさく）

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 フォーラム新着記事

夏休みの自由研究にマイコンボードで「電子サイコロ」を作ったり、音楽プログラミングをしたりしてみよう （2017/7/24）
　子ども向け電子工作＆プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する企画。夏休みの自由研究に「電子サイコロ」を作ったり、音楽プログラミングをしたりしてみよう
子ども向け電子工作＆プログラミング用マイコンボード「chibi:bit」の基本的な使い方 （2017/7/20）
　子ども向け電子工作＆プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する。夏休みの子どもの自由研究などに役立てつつ、プログラミングを始めるきっかけにしてみてはいかがだろうか
3DゲームのAIをiOSのSceneKitとGameplayKitで作る基本 （2017/7/10）
　3Dゲーム用のフレームワークSceneKitを使った簡単なアプリ制作を通して、3Dゲーム用の人工知能（AI）について学ぶ
UnityアプリをWebGL、UWP、Android、iOS用としてビルドしてみた （2017/6/27）
　アプリをWebで実行できるように書き出す方法やWindows上でUWP、Android、iOS用などにビルドする方法について解説する【Windows 10、Unity 5.6に対応】