CodeZine(コードジン)

特集ページ一覧

地図をタッチして雨の強さをチェック!
YOLPで作る簡単便利地図アプリ

スマホアプリ開発の最新トレンド! ぜったい外せない位置情報活用術(7)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

「雨フル?タッチ」ソースコード

 今回の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.panel { 
    font-size: 9pt;
    z-index: 2;
    padding: 0px;
    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;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 85px;
    opacity: .9;
}
div.warea {
    width: 14%;
    height: 60px;
    float: left;
    align: center;
    overflow: hidden;
}
div.wdata {
    height: 40px;
    width: 80%;
    background-color: white;
    color: black;
    font-size: 18px;
    text-align: center;
    align: center;
    border: solid 2px;
    border-color: #ffffff;
}
div.wdate {
    height: 20px;
}
</style>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=<あなたのアプリケーションID>"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
var map;
var weather;
var latlng = new Y.LatLng(35, 135);

window.onload = function() {
    // 地図表示
    map = new Y.Map('map', {
        configure : {
            scrollWheelZoom: true,
            enableFlickScroll: false
        }
    });
    map.drawMap(latlng, 10, Y.LayerSetId.NORMAL);

    // 現在地に移動
    setNowPoint();

    //天気レイヤ作成
    weather = new Y.WeatherMapLayer({
        "opacity": 0.6
    });
    weather.startAutoUpdate(); //自動更新
    weather.setDispTime(true); //時刻表示
    weather.setUpdateCallback(getWeatherData); //コールバック関数
    map.addLayer(weather);

    // 地図をタップした時に clickMap() を呼びだす
    map.bind('click', clickMap);

    // リサイズ(回転)の時に地図更新
    $(window).resize(function() {
        map.updateSize();
    });
};

// Geolocation API を使って現在地を取得して移動
function setNowPoint() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(pos) {
            pos = new Y.LatLng(pos.coords.latitude, pos.coords.longitude);
            map.panTo(pos);
            clickMap(pos);
            latlng = pos;
        }, null, {
            enableHighAccuracy: true, timeout: 3000, maximumAge: 0
        });
    }
}

// タップイベント設定
function clickMap(pos) {
    latlng = pos;
    // タイムシフト値を設定
    setTimeShift(0);
    // アイコン表示
    map.clearFeatures();
    var marker = new Y.Marker(latlng);
    map.addFeature(marker);
    // 住所を検索
    searchAddress();
}

// タイムシフト値を設定
function setTimeShift(time){
    var wArea = $('.warea').get();
    for (var i = 0; i < 7; i ++) {
        var wData = $('.wdata', $(wArea[i]));
        if (i * 10 == time) {
            wData.css({
                'margin-top':'2px',
                'border-color': '#ff0000'
            });
        } else {
            wData.css({
                'margin-top':'0px',
                'border-color': '#ffffff'
            });
        }
    }
    // タイムシフト値が0の場合のみ自動更新する
    if (time === 0) {
        weather.startAutoUpdate();
    } else {
        weather.stopAutoUpdate();
    }
    weather.setTimeShift(time * 60000);
    weather.updateWeather();
}

// 住所を検索
function searchAddress(){
    var request = {"latlng": latlng};
    var geocoder = new Y.GeoCoder();
    geocoder.execute(request, function(ydf) {
        if (ydf.features.length >= 1) {
            var feature = ydf.features[0];
            if (feature.property.AddressElement) {
                var saddress = feature.property.Address;
                $('#rainfall').html(saddress + ' の降水強度予測値(mm/h)<br><br>');
            }
        }
    });
}

// 気象情報APIを使って降水強度予測値を取得
function getWeatherData() {
    // タイムシフト値が0の場合のみ取得する
    if (weather.getTimeShift() !== 0) {
        return;
    }
    var url = "http://weather.olp.yahooapis.jp/v1/place";
    var time = weather.getNowDate();
    var coordinates = latlng.Lon + "," + latlng.Lat;
    var param = {
        appid       : "<あなたのアプリケーションID>",
        output      : "json",
        date        : time,
        coordinates : coordinates
    };
    $.ajax({
        "url"       : url,
        "data"      : param,
        "dataType"  : "jsonp",
        "success"   : function(result){
                          var ydf = new Y.YDF(result); 
                          dispWether(result);
                      },
        "error"     : function(){
                      }
    });
}

