第7回　天気予報APIを活用して、快適な秋を過ごそう!【特集サンデープログラミング】

myLab IDをお持ちでない方

>> デスクトップウィジェット

>> ウェブウィジェット

>> 携帯ウィジェット・その他

>> 機能分類

トップ>特集

第7回　天気予報APIを活用して、快適な秋を過ごそう!

アップフロンティア株式会社のクロサキです。社内では主にウィジェットに表示させるデータを提供するために必要なWebアプリの作成及び運用を担当しています。

前回までのサンデープログラミングでは、Adobe AIRやYahoo! ウィジェットなど、どのプラットフォームでウィジェットを作るかをご紹介してきました。

しかし、実際にウィジェットを作ろうと思う時は、「AIRでウィジェットを作りたい！」というよりも、「twitterのタイムラインを表示させるブログパーツが欲しい！」とか、「iCalやGoogleカレンダーと連携するスケジューラーって無いかな？」のように、機能や表示させるコンテンツのことを考えていると思います。

そこでどのコンテンツを使うかが問題になりますが、Web APIと呼ばれる機能を利用して、他のサイトやコンテンツプロバイダーからデータを提供してもらうのが一番手っ取り早いと筆者は考えます。現在では、たくさんのデータがWeb APIとして、ユーザーに提供されています。
これを利用しないのはとてももったいない！

弊社も財団法人日本気象協会と共同で「天気予報API」というWeb APIを提供しています。
今回はこの天気予報APIでのコンテンツの実装方法を紹介したいと思います。

1. Web APIってどうよ？

天気予報APIの概要

　天気予報APIは、天気予報や様々な指数情報をウィジェットやブログパーツ、Flashなどから利用するため、データをXMLで提供しているサービスです。データは47都道府県単位もしくは、全国142地域別単位で提供されていますので、ある特定の地域の情報だけを取得することもできますし、全国の気象データを県別に表示させることも可能です。

「天気予報」と名乗ってはいますが、このAPIの特徴は天気予報に加えて，ユニークかつ多種類の指数情報を提供していることにあります（詳しくはサイトをご参照ください）また，この後いくつかの指数についてご紹介したいと思います）。

みなさんもテレビの天気予報で、翌日の洗濯指数や花粉の飛散予測を紹介されているのを見たことがあると思います。そんな日々の生活に身近な気象情報を季節に合わせて提供しています。

通常は法人や各種団体を対象にデータの提供を行っているため、個人でAPIを利用することはできないのですが、今年の6月末から活用アプリコンテストを開催しており、みなさんもサイトからエントリー登録していただくと、期間限定でAPIを利用することができます。

2 天気予報APIの実装例

実装サンプルを紹介

では、天気予報APIを利用したサンプルプログラムを例に利用方法を紹介しましょう。
下図を見てください。
サンプルアプリイメージ
こちらは、明日の天気と洗濯指数のデータXMLをJavaScriptを使って表示しているプログラムです。
標準では東京のデータを表示していますが、プルダウンから都市名を選択して、Click!ボタンをクリックすると、全国10都市のデータを表示させることができます。

サンプルプログラムはページが呼び出されると、setting.jsのloadXml関数に設定されている情報をもとに天気予報と洗濯指数のデータを問い合わせます。データは以下のルールで取得する事が可能です。

http://w002.tenkiapi.jp/（ユーザアカウント）/（情報名）/?p1=（地域番号）（天気予報のみ、&p2=（予報日））

（例）東京の天気予報のXMLのアドレス
http://w002.tenkiapi.jp/9402cbe25a2e225ff55c9ed2cc784b80c22f8b39/daily/?p1=4410&p2=02

問い合わせたデータは、同じくsetting.jsのcallback関数でデータを読み込みます。
すると以下のようなXMLファイルを取得できます。

