ルートを探しながら雨雲をチェック! YOLPで作る簡単便利地図アプリ

CodeZine / 2012年11月6日 14時0分

 本連載では、Yahoo! Open Local Platform(YOLP)を使ったさまざまなアプリ・サービスの実装例を紹介しています。今回は最新のアップデートでYahoo! JavaScriptマップAPI(以下、JavaScriptマップAPI)に追加された雨雲レーダーレイヤーについてご紹介したいと思います。

■はじめに

 今回はYOLPの提供するJavaScriptマップAPIを利用して、現在地から指定した場所へのルート検索を行いつつ、ルート上の雨雲状況をビジュアルにチェックできるスマホ・タブレット用のWebアプリ「ルート雨雲チェッカー」を作ってみたいと思います。本文に沿って実際に開発を進めると、簡単にWebアプリを作成できることを実感していただけると思いますので、ぜひお試しください。また「ルート雨雲チェッカー」を今すぐ試したい方は、こちらからご利用いただけますので、あわせてお試しください。



■機能概要

 今回のWebアプリでは、以下の機能を実装します。PCブラウザなどで現在地が取得できなかった場合は日本へそ公園(注1)を表示します。

起動すると、現在地を取得して地図を表示 地図上で目的地をタップすると、現在地から目的地までのルート、総距離、総時間、現在地と目的地の住所を表示 地図を再度タップすると、目的地を変更し、現在地を再度取得して新しいルートと関連情報を表示 ルートを表示した地図上に現在の雨雲の状態を重ねて表示 注1 日本へそ公園
 日本へそ公園は兵庫県西脇市上比延町にある公園で、東経135度、北緯35度に位置しており、日本は東経123度~147度、北緯24度~46度の枠に収まっているので、東経135度、北緯35度のこの地点がまさに日本の中心であり“へそ”だということです。



■開発環境の準備

●アプリケーションIDの登録

 これまでの記事でも書かれていますが、YOLPで提供されているAPIを利用するためにはアプリケーションIDが必要になります。すでにアプリケーションIDをお持ちの方はそちらを利用していただき、アプリケーションIDをお持ちでない方、新しいアプリケーションIDの登録を希望する方は、以下のページを参考にアプリケーションIDを登録してください。

アプリケーションIDとは - YJDNアプリケーションIDを登録する - YJDN なお、アプリケーションIDを登録するためには、Yahoo! JAPAN IDでログインする必要があります。

■「ルート雨雲チェッカー」ソースコード

 今回のWebアプリ「ルート雨雲チェッカー」のソースコードは以下のとおりです。

 前述のとおり、<あなたのアプリケーションID>の部分はご自身で取得されたアプリケーションIDに書き換えてください。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>ルート雨雲チェッカー</title> <style type="text/css"> html, body { width:100%; height:100%; } html, body, div{ margin:0; padding:0; } div#label{ z-index:2; padding:8px; overflow:hidden; color: #fff; background-color: #000; background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(155, 155, 155, 0.1)), to(rgba(255, 255, 255, 0.5)), color-stop(.5,rgba(155, 155, 155, 0.2)), color-stop(.5,rgba(255, 255, 255, 0.1)) ); border-radius: 8px; opacity: .7; } div#title{ font-size:14pt; font-weight:bold; line-height:1.2em; width:100%; overflow:hidden; } div#cur, div#dst{ font-size:10pt; font-weight:normal; line-height:10pt; overflow:hidden; } div#summary{ font-size:12pt; font-weight:bold; line-height:12pt; overflow:hidden; } </style> <script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=<あなたのアプリケーションID>"></script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> window.onload = function() { // 地図表示 var map = new Y.Map('map', { configure : { scrollWheelZoom : true, weatherOverlay: true // 雨雲レーダーON } }); map.drawMap(new Y.LatLng(35, 135), 15, Y.LayerSetId.NORMAL); map.addControl(new Y.ZoomControl()); //始点は Geolocation API を使って現在地を取得 var start = new Y.LatLng(35, 135); // 始点 var end; // 終点 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(pos) { start = new Y.LatLng(pos.coords.latitude, pos.coords.longitude); map.panTo(start); }, null, { enableHighAccuracy: true, timeout: 3000, maximumAge: 0 }); } // 終点は地図をタップして設定 map.bind('click', function(pos) { end = pos; // 現在地を取得 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(pos) { start = new Y.LatLng(pos.coords.latitude, pos.coords.longitude); createRoute(start, end); }, function() { // 取れなかった場合 createRoute(start, end); }, { enableHighAccuracy: true, timeout: 3000, maximumAge: 0 }); } }); // ルートを表示するためのレイヤーを設定する var routeSearchLayer = new Y.RouteSearchLayer(); routeSearchLayer.bind('drawend', function(result) { dispRouteInfo(result); }); map.addLayer(routeSearchLayer); // ルートを表示する var createRoute = function(s, e) { if (s && e) { routeSearchLayer.clearRoute(); var config = { enableRestrict: true, // 交通規制を考慮する useCar: true, // 自動車を使う useFerry: true // フェリーを使用する }; routeSearchLayer.execute([s, e], config); } } // ルート情報を表示する var dispRouteInfo = function(result) { $('#summary').html('総距離' + result.TotalDistance + 'm, 総時間' + result.TotalTime + '分'); // 始点と終点の住所を取得して表示 var geocoder = new Y.GeoCoder(); geocoder.execute({latlng: start}, function(r) { $('#cur').html('現在地 : ' + r.features[0].property.Address); }); geocoder.execute({latlng: end}, function(r) { $('#dst').html('目的地 : ' + r.features[0].property.Address); }); } // リサイズ(回転)の時に地図更新 $(window).resize(function() { map.updateSize(); }); } </script> </head> <body> <div id="map" style="width:100%; height:100%;"></div> <div id="label" style="position:absolute; bottom:4px; right:4px; width:64%; height:64px"> <div id="title">ルート雨雲チェッカー</div> <div id="cur">現在地 : </div> <div id="dst">地図をタップして目的地を設定してください</div> <div id="summary"></div> </div> </body> </html> 
 上記ソースコードは、GitHubよりダウンロードが可能です。

 また、コードを簡潔に記述するために、jQuery を利用しています。jQueryの詳しい仕様についてはhttp://jquery.com/などを参考にしてください。

 では次項から各パートの解説をしていきます。



■関連記事
【ADC MEETUP 06】インタラクティブなリッチコンテンツの制作を支援するライブラリ「CreateJS」
【ADC MEETUP 06】Webとアドビの切っても切れない関係
スマートフォン向けWebサイトの表示速度 高速化手法
ルートを探しながら雨雲をチェック! YOLPで作る簡単便利地図アプリ
Windows Azure Webサイトで利用するNode.js

■記事全文へ

CodeZine

トピックスRSS

ランキング