Windowsフォーム開発者のためのWindows 10 UWPアプリ開発入門（後編）：特集：UWPとは何か（5/5 ページ）

» 2015年10月06日 05時00分公開

[山本康彦，BluewaterSoft／Microsoft MVP for Windows Platform Development]

6. Webサービスの利用～「クラウド型」アーキテクチャ

　UWPアプリでは、上記のようにファイルアクセスが制限されていたり、あるいはコードから印刷を自動的に開始できなかったりする。また、ADO.NETのようなデータベースサーバーにアクセスする機能も用意されていない。前述したように、エンドユーザーのプライバシーやセキュリティを侵害するようなアプリを作りにくくしてあるのだ。

　そうなると、データベースを使う業務アプリはどうやって作ればよいのだろう？セーブポイントやハイスコアを記録するゲームアプリはどうすればいいのだろう？その答えはマイクロソフトが最近よく口にしている「クラウドファースト」という語にある。業務アプリのデータベースや基幹業務のロジック、ゲームアプリのスコアデータなどは、クラウドに置くのである。そして、UWPアプリは、クラウドに対するフロントエンドとして設計するのだ。筆者はこれを「クラウド型」システムアーキテクチャと呼んでいる（次の図）。

「クラウド型」システムアーキテクチャ
筆者の造語である。すでに適切な呼び名があるかもしれない。
UWPは、このようなアーキテクチャを前提として設計されている。
基幹サーバー群と一般のクライアントとはネットワークを分離し、クライアントとサーバーの間のやり取りには必ずWebサービス（＝Web API）を介するようにする。クライアントのアプリはWebサービスのフロントエンドとして作成し、業務アプリでは情報の取得は必要最小限にとどめる。データを全件取得するといった「危険な」Webサービスを作らない限り、クライアントがサイバー攻撃を受けたとしても重要な情報が大量に漏えいするリスクは極めて低くなるだろう。また、重要な情報の印刷（例えばDM封筒の大量印刷）などのタスクも基幹ネットワーク側の物理的に隔離された場所で行うようにする。
このような構成にすることにはもう一つのメリットもある。デバイスをまたいだユーザーエクスペリエンスを提供できるのだ。例えば自宅のPCで読んでいた小説や遊んでいたゲームの続きを、モバイルデバイスで行えるのである。逆にいえば、「モバイルファースト」時代に対応するアプリを作るには「クラウドファースト」なシステムアーキテクチャが必要になるのだ。

　クラウドのフロントエンドとしてのUWPアプリは、クラウドと主にHTTPプロトコルで通信する。すなわち、Web APIの利用がメインになる。HTTPのリクエストとして処理をクラウドに要求し、処理結果をJSONフォーマットやXMLフォーマットで受け取るのである。そのため、UWPアプリのAPIには、JSONフォーマットやXMLフォーマットを扱うものが用意されている。さらには、XMLフォーマットの一種であるRSSフィードに特化した名前空間（Windows.Web.Syndication名前空間）などもあるのだ。

　ここでは、JSONフォーマットで結果を返してくるWeb APIを利用するUWPアプリの作り方を紹介しよう（別途公開のサンプルでは、「S5_WebAPI」ディレクトリの下にある「S5_02_Uwp」プロジェクト）。

UWPアプリで「現在の天気」Web APIを利用する

　Web API側の構築から説明していたのでは紙面が足りないので、ここでは既存のWeb APIを利用する。現在では、オープンなWeb API（誰でも使えるWeb API）が数多く公開されている。その中から、OpenWeatherMap社のWeather APIを使わせてもらおう。このWebサービスは、特定の場所の天気を教えてくれるものだ。

　例えば、東京の現在の天気を問い合わせるコードは次のようになる。

private async void GetWeatherDataAsync()
{
// 例：東京の現在の天気を、摂氏で取得する
var url
= "http://api.openweathermap.org/data/2.5/weather?q=Tokyo,jp&units=metric";

// Web APIを呼び出して、結果をJSONデータで得る
var hc = new Windows.Web.Http.HttpClient();
string jsonString = await hc.GetStringAsync(new Uri(url));

// JSONデータから必要なデータを取り出して、UIのデータコンテキストにセットする
rootGrid.DataContext = (new WeatherData(jsonString)).Data;
}

東京の現在の天気を問い合わせるコード（C#）
最後の行に出てくる「WeatherData」クラスについては次で説明する。また、画面には「rootGrid」という名前のGridコントロールが配置してある（後述）。
ご覧のように、Web APIを呼び出して結果をJSONフォーマットの文字列として受け取るまでのコードは、実に簡単だ（認証が必要な場合は少々面倒になる）。
なお、ローカル変数「url」の中の「q=Tokyo,jp」はお分かりだろう。天気を知りたい場所を指定するパラメーターである。そして、「units=metric」は温度の単位として摂氏を指定するパラメーターだ。

　次に、JSONフォーマットの文字列として受け取った結果を、画面に表示できるデータへと変換する。それにはWindows.Data.Json名前空間のJsonObjectクラスが利用できる。例えば、JSONフォーマットの文字列を匿名型のデータに変換するコードは、次のクラスのように書ける。

