haraです。

今週の時計は、先週と見た目があんまり変わっていませんが、実はKuker時計から発展させてお天気Kuler時計になっています。

 

 

liveDoor天気API「Weather Hacs」

今回天気の情報として利用したのは、liveDoor天気のAPI、weather Hacksです。
といってもこのサービス単体ではFlashには対応していないため、直接APIをたたこうとするとセキュリティサンドボックスエラーになって使えないです。これは困りました・・

yahoo!pipes

そこで仲介役にyahoo!pipesを使うことにします。
yahoo!pipesはweb上のリソースを引っ張ってきて出力してくれるwebサービスです。これを使えばうまくできるかも・・

しかしyahoo!pipesの壁は自分には厚く、こちらのrest式のお天気APIのタグをうまく出力することができませんでした。ただ、各地方のお天気情報RSSは出力することができるので、これを利用して、今回は東京限定ということにします。

yahoo!pipesのアウトプットのドメインはhttp://pipes.yahoo.comということになっていますが、Flashでアクセスできるようにcrossdomain.xmlが設定されているのはhttp://pipes.yahooapis.comのドメインになります。
よって、urlLoaderのロードURLはhttp://pipes.yahooapis.com〜ということになります。
 

最高気温／最低気温／天気

今回はざっくりこの３点。晴れのち曇りとか晴れのち雨も面倒だから晴で表示しちゃうことにします。
タグの中で、この情報が入っているのはdescriptionの「〜〜」の部分。
ここからStringを操作して切り取ってしまいます。

 

var wXML:XML = new XML(weatherLoader.data);
var todayString:String = wXML.channel.item[1].description;
maxTemp = todayString.split("最高気温は")[1];
maxTemp = maxTemp.split("℃")[0];
minTemp = todayString.split("最低気温は")[1];
minTemp = minTemp.split("℃")[0];
var wed:String = todayString.split("天気は")[1];
switch(wed.substr(0,1)) {
 case("晴"):
 todayWed="shine";
  break;
 case("雨"):
  todayWed="rain";
  break;
 case("曇"):
  todayWed = "cloud"
  break;
 }

 

気温の色への反映

これだけだと普通なので、前回のKuler時計とつなげます。
最高気温に対して色を割当て（気温高：赤、低：青）、これをKulerの検索に投げます。
これは画面のすみにあるグラデーションで塗られたビットマップデータからgetPixelで色を取得することで割り当てます。

 

public function getColor(n:int):Number
{
 var col:Number;
 col = bmd.getPixel(colorGage.width/2, colorGage.height-colorGage.height*n*0.01);
 colorHandle.y = colorGage.y+colorGage.height-colorGage.height*n*0.01;
 return col;
}

 

これで完成です。

今回はlivedoor weather Hacksを使ってみましたが、rssから半ば無理矢理情報を取り出す形になってしまってます。
もうちょっと自由度が高いAPIも探してみたいですね。
今回のyahoo!pipesから気温と天気を取り出すコードのところをwonderflに上げました。ご参考にどうぞ〜