お天気情報WebAPIを使ってGIF画像を表示する

2012年1月27日(金)
PROJECT KySS

今回は、Livedoorの提供している「お天気Webサービス」を使って、各地の天気予報を表示してみます。Livedoorの「お天気Webサービス」については下記のURLを参照してください。
→参照:お天気Webサービス(livedoor天気情報)

このWebサービスで返されるXMLデータのお天気画像には、GIFが使用されています。Windows PhoneではPNG、JPGの画像には対応していますが、GIFには対応していません。そこで、前回同様、ImageToolsというLibrayを使用してGIF画像を表示します。ImageToolsに関しては、「第3回 画像にFilterをかけてPicturesHUBに保存する」を参考にしてください。

まずは、このプログラムで実装する機能の動作を、下記に解説しておきます。このサンプルは、エミュレーターで動作しますが、実機(現時点ではauのIS12T)での動作確認を基本とします。

実機にプログラムをデプロイし、表示される「市」の入力欄に市を入力します。都道府県は入力しないでください。例えば、「愛媛県松山市」の場合は、単に「松山」とだけ入力します。「東京都」の場合は「東京」とだけ入力します。[実行]ボタンをタップすると、今日の天気の画像とテキストが表示されます。表示されている画像はGIF画像です。今日、明日、明後日の3日分の予報を見ることができます。[>>]で1日後の予報を見ていくことができます。[<<]で、前日の予報に戻ることができます。地域と日付も表示されます(図1)。

図1:「東京」の今日、明日、明後日の天気予報を表示している(クリックで拡大)

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

実機(IS12T)で動かした動画はこちらです。

プロジェクトの作成

VS 2010のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。次に、「Windows Phone アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「WP7_GifWeatherService」という名前を付けています。Windows Phoneのバージョンは7.1を選択します。

VS2010のメニューから[プロジェクト(P)/参照の追加(R)]と選択して、System.Xml.Linqを追加してください。また、ImageToolsを解凍したフォルダのbin\phoneフォルダ内にある、ImageTools.dll、ImageTools.IO.Gif.dllを追加しておいてください。これらのDLLはGIFを表示させるのに必要です。

MainPage.xamlの編集とコントロールの追加

x:NameがPageTitleというTextBlockのTextプロパティに「天気予報」と指定します。ツールボックスから、TextBlockコントロールを4個、TextBoxコントロールを1個、Buttonコントロールを3個、Imageコントロールを1個配置します(図2)。ImageコントロールのStretchプロパティにはUniformを指定します。

Stretch列挙体に付いては、下記のURLを参考にしてください。
→参照:Stretch 列挙体(msdn)

図2:各コントロールを配置した(クリックで拡大)

areaTextBlockのTextWrappingプロパティにはWrapを指定して文字の回り込みを可としておきます。また、最初の状態では、prevButtonとnextButtonのIsEnabledのチェックを外し、使用不可としておきます。お天気情報が表示された時点で、これらのボタンは使用可能になります。

  • 「お天気情報WebAPIを使ってGIF画像を表示する」のサンプルプログラム

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

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

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

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

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