public class WeatherData
{
// 画面に表示するための匿名型データ
public object Data { get; private set; }

// コンストラクターはJSONフォーマットの文字列を受け付けられるようにする
public WeatherData() // XAMLにバインドするため引数なしのコンストラクターも必要
{
}
public WeatherData(string json)
{
    LoadData(json);
}

// JSONフォーマットの文字列から匿名型データを作る
private void LoadData(string json)
{
    // JSONフォーマットの文字列からJsonObjectオブジェクトを作る
    var data = new Windows.Data.Json.JsonObject();
    bool success
        = Windows.Data.Json.JsonObject.TryParse(json, out data);

    if (success)
    {
      // JsonObjectオブジェクトから画面表示に必要なデータを取り出し、
      // 匿名型のオブジェクトに詰め込む
      Windows.Data.Json.JsonObject weather
        = data.GetNamedArray("weather", null)?.GetObjectAt(0);
      Windows.Data.Json.JsonObject main
        = data.GetNamedObject("main", null);
      string iconId
        = weather?.GetNamedString("icon", string.Empty);
      Data = new
      {
        Main = weather?.GetNamedString("main", "(不明)"),
        Temp = main?.GetNamedNumber("temp", -999),
        TempMin = main?.GetNamedNumber("temp_min", -999),
        TempMax = main?.GetNamedNumber("temp_max", -999),
        Place = data.GetNamedString("name", "(不明)"),
        IconUrl = iconId != null
                  ? $"http://openweathermap.org/img/w/{iconId}.png"
                  : null,
      };
    }
}
}

JSONフォーマットの文字列を匿名型のデータに変換するクラスの例（C#）
JSONフォーマットの文字列を解析してJsonObjectオブジェクトを生成するには、JsonObjectクラスのTryParseメソッドを使う。
JsonObjectオブジェクトから必要なデータを取り出すコードは、少々煩雑になる（さすがにJsonObjectオブジェクトをそのままデータバインドしても上手くいかないようだ）。
太字にした部分が、画面に表示するプロパティである。
なお、ここで匿名型を使っているのは、データのためのクラス定義を（紙面の都合で）書きたくなかったからである。コンパイル時に型の解決ができないため、データバインドには実行時バインディングしか使えない。
また、このコードではVisual Studio 2015から利用可能になったNull条件演算子と補間文字列（Interpolated Strings）を使っている。

　あとは、次のコードのようにして画面にバインドすれば完成である。

<Grid x:Name="rootGrid" ……省略……>
……省略……
<TextBlock ……省略……>Weather at <Run
    Text="{Binding Place}"/></TextBlock>
<StackPanel ……省略……>
    ……省略……
    <Image Source="{Binding IconUrl}" ……省略…… />
    <StackPanel ……省略……>
      <TextBlock Text="天候"/>
      <TextBlock TextAlignment="Right"
        Text="{Binding Main}"/>
    </StackPanel>
    <StackPanel ……省略……>
      <TextBlock Text="現在気温" />
      <TextBlock TextAlignment="Right"><Run
        Text="{Binding Temp}"/>℃</TextBlock>
    </StackPanel>
    <StackPanel ……省略……>
      <TextBlock Text="最低気温" />
      <TextBlock TextAlignment="Right"><Run
        Text="{Binding TempMin}"/>℃</TextBlock>
    </StackPanel>
    <StackPanel ……省略……>
      <TextBlock Text="最高気温" />
      <TextBlock TextAlignment="Right"><Run
        Text="{Binding TempMax}"/>℃</TextBlock>
    </StackPanel>
</StackPanel>
……省略……
</Grid>

現在の天気を表示するUIの例（XAML）
太字の部分がバインドしているプロパティ名である。
このGridコントロール（名前「rootGrid」）のDataContextプロパティには、前述したコード（「GetWeatherDataAsync」メソッド）で「WeatherData」クラスのオブジェクトがセットされる。DataContextプロパティの内容（＝データコンテキスト）は、そのコントロールの中に配置したコントロール（この例ではTextBlockコントロールなど）にも引き継がれる。そのため、それぞれのコントロールではデータコンテキストを所与のものとして、その中のプロパティ名を指定するだけで目的のデータをバインドできるのである。

　実行すると、次の画像のように東京の天気データが表示される。

実行結果
東京の天気と気温が表示できた。天気のアイコン画像もWebサービスから取得している。

　このように、Web APIを利用するUWPアプリを簡単に作成できるのである。

【コラム】　Web APIの利用についてさらに詳しく！

　UWPアプリでRSSフィードを取得する方法については、次の記事をご覧いただきたい。Windows 8.1時代の記事であるが、Windows 10でも基本は同じだ。

連載：Windowsストア・アプリ開発入門：第6回　データを取得して表示する

　Web APIによっては、リクエストをJSONデータで送信することもある。そんなときは次の記事が参考になる。

MSDN Blogs： HttpClient を使って JSON データを POST する方法

　本文ではJsonObjectクラスを使ったが、JSONデータと同じ構造のデータクラスを定義した場合にはDataContractJsonSerializerクラス（System.Runtime.Serialization.Json名前空間）も使える。その場合はデータを詰め替える手間が不要になる。次の記事を参考にしてほしい。

MSDN Blogs： WinRT APIでJSONフォーマットをデシリアライズする方法
MSDN Blogs： WinRT APIでJSONフォーマットをデシリアライズする方法（続編）

まとめ

　前／後編にわたって、Windowsフォーム開発者がUWPアプリ開発に挑戦するときの大きなギャップに重点を置いて解説してきたが、いかがだっただろうか？もちろんその他にも相違点は多々あるが、Windowsフォームのスキルを高めてきた皆さんなら大した障害にはならないだろう。

　Windows 10にはさまざまなデバイスがある。PCの他に、スマートフォン／IoT Core／Xbox One（Windows 10へのアップデート）／Surface Hubが2015年のうちに登場するだろう。来年にはHoloLensが登場するといわれている。これら全てで動作するUWPアプリの世界に飛び込んでいこう！