はじめに
今回は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を登録するためには、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/などを参考にしてください。
では次項から各パートの解説をしていきます。