<forecast areaCode="4410" date="2009-08-21" time="17:00:00"> 
 <daily dateName="tomorrow" date="2009-08-22"> 
  <wDescription telop="200"><![CDATA[曇]]></wDescription> 
  <temp min="26" max="32" /> 
  <probPrecip time="00-06" precipCode="0" prob="10" /> 
  <probPrecip time="06-12" precipCode="0" prob="10" /> 
  <probPrecip time="12-18" precipCode="0" prob="30" /> 
  <probPrecip time="18-24" precipCode="0" prob="30" /> 
 </daily> 
</forecast>

このファイルのポイントとなる部分は主に以下の部分です。
情報によってファイルの構造に違いはありますが、以下をおさえておけば、必要な情報の取得ができるようになると思います。

<forecast areaCode="地域番号（4桁の数字）" date="2009-08-21" time="17:00:00"> 
 <daily dateName="いつの予報か（今日，明日，明後日）" date="予報日"> 
  <wDescription telop="天候を表す番号（3桁100〜400番台の数字）"><![CDATA[天候]]></wDescription> 
  <temp min="予想最低気温（表示がない場合有）" max="予想最高気温（表示がない場合有）" /> 
  <probPrecip time="00-06" precipCode="0" prob="0時から6時の降水確率（0〜100）" /> 
  <probPrecip time="06-12" precipCode="0" prob="6時から12時の降水確率（0〜100）" /> 
  <probPrecip time="12-18" precipCode="0" prob="12時から18時の降水確率（0〜100）" /> 
  <probPrecip time="18-24" precipCode="0" prob="18時から24時の降水確率（0〜100）" /> 
 </daily> 
</forecast>

あとはこのファイルを解析して必要なデータを取り出し、データの整形を行って、ページに書き出します。今回はファイルの解析用にKawa.netさんのXML.ObjTreeライブラリを利用しています。利用方法は省略しますが、JavaScriptでXMLの操作を行う際には非常に便利なライブラリです。

function loadXml(code){
	var userid = "9402cbe25a2e225ff55c9ed2cc784b80c22f8b39"; // 事務局から配布されるユーザーID（APIキー）に差し替えてください
	var areaid = code;                                       // 4桁の地域番号
	var domain = "http://w002.tenkiapi.jp/";
	var urls = new Array();
	urls[0] = domain + userid + "/daily/?p1=" + areaid + "&p2=02";
	urls[1] = domain + userid + "/wash/?p1="  + areaid;
	loadCrossOver("callback", urls);
}

JavaScriptでのXML読み込みTips

ご存知の方も多いとは思いますが、JavaScriptはセキュリティ仕様上、呼び出されたドメインとは別のドメインにあるXMLファイルからデータを読み込むことはできません。

このため、今回はfiregobyさんで公開されているCrossOverライブラリを利用させて頂きました。
CrossOverライブラリはFlashのデータ保持領域にXMLのデータを取り込んで、JavaScriptにデータを渡すことができます。読み込むのは天気情報と洗濯情報の2つのXMLなのですが、提供されているライブラリでは1度に1つのデータ保持領域を作成するため、1つのXMLしか読み込むことができませんでした。そこで、CrossOver.jsを改良して、1度に複数のデータ保持領域を作成し、それぞれJavaScriptにデータを渡すようにしました。

function loadCrossOver( callback, url ){
	var cnt = url.length;
	
	// urlの個数分、データ領域をページに書き出す。
 	for (i = 0; i < cnt; i++) {
		document["crossover" + i].load( callback, url[i] );
	}
}

3 コンテストを開催しています。

以上のように、天気予報APIではさまざまな指数や天気予報を提供していることを紹介してきました。前述の通り、現在天気予報APIのサイトにて天気予報API活用アプリコンテストを実施中です。コンテスト期間内については、エントリー登録していただくとAPIのデータを利用することができます。

ぜひコンテストにエントリー登録して多くの天気予報や指数情報に触れていただき、これらの情報を活用したアプリを作ってみてください。みなさんのアイディアにあふれたアプリをお待ちしています。

特集 : 昼下がりのレポート