APIを使ったブログパーツを作ろう!

2009年2月13日(金)
山下 美緒

天気予報APIの利用方法

 それでは、「Weather Hacks」で取得できるXMLデータの詳細をみてみましょう。サービスの概要は、livedoor「Weather Hacks」お天気Webサービス仕様(http://weather.livedoor.com/weather_hacks/webservice.html)で、確認してください。

 このサービスでは、地域別の天気情報がXML形式で提供されており、リクエストするXMLのリクエストパラメーターは、下記のような仕組みになっています。

基本URL + 地域別のID(例:東京の場合は13) + 日付(day=today)
http://weather.livedoor.com/forecast/webservice/rest/v1?city=[地域別ID]&day=tomorrow

 地域別IDは、1次細分区定義表(http://weather.livedoor.com/forecast/rss/forecastmap.xml)で確認できます。この地域別IDを変更することにより、各地の天気情報を配信することができます。

flashvarsを使って、ブログにあわせてカスタマイズ

 さて今回のサンプルでは、それぞれのブログにあわせて、表示する地域をカスタマイズできるような機能もつけたいと思います。

 前述の通り、天気予報のxmlを取得する際のリクエストパラメーターの地域IDを変更することで、それぞれの地域の天気予報を表示することができます。今回は、ブログ上に貼(は)り付けるHTMLタグ内で表示したい地域IDを指定し、その値をFLASHからXMLを読み込む際のリクエストパラメーターに反映させていきます。

 リクエストパラメーターを変更する手順は下記のようになります(図2とあわせてご覧ください)。

 1. ブログに貼(は)り付けられるHTMLタグの中で、変数(areaNum)へ任意の地域IDを指定します。このとき、まず地域IDを変数に入れた後に、ブログパーツ表示用のJavaScript(tenki.js)を読み込むようにしてください。

 2. ブログパーツ表示用のJavaScriptの「flashvars」のパラメーターへ、1で指定した変数(areaNum)を組み込みます。なお、ActionScript 3.0の場合、FlashVarsで読み込んだ値は、メインタイムラインの「loaderInfo.parameters」で取得でき、オブジェクトに格納されています。

 3. XMLを読み込む際の、リクエストパラメーターを変更します。これで、ブログのHTMLタグ内で指定した地域IDをFLASHへ反映させる仕組みが整いました。

株式会社ピクルス
大学卒業後、JAの金融窓口の事務を2年間行った後、一念発起しWebの世界へ飛び込む。eラーニングコンテンツの制作会社やWeb系の制作会社を経て、2007年より(株)ピクルスに勤務。現在は、広告キャンペーン系のサイトの企画/制作、特にFlashやXHTML/CSSなどのWebコンテンツ全般の実装を行っている。ブログパーツを中心としたデジタルアイテムの配信サイト「くるくるパーツ(http://parts.kuru2jam.com/)」も運営中。最近は、上越線が気になっています。
http://www.pickles.tv/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています