Livedoor の天気予報API（JSON版）を使ってブログパーツを作ってみる

天気予報のAPIって結構需要があるんですよねー。そこで今回の記事では、APIとして天気予報が取得できる、Livedoor - Wether hacksを紹介します。

API仕様

XMLまたはREST（JSON）に対応しているようですが、この記事ではRESTの方を紹介します。詳細な仕様は、お天気Webサービス仕様を参照してください。ちなみに、商用利用はNGらしいです。
以下のURLで特定の地域の天気予報が取得できます。

http://weather.livedoor.com/forecast/webservice/json/v1?city=1次細分区コード

city
取得する地域を表す１次細分区コードです。全国142分割した地域コードで、全国の地点定義表（RSS）で、目的の地域コードを確認できます。

レスポンス例

実際は、日本語が\uエンコードされています。指定した地域の今日、明日、明後日の天気および最高・最低気温が取得できます。

{
    "copyright": {
        "image": {
            "height": 26, 
            "link": "http://weather.livedoor.com/", 
            "title": "livedoor 天気情報", 
            "url": "http://weather.livedoor.com/img/cmn/livedoor.gif", 
            "width": 118
        }, 
        "link": "http://weather.livedoor.com/", 
        "provider": [
            {
                "link": "http://tenki.jp/", 
                "name": "日本気象協会"
            }
        ], 
        "title": "(C) NHN Japan Corp. All rights reserved."
    }, 
    "description": {
        "publicTime": "2013-03-07T10:44:00+0900", 
        "text": " 九州北部地方は、高気圧に覆われて晴れています。

 九州北部地方の7日は、高気圧に覆われてはじめは晴れますが、気圧の谷
の影響により次第に曇りとなり、夜は雨や雷雨となる所があるでしょう。

 8日は、高気圧に覆われて概ね晴れるでしょう。

 波の高さは、九州北部地方の沿岸の海域では、7日と8日は2.5メート
ルでしょう。豊後水道では7日と8日は1.5メートルでしょう。
 福岡県の内海では、7日と8日は0.5メートルでしょう。"
    }, 
    "forecasts": [
        {
            "date": "2013-03-07", 
            "dateLabel": "今日", 
            "image": {
                "height": 31, 
                "title": "晴のち曇", 
                "url": "http://weather.livedoor.com/img/icon/5.gif", 
                "width": 50
            }, 
            "telop": "晴のち曇", 
            "temperature": {
                "max": {
                    "celsius": "19", 
                    "fahrenheit": "66.2"
                }, 
                "min": null
            }
        }, 
        {
            "date": "2013-03-08", 
            "dateLabel": "明日", 
            "image": {
                "height": 31, 
                "title": "晴れ", 
                "url": "http://weather.livedoor.com/img/icon/1.gif", 
                "width": 50
            }, 
            "telop": "晴れ", 
            "temperature": {
                "max": {
                    "celsius": "19", 
                    "fahrenheit": "66.2"
                }, 
                "min": {
                    "celsius": "10", 
                    "fahrenheit": "50.0"
                }
            }
        }, 
        {
            "date": "2013-03-09", 
            "dateLabel": "明後日", 
            "image": {
                "height": 31, 
                "title": "晴れ", 
                "url": "http://weather.livedoor.com/img/icon/1.gif", 
                "width": 50
            }, 
            "telop": "晴れ", 
            "temperature": {
                "max": null, 
                "min": null
            }
        }
    ], 
    "link": "http://weather.livedoor.com/area/forecast/400040", 
    "location": {
        "area": "九州", 
        "city": "久留米", 
        "prefecture": "福岡県"
    }, 
    "pinpointLocations": [
        {
            "link": "http://weather.livedoor.com/area/forecast/4020200", 
            "name": "大牟田市"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4020300", 
            "name": "久留米市"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4020700", 
            "name": "柳川市"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4021000", 
            "name": "八女市"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4021100", 
            "name": "筑後市"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4021200", 
            "name": "大川市"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4021600", 
            "name": "小郡市"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4022500", 
            "name": "うきは市"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4022800", 
            "name": "朝倉市"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4022900", 
            "name": "みやま市"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4044700", 
            "name": "筑前町"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4044800", 
            "name": "東峰村"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4050300", 
            "name": "大刀洗町"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4052200", 
            "name": "大木町"
        }, 
        {
            "link": "http://weather.livedoor.com/area/forecast/4054400", 
            "name": "広川町"
        }
    ], 
    "publiTtime": "2013-03-07T11:00:00+0900", 
    "title": "福岡県 久留米 の天気"
}

実際のレスポンスを見る

JavaScriptサンプル

サーバーサイド（PHP）を使っていいのですが、ブログのウェジットみたいなものを作ってみたかったので、このJSONをJSONP変換するAPIを使って、JavaScriptだけで動くサンプルを作りました。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
 escapeTag = function(string) {
  if (string == null) return string;
  return string.replace(/[&<>"']/g,
   function(match) {
       return {
           '&' : '&amp;',
              '<' : '&lt;',
              '>' : '&gt;',
              '"' : '&quot;',
              "'" : '#&39;'
    }[match];
   });
 };

 var city = '130010'; // Tokyo
    var wetherURL = 'http://weather.livedoor.com/forecast/webservice/json/v1?city='+city;
    $.getJSON('http://pipes.yahoo.com/pipes/pipe.run?u='+encodeURI(wetherURL)+'&_id=332d9216d8910ba39e6c2577fd321a6a&_render=json&_callback=?', {}, function(json) {
     var item = json.value.items[0];
     $('<div><b>'
    + escapeTag(item.location.city)
          + escapeTag(item.forecasts[0].dateLabel)
    + '</b><br><img src='+escapeTag(item.forecasts[0].image.url)+'><br>'
          + ' <small>'
          + escapeTag(item.forecasts[0].telop)
          + '</small><br><small>copyright livedoor 天気情報</small>'
          + '</div>'
     ).appendTo('#report');
    });
});
</script>
</head>
<body>
<div>
 <div id="report">
 </div>
</div>
</body>
</html>

こんな感じで表示されます。ちょっとアイコン画像ダサイなぁー。今時っぽくない。まぁちゃんと表示されます。

まとめ

結構気に入ったのでこのブログのサイドバーにも上記サンプルをベースに作ってみたものを、設置してみました。東京の天気予報を表示しています。この記事の左に表示されているヤツね。

2013/03/07