現在位置: トップ > YOLP公式ブログ > ニュース > 指定した場所の雨の強さが取得できる気象情報APIをリリースしました

ここから本文です

指定した場所の雨の強さが取得できる気象情報APIをリリースしました

[ニュース]  2012年12月19日
こんにちは、Yahoo! Open Local Platform (YOLP)の櫻井です。いつもYOLPをご利用いただきありがとうございます。
本日YOLPから、任意の緯度経度を指定するだけでその地点の降水強度データを取得できる気象情報APIを公開しました。またYahoo!スタティックマップAPIでは、過去の日時を指定して雨雲レーダーを地図上に表示できる機能を追加しました。さらに他の地図API/SDKでも気象情報関連のバージョンアップしました。

では、今回アップデートされた内容を紹介します。

降水強度を数値データで取得する

気象情報APIは任意の緯度経度を指定するとその地点の降水強度を取得できるAPIです。降水強度は数値データ(単位:mm/h)のため、雨の強さを明確に取得できます。降水強度データは過去2時間前の実測値から未来1時間後までの予測値を取得できるので、今後雨が降りそうであるか、雨が降っていた場合は雨が止む可能性があるのかがわかります。この降水強度のデータはお出かけサービスなど人の行動を促すサービスで活用できます。

気象情報APIのサンプルリクエストとレスポンスはこちらです。デフォルト設定では、現在時刻の降水強度実測値から1時間後までの降水強度予測値を取得できます。

<あなたのアプリケーションID>には、ご自身のアプリケーションIDを入れてください。アプリケーションIDについてはこちらをご覧ください。

例)緯度経度:39.611813,140.22036(秋田空港周辺)2012年12月14日 11時35分現在の降水強度と予測値
リクエストパラメータ

http://weather.olp.yahooapis.jp/v1/place?appid=<あなたのアプリケーションID>&coordinates=140.22036,39.611813 サンプルレスポンス

<YDF xmlns="http://olp.yahooapis.jp/ydf/1.0" firstResultPosition="1" totalResultsAvailable="1" totalResultsReturned="1">
  <ResultInfo>
    <Count>1</Count>
    <Total>1</Total>
    <Start>1</Start>
    <Status>200</Status>
    <Latency>0.006635</Latency>
    <Description/>
    <Copyright>(C) Yahoo Japan Corporation.</Copyright>
  </ResultInfo>
  <Feature>
    <Id>201212141135_140.22036_39.611813</Id>
    <Name>地点(140.22036,39.611813)の2012年12月14日 11時35分から60分間の天気情報</Name>
    <Geometry>
      <Type>point</Type>
      <Coordinates>140.22036,39.611813</Coordinates>
    </Geometry>
    <Property>
      <WeatherAreaCode>3210</WeatherAreaCode>
      <WeatherList>
        <Weather>
          <Type>observation</Type>
          <Date>201212141135</Date>
          <Rainfall>7.25</Rainfall>
        </Weather>
        <Weather>
          <Type>forecast</Type>
          <Date>201212141145</Date>
          <Rainfall>1.35</Rainfall>
        </Weather>
        <Weather>
          <Type>forecast</Type>
          <Date>201212141155</Date>
          <Rainfall>1.95</Rainfall>
        </Weather>
        <Weather>
          <Type>forecast</Type>
          <Date>201212141205</Date>
          <Rainfall>6.25</Rainfall>
        </Weather>
        <Weather>
          <Type>forecast</Type>
          <Date>201212141215</Date>
          <Rainfall>0.65</Rainfall>
        </Weather>
        <Weather>
          <Type>forecast</Type>
          <Date>201212141225</Date>
          <Rainfall>0.00</Rainfall>
        </Weather>
        <Weather>
          <Type>forecast</Type>
          <Date>201212141235</Date>
          <Rainfall>1.05</Rainfall>
        </Weather>
      </WeatherList>
    </Property>
  </Feature>
