ネットワークを使ったアプリを作ろう

Universal Windows Platformが動作するWindows 10 PCやWindows 10 Mobileなどのデバイスは常にネットワークに接続していることが多く、ユーザーはアプリに最新のコンテンツが表示されることを求めます。

なのでアプリはインストールされてからもなるべくインターネットに接続し、最新の情報を取得しアプリのコンテンツとして表示する必要があります。アプリが最新のコンテンツを取得するためには、Web APIサーバーに対し、Http通信を行ってデータを取得しなければいけません。今回は、そのWeb APIを利用して最新のデータを利用、表示するようなアプリを作ってみましょう。

1. Web APIとは

Web APIとはアプリなどのクライアントプログラムに対し、Webサーバーが一定のフォーマットでデータを返すことによってWebサーバーの中にあるコンテンツをクライアントプログラムで取得する仕組みのことを指します。

例えば最新の天気を表示するアプリでは、天気情報を持っているサーバーがWeb APIとして天気情報を公開し、クライアントアプリでそのWeb APIを利用して天気情報を取得、表示することで作られています。

そのようなWeb APIは多くの組織が提供しており、例えば以下のようなWeb APIがあります。

・Open Weather Map (天気情報)
・Google News(ニュース情報)
・Cognitive Services(人工知能)

多くのWeb APIでは、サーバーに対しHttpのリクエストを送るとサーバーにあるデータをjsonやxmlなどのフォーマットで返してくれます。

そのようなフォーマットでデータが記述されているため、受信したクライアントアプリでは構造化されたデータを簡単に扱うことができます。

2. Web APIを使う準備をしよう

今回はOpenWeatherMapという天気情報を取得できるWeb APIを利用して天気を表示するアプリを作ってみましょう。

まずはSignUpページからアカウントを新規作成しましょう。

アカウントを新規作成することができたら、APIキーのページから、APIキーを取得しましょう。

3. アプリを新規作成しよう

今回はUniversal Windows Plaftform(UWP)のアプリを新規作成してみましょう。

アプリプロジェクトの新規作成に関しては第1回の記事を参考にしてください。

UWPアプリのプロジェクトを新規作成できたらMain.xamlを編集してユーザーインターフェースを記述しましょう。今回は2つのTextBlockと1つのButtonを設置します。各コントロールのプロパティは以下のようにします。

プロパティ名	値
Text	現在の天気

プロパティ名	値
Name	textWeather

プロパティ名	値
Content	取得

続いてMainPage.xamlのデザイナーに表示されているButtonをダブルクリックしましょう。MainPage.xaml.csにButtonのClickイベントのイベントハンドラが生成されます。

XAMLコントロールのプロパティ編集やイベントハンドラ生成については第2回の記事を参考にしてください。

4. 必要なライブラリをインストールしよう

今回利用するOpenWeatherMapではWeb APIのデータをjsonというフォーマットで取得することができます。

UWPではjson.netというライブラリを利用すると非常に簡単にjsonをあつかうことができるのでjson.netというライブラリをインストールしましょう。

json.netはNugetというパッケージマネージャを通してインストールすることができます。Visual Studioのメニューバーから[ツール]>[Nugetパッケージマネージャー]>[ソリューションのNugetパッケージの管理]をクリックします。

[参照]タブをクリックし、検索ボックスにjson.netと入力します。検索結果に出てくる、json.netのパッケージを選択し、右側のにある自分のソリューション名を選択し、[インストール]をクリックします。

5. HttpClientを利用してWeb APIにアクセスしよう

まずはHttpClientとJson.netを使うための名前空間をusingしましょう。書く場所はMainPage.xaml.csです。

?

using Windows.Web.Http; using Newtonsoft.Json.Linq;

続いてButtonのClickイベントハンドラ内にWeb APIにアクセスするコードを記述しましょう。{your api key here}の部分には先ほど取得したOpenWeatherMapのAPIキーを入れてください。

zipCode変数は天気を取得する地域の郵便番号を指定します。今回は[東京都 千代田区 飯田橋]の郵便番号をサンプルとして入れています。郵便番号の後に、コンマを挟んで国のコードを入れることを忘れないでください。

どのようなリクエストを送るとどのような結果が返ってくるかについてはOpenWeatherMapのドキュメントを参考にしてください。

?

//ここにボタンがクリックされた時の処理を書く string apiKey = "{your api key here}"; string zipCode = "102-0072,jp"; string endpoint = string.Format(     "http://api.openweathermap.org/data/2.5/weather?zip={0}&appid={1}",     zipCode,     apiKey     ); //HttpClientを使って天気情報を取得する HttpClient client = new HttpClient(); HttpResponseMessage result = await client.GetAsync(new Uri(endpoint)); string json = await result.Content.ReadAsStringAsync(); //jsonを解析して結果を取得する JObject root = JObject.Parse(json); string weather = root["weather"].First()["main"].ToString(); textWeather.Text = weather;

今回返ってくるjsonは以下のようなフォーマットになっており、weather配列の1番目のmainオブジェクトに天気情報が入っているため、json.netのJObjectクラスを利用して結果を取り出しています。

?

{     //省略     "weather": [         {             "id": 500,             "main": "Rain",             "description": "light rain",             "icon": "10n"         }     ]     //省略 }

ここまでできたら[F5]キーを押してデバッグを開始してみましょう。

アプリが起動し[取得]ボタンを押すと、指定の地域の天気を取得することができます。

 

 

6. デバイスがオフラインの時も動くようにしよう

先ほどまで作成したアプリをデバイスのネットワークをオフラインにして実行してみましょう。おそらくエラーが発生してアプリが強制終了されたと思います。Windows 10 PCやWindows Phoneはオンラインの時が多いですが、オフラインの場合でもアプリが落ちることなく動き続けることは非常に重要です。

HttpClientクラスはネットワークエラーが発生したとき、例外を発生させるのでその例外をキャッチすることによってネットワークエラー時にもアプリを落とすことなく、対処することができます。

C#で例外をキャッチするにはtry catch構文を利用し、例外が発生しそうなWeb APIへアクセスする部分をtryブロックで囲み、例外が発生した時の処理をcatchブロックに書きます。

今回は例外が発生した時にダイアログを表示するようにしてみましょう。

?

try {     //Web APIにアクセスするコード } catch (Exception ex) {     var dialog = new Windows.UI.Popups.MessageDialog("エラーがおきました");     dialog.ShowAsync(); }

上記のコードを先ほどのWeb APIへアクセスするコードの外側に書きます。

もう一度デバイスをオフラインにし、デバッグを開始してみましょう。今度はネットワークエラーの時、ダイアログが表示され、アプリも終了しませんでした。

今回はWeb APIを利用してWeb上にあるリソースを利用できるアプリを作成しました。さらに、オフライン時の例外にも対処できるような実装も行いました。このように、デバイスがいかなる時でもアプリが強制終了することなく動作し、デバイスがオンラインになったときにアプリに最新情報を表示するアプリは非常にユーザーによい体験を与えることができるため皆さんも積極的にWeb APIを利用し、最新情報を表示するアプリを作成してみましょう。