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

スマホアプリ開発の最新トレンド！ぜったい外せない位置情報活用術（6）

更新日: 2012/11/08
公開日: 2012/11/06

ポスト

　本連載では、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を登録するためには、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/などを参考にしてください。

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

・全ての過去記事が閲覧できます
・会員限定メルマガを受信できます
・翔泳社の本が買える！
500円分のポイントをプレゼント

メールバックナンバー

新規会員登録無料

次のページ
地図を表示する

修正履歴: 2012/11/08 10:48 一部修正、追記を加筆させていただきました。

この記事は参考になりましたか？

印刷用を表示

ポスト

スマホアプリ開発の最新トレンド！ぜったい外せない位置情報活用術連載記事一覧: OpenGLを使った地図描画エンジンの作り方（3）

OpenGLを使った地図描画エンジンの作り方（2）

OpenGLを使った地図描画エンジンの作り方（1）

もっと読む

この記事の著者: 尾崎哲哉（ヤフー株式会社）（オザキテツヤ（ヤフーカブシキガイシャ））

2008年ヤフー入社。「Yahoo! Open Local Platform（略称：YOLP）」のJavaScriptマップAPIの開発を担当。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事