</YDF>

過去にさかのぼって雨雲レーダーを表示

Yahoo!スタティックマップAPIでは、気象情報APIで取得できる降水強度の数値データを地図上にビジュアルに表示できるようになりました。さらに現在時刻の雨雲レーダーを表示させることはもちろん、過去の日時を指定することもできます(2012年7月21日00時00分以降)。これにより、過去の雨雲の状況がわかる地図を見られます。
今年は台風17号が9/30から10/1にかけて日本列島を横断しました。2012年9月30日 18時00分時点の日本列島の雨雲レーダーの様子を、Yahoo!スタティックマップAPIで表示してみましょう。

リクエストパラメータ
http://map.olp.yahooapis.jp/OpenLocalPlatform/V1/static?appid=<あなたのアプリケーションID>&lat=38&lon=139&z=6&width=600&height=450&overlay=type:rainfall|date:201209301800|datelabel:on
過去の雨雲状態を地図上に表示させる機能は旅行記などのブログで有効活用できます。記事と一緒にYahoo!スタティックマップAPIを貼り付けると、旅行に行った場所と当日の天気の様子が具体的にわかる臨場感ある旅行記を作成できます。
雨雲レーダーを表示させる詳しいリクエストパラメータの設定方法については、こちらをご覧ください。

雨雲レーダーをアニメーションで表示

Yahoo! JavaScriptマップAPIでは、現在時刻の過去2時間前から未来1時間後までの雨雲レーダーのアニメーション表示ができるようになりました。
まもなくクリスマスや年末年始のホリデーシーズンで外出される方も多いと思います。外出先で雨や雪が降らないか確認したい。そんな課題を解決する、雨雲の動きがわかるサンプルをご紹介します。以下のリンクからご覧ください。

雨雲レーダーアニメーション表示サンプル



実装したサンプルコードは以下になります。github(外部リンク)にもあげていますので、こちらも合わせてご利用ください。


<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: .8;
    height: 64px;
}
div#title{
    font-size:10pt;
    font-weight:bold;
    line-height:1.2em;
    width:100px;
    overflow:hidden;
}
div#credit{
    bottom:2px;
    font-size:12pt;
    font-weight:bold;
    line-height:12pt;
    overflow:hidden;
}
div#slider{
    position:relative;
    width:252px;
    height:40px;
}
div#bar {
    position:relative;
    height:3px;
    top:11px;
    background:#ccc;
}
input#button {
    position:absolute;
    width:20px;
    height:20px;
}
</style>
<script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=<あなたのアプリケーションID>"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
 /*
  * Copyright (c) 2012, Yahoo Japan Corporation. All rights reserved.
  * Copyrights licensed under the MIT License.
  * See the accompanying LICENSE file for terms. */