//降水強度予測値を表示
function dispWether(data) {
    var feature = data.Feature[0];
    if (data.ResultInfo.Count > 0) {
        //リスト作成
        var aryRainfall = new Array(7);
        for (var i = 0; i < 7; i ++) {
            aryRainfall[i] = feature.Property.WeatherList.Weather[i].Rainfall;
        }
        var wArea = $('.warea').get();
        var date = weather.getNowDate();
        date = date.substring(8, 12);
        for (var i = 0; i < 7; i ++) {
            var wData = $('.wdata', $(wArea[i]));
            if (aryRainfall[i] <= 0.0 ){
                wData.css({
                    'background-color': 'white'
                });
            } else if (aryRainfall[i] > 0.0 && aryRainfall[i] < 1.0) {
                wData.css({
                    'background-color': '#CCFFFF'
                });
            } else if (aryRainfall[i] >= 1.0 && aryRainfall[i] < 2.0) {
                wData.css({
                    'background-color': '#66FFFF'
                });
            } else if (aryRainfall[i] >= 2.0 && aryRainfall[i] < 4.0) {
                wData.css({
                    'background-color': '#00CCFF'
                });
            } else if (aryRainfall[i] >= 4.0 && aryRainfall[i] < 8.0) {
                wData.css({
                    'background-color': '#0099FF'
                });
            } else if (aryRainfall[i] >= 8.0 && aryRainfall[i] < 12.0) {
                wData.css({
                    'background-color': '#3366FF'
                });
            } else if (aryRainfall[i] >= 12.0 && aryRainfall[i] < 16.0) {
                wData.css({
                    'background-color': '#33FF00'
                });
            } else if (aryRainfall[i] >= 16.0 && aryRainfall[i] < 24.0) {
                wData.css({
                    'background-color': '#33CC00'
                    });
            } else if (aryRainfall[i] >= 24.0 && aryRainfall[i] < 32.0) {
                wData.css({
                    'background-color': '#199900'
                });
            } else if (aryRainfall[i] >= 32.0 && aryRainfall[i] < 40.0) {
                wData.css({
                    'background-color': '#FFFF00'
                    });
            } else if (aryRainfall[i] >= 40.0 && aryRainfall[i] < 48.0) {
                wData.css({
                    'background-color': '#FFCC00'
                });
            } else if (aryRainfall[i] >= 48.0 && aryRainfall[i] < 56.0) {
                wData.css({
                    'background-color': '#FF9900'
                });
            } else if (aryRainfall[i] >= 56.0 && aryRainfall[i] < 64.0) {
                wData.css({
                    'background-color': '#FF0000'
                });
            } else if (aryRainfall[i] >= 64.0 && aryRainfall[i] < 80.0) {
                wData.css({
                    'background-color': '#B70014'
                });
            } else if (aryRainfall[i] >= 80.0) {
                wData.css({
                    'background-color': '#ff3366'
                });
            } else{
                wData.css({
                    'background-color': 'white'
                });
            }
            wData.html(aryRainfall[i]);

            var date = feature.Property.WeatherList.Weather[i].Date;
            var h = date.substring(8, 10);
            var m = date.substring(10, 12);
            var wDate = $('.wdate', $(wArea[i]));
            wDate.html(h + ":" + m);
        }
    }
}
</script>
</head>
<body>
<div id="map" style="width:100%; height:100%;"></div>
<div class="panel">
    <div style="margin-left:5px;">
        <div id="rainfall" style="margin-top:5px; margin-left:5px; height:20px;"></div>
    </div>
    <div style = " width:90%; height:60px; margin:0 auto;">
        <div class="warea" >
            <div class="wdata" onClick="setTimeShift(0)"></div>
            <div class="wdate"></div>
        </div>
        <div class="warea"  >
            <div class="wdata" onClick="setTimeShift(10)"></div>
            <div class="wdate"></div>
        </div>
        <div class="warea" >
            <div class="wdata" onClick="setTimeShift(20)"></div>
            <div class="wdate"></div>
        </div>
        <div class="warea" >
            <div class="wdata" onClick="setTimeShift(30)"></div>
            <div class="wdate"></div>
        </div>
        <div class="warea" >
            <div class="wdata" onClick="setTimeShift(40)"></div>
            <div class="wdate"></div>
        </div>
        <div class="warea" >
            <div class="wdata" onClick="setTimeShift(50)"></div>
            <div class="wdate"></div>
        </div>
        <div class="warea" >
            <div class="wdata" onClick="setTimeShift(60)"></div>
            <div class="wdate"></div>
        </div>
    </div>
</div>
</body>
</html>

 上記ソースコードは、GitHubよりダウンロードが可能です。

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

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:スマホアプリ開発の最新トレンド! ぜったい外せない位置情報活用術

もっと読む

著者プロフィール

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5