調べてみたところ、商用で使えるのは、有償の物ばかりだった。
結局金か。。。と思ったけど、個人利用は無償の物もあるので、勉強がてら作ってみる。
ほとんど、見たサイトのまんまとなる。
まずは、情報提供先について、さっきも書いたけど、商用利用可能は有償ばかり。
先に調べてまとめて居られる方がいたので、リンクをお借りする。
Webサイト制作やアプリ開発で使える天気予報APIのまとめ
http://hello-apis.blogspot.jp/2013/03/webapi.html
このなかで、今回は Livedoor の Weather Hacks を利用してみようと思う。
LivedoorWeather Hacks
http://weather.livedoor.com/weather_hacks/
いわゆる Web API と言う物の様だ。
以下の URL にパラメータを付けてアクセスすれば、お天気情報が JSON で返ってくる。
(他の形式もサポートしていたらしいが、現在は JSON 形式のみの様だ)
http://weather.livedoor.com/forecast/webservice/json/v1?city=[cityID]ここで渡す cityID については、
「 全国の地点定義表（RSS） 内の「1次細分区（cityタグ）」のidをご参照下さい。」
と、書かれている通りのIDを渡せば良いのだが、RSS形式で提供されている様だが、どうやってみたら良いか分からなかった。
そこで、 「1次細分区」をキーワードに検索をかけて見たところ、ID の情報は出てくるが、例に書かれてある数値とはかけ離れていた(例えば、佐賀県 伊万里=410020 と書かれてあるが、見つけたIDでは、佐賀県 伊万里は、123)。
何か変換がいるのか？それとも。。。と悩んだが結果的には、ID のコード体系が変わっている事が分かった。
それは、新旧のコード比較をしている方のページより発覚した。
『Weather Hacks』のRSSデータ配信が停止 1次細分区(cityタグ)の新旧対応表を作ってみた
http://gurizuri0505.halfmoon.jp/20130511/56720
たぶん、上に書いてある RSS には、変更後のコードが書かれているのであろう。
これで、取得条件は整った。
あとは、これを使って処理を行い表示するだけとなった。
手元で簡単にと言う事で、JavaScript で処理できる方法を調べた。
Livedoor の天気予報API（JSON版）を使ってブログパーツを作ってみる
http://hello-apis.blogspot.jp/2013/03/livedoor-apijson.html
そのまま、ドンピシャでやりたい事を行っている人がいたので、早速コードを拝借して確認してみた。
コードを確認しているときに、これまた同じ方の「JSONをJSONPに変換するYahoo PipesのAPI」の記事をみて、改めてこのような仕組みを有ることを学んだ。
そして、ローカルでファイルを作成し表示してみた。
おお！完璧。
取得したデータには、明日や明後日のデータやその他有るので、何かの機会に使ってみようと思う。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
escapeTag = function(string) {
if (string == null) return string;
return string.replace(/[&<>"']/g,
function(match) {
return {
'&' : '&',
'<' : '<',
'>' : '>',
'"' : '"',
"'" : '#&39;'
}[match];
});
};
var city = '130010'; // Tokyo
city = '380010'; // Matsuyama ← 松山で上書き
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> +)
'
+ ' <small>'
+ escapeTag(item.forecasts[0].telop)
+ '</small> <small>copyright livedoor 天気情報</small>'
+ '</div>'
).appendTo('#report');
});
});
</script>
</head>
<body>
<div>
<div id="report">
</div>
</div>
</body>
</html>
2013/09/10見返してみると、タグがそのまま展開されているので、修正した。
0 件のコメント:
コメントを投稿