window.onload = function() {
    // 地図表示
    var map = new Y.Map('map', {
        configure : {
            scrollWheelZoom : true
        }
    });
    map.drawMap(new Y.LatLng(35.634629, 139.87997), 14, Y.LayerSetId.NORMAL);
    // 雨雲レーダーレイヤー
    var weather = new Y.WeatherMapLayer({
        'opacity': 0.6
    });
    weather.setAnimationUpdateCallback(function() {
        var t = weather.getAnimationTimeShift();
        var x = (t + 7200000) / 10800000 * 252;
        setBar(x);
    });
    weather.setAnimationFinishCallback(function() {
        $('#play').attr('disabled', false);
        $('#stop').attr('disabled', true);
    });
    weather.setDispTime(true);
    weather.startAutoUpdate();
    map.addLayer(weather);
    // リサイズ(回転)の時に地図更新
    $(window).resize(function() {
        map.updateSize();
    });
    var dragging = false;
    var touchstart = function(e) {
        setTimeShift(e);
        dragging = true;
    };
    var touchmove = function(e) {
        if (dragging) {
            setTimeShift(e);
            return false;
        }
    };
    var touchend = function(e) {
        dragging = false;
    };
    var play = function() {
        weather.startAnimation({
            'step': 300000
        });
        $(this).attr('disabled', true);
        $('#stop').attr('disabled', false);
    };
    var stop = function() {
        weather.stopAnimation();
        $(this).attr('disabled', true);
        $('#play').attr('disabled', false);
    };
    var setTimeShift = function(e) {
        var x = (e.pageX === undefined) ? e.originalEvent.touches[0].pageX: e.pageX;
        x -= $('#slider').offset().left;
        weather.setAnimationTimeShift(10800000 / 252 * x - 7200000);
        setBar(x);
    }
    var setBar = function(x) {
        if (x > 252) x = 252;
        if (x < 0) x = 0;
        $('#button').css('left', (x - 10) + 'px');
    }
    var slider = $('#slider');
    slider.bind('mousedown', touchstart);
    slider.bind('mousemove', touchmove);
    $(window).bind('mouseup', touchend);
    slider.bind('touchstart', touchstart);
    slider.bind('touchmove',touchmove);
    $(window).bind('touchend', touchend);
    $('#play').bind('click', play);
    $('#play').bind('touchstart', play);
    $('#stop').bind('click', stop);
    $('#stop').bind('touchstart', stop);
    $('#stop').attr('disabled', true);
};
</script>
</head>
<body>
<div id="map" style="width:100%; height:100%;"></div>
<div id="label" style="position:absolute; top:4px; right:4px;">
    <div id="title">雨雲レーダー
        <div id="credit">
            <!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
            <a href="http://developer.yahoo.co.jp/about">
            <img src="//s.yimg.jp/images/yjdn/yjdn_attbtn1_125_17.gif" title="Webサービス by Yahoo! JAPAN" alt="Web Services by Yahoo! JAPAN" width="125" height="17" style="position: absolute; border:0; margin:0; top:8px; right:8px;">
            </a>
            <!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
        </div>
    </div>
    <input id="play" type="button" value="再生">
    <input id="stop" type="button" value="停止">
    <div id="slider">
        <div id="bar"></div>
        <input id="button" type="button" value="" style="left: -10px">
    </div>
</div>
</body>
</html>

スマートフォンでも未来の雨雲レーダーに対応

iOS、Anddoidデバイス向けのアプリでも、Yahoo! iOSマップSDKYahoo! AndroidマップSDKを利用すれば、雨雲レーダーを表示できます。今回のバージョンアップでは、現在時刻の過去2時間前から未来1時間後までの雨雲レーダーを表示できるようになりました。Yahoo!ロコ アプリと同等のサービスを実現できます。
またYahoo! iOSマップSDKでは、地図表示機能改善のバージョンアップをしており、地図のスクロール速度が大幅に向上しています。



最後に

今回のアップデートにより、ユーザーの行動につながるリアルタイム性の高い位置情報をコンテンツを提供できるようになりました。今回ご紹介したAPI/SDKのほかにも、デベロッパー、ユーザー様がより便利に活用できるよう、Yahoo!ローカルサーチAPIYahoo! ジオコーダーAPIなど、地域情報に関するさまざまなAPI/SDKを提供しています。利用シーンに合わせて、こちらもぜひご活用ください。今後ともYOLPをよろしくお願いします。

※降水強度は気象レーダーで観測された降水の強さを時間雨量(mm/h)に換算した値で、実際の雨量とは異なります。


YOLPへのご感想やご意見などはFacebookページTwitterアカウント宛に投稿ください。
Facebookページへの
やTwitterアカウントの
RSSリーダーの登録もよろしくお願いします。
グーグルリーダーに登録  Subscribe with livedoor Reader  My Yahoo!に追加

関連する記事


Yahoo!地図アプリ iPhone版/Android版(無料)
Yahoo!地図ブログ
本文はここまでです このページの先頭へ