某サイトに、天気予報としてworldweatheronlineのAPIつこうてみる。
↑こんなん感じ
他にもAPIを数種類つかってるけど、認証関係や返される形式の都合でPHPに処理してもらってた。
今回は特に障害もなさげだったので定番（らしい）のjquery（ajax）でjson処理することに。
使ったのはhttp://www.worldweatheronline.com/
無料だったのと、リファレンス関係あったからなんとなく。
ドキュメントはhttp://developer.worldweatheronline.com/documentation
あたりご確認願います。
で、以下みたいなので動いたり。
$.ajax({
url: "http://api.worldweatheronline.com/free/v1/weather.ashx?q=緯度経度とか&format=json&num_of_days=日数&key=取得したキー",
dataType: 'jsonp',//データはjsonpだよ
timeout : 2000,//タイムアウトを2秒に設定
}).done(function(data) {
$("#weather img").css("display","none");//ローディング消す
$.each(data.data.weather, function(i,val) {
$("<div/>")
.append((val.date).slice(-2) + "日")
.append("<br/>")
.append($("<img/>").attr("src", val.weatherIconUrl[0].value))
.append("<br/>")
.append("<span class='max'>" + val.tempMaxC + "℃</span>")
.append("<br/>")
.append("<span class='min'>" + val.tempMinC + "℃</span>")
.appendTo("#weather");
});
}).fail(function() {
$("#weather").html("チョットお休みかも…");
});
簡単な流れとしては…
個別に設定してる緯度経度とかAPIキーを、ajaxのurlオプションで渡す
↓
done（successとかもOK）で成功時の処理を、
fail（errorとかもOK）で失敗時の処理をってーことみたい。
↓
eachで個数回す的な。
返ってきてるデータをCSSで整形して表示。
画像返すのあったから天気マーク作らず済んだった
たまーに503でるけど放置ｗ
いろいろ怪しいとこもあると思うので、もし参考にされる場合は「ご利用は計画的に」って奴です。
[amazonjs asin=”4627847327″ locale=”JP” tmpl=”Small” title=”Webアプリケーション構築入門(第2版) – 実践! Webページ制作からマッシュアップまで”]
