Windows Phoneアプリケーションの作成

今回作成するアプリケーションは最初の画面にカードを引くボタンが配置されていて，そのボタンをタップするとカード詳細画面に遷移する感じのアプリケーションです。

MainPage.xaml

MainPage.xaml を開いて，デザインビューでコードを修正していきます。MainPage.xamlの「マイアプリケーション」というTextBlockのTextを変更します（例：gihyo.jp Azure×WP連載⁠）⁠。「⁠ページ名」TextBlockのTextを「カードを引く」に変更します。

次に，画面下部にGridが配置されている事を確認します。ここに「カードを引くボタン」を配置します。ツールボックスからButtonを選択してGrid内に適当に配置します。配置したButtonのプロパティに関して，HorizontalAlign，VerticalAlignをCenterにし，Marginを0,0,0,0にします。また，Buttonの名前を「DrawButton⁠」⁠，Contentを「カードを引く」にします。少しボタンの幅が狭いので，Widthを「200」に伸ばします（⁠「⁠名前」はプロパティパネルの上部の方で設定することができます。コードではx:Nameプロパティに相当します⁠）⁠。

プロパティパネルで「イベント」タブを選択し，Clickイベントの右の所をダブルクリックします。これでイベントハンドラのひな形を作成しておきます。

MainPage.xaml.cs

MainPage.xaml.csに処理をC#で記述していきます。先ほど作成したDrawButton_Clickメソッドに処理を書いて行くのですが，カードを引く処理は次の画面で行うので，ここでは次の画面への画面遷移処理だけを記述します。

private void DrawButton_Click(object sender, RoutedEventArgs e)
{
    this.NavigationService.Navigate(new Uri("/ResultPage.xaml", UriKind.Relative));
}

Windows Phoneでは画面の遷移処理はNavigationServiceを用いて行います。Navigateメソッドを用いると指定したURIの画面に遷移します。今回は画面遷移する際のトランジション等は指定していませんが，MainPage.xamlにトランジションを設定する事により，ヴィジュアル的にインパクトのある画面遷移を容易に実装する事が可能です。

ResultPage.xaml

カードを引いた結果を表示する画面としてResultPage.xamlをプロジェクトに追加します。プロジェクトを右クリックして，追加＞新しい項目を選択します。「⁠Windows Phone縦向きのページ」を選択し，名前を「ResultPage.xaml」とします。

デザインビューで画面の項目の設定を修正していきます。「⁠マイアプリケーション」というTextBlockのTextを変更します（例：gihyo.jp Azure×WP連載⁠）⁠。「⁠ページ名」TextBlockのTextを「引いたカード」に変更します。

次に，画面にカード名を表示するTextBlockとカード画像を表示するImageを配置します。追加した2つコントロールの設定は以下のようにします。完全に同じにする必要はありません。必ず設定する必要があるのは，TextBlockのx:Name属性をNameTextBlockに，Imageのx:Name属性をCardImageの2つです。

<TextBlock Height="36" HorizontalAlignment="Center" Margin="0,20,0,0"
Name="NameTextBlock" Text="TextBlock" VerticalAlignment="Top" 
Width="196" TextAlignment="Center" />
<Image Height="338" HorizontalAlignment="Left" Margin="0" Name="CardImage" 
Stretch="Fill" VerticalAlignment="Center" Width="450" />

ResultPage.xaml.cs

ResultPage.xaml.csに処理を記述していきます。最初に「この画面に遷移してきたイベント」ハンドラにカードを引く処理を記述します。NavigationServiceを使用する際のイベントハンドラは今回作成したResultPageの親クラスであるPageクラスに定義されています。「⁠この画面に遷移してきたイベント」のイベントハンドラはOnNavigatedToです。

Windows Azure上のアプリケーションへのリクエストは今回はWebClientを用いたオーソドックスな形で行います（今回はWindows Azure上のサービスの作り方からWebClientによるアクセスを採用しました⁠）⁠。

カードを引く処理は下記のようになります。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    WebClient webClient = new WebClient();
    webClient.Headers[HttpRequestHeader.IfModifiedSince] = "Thu, 01 Jun 1970 00:00:00 GMT";

    Uri uri = new Uri("http://127.0.0.1:81/GameService/getcard");
    webClient.DownloadStringCompleted += 
 new DownloadStringCompletedEventHandler(webClient_DownloadStringCompleted);
    webClient.DownloadStringAsync(uri);
}

リクエストのヘッダにIfModifiedSinceを設定する事により，カードを引くボタンが押されるたびに，毎回Windows Azureにリクエストが投げられるようにしています。

次に，通信処理の結果イベントハンドラにGameServiceから返って来るJSON形式のレスポンスを受け取って画面に表示する処理を記述します。

最初にアセンブリへの参照を2つ追加します。プロジェクトの参照設定を右クリックして，参照の追加を行います。

最初にGameWebRole.dllを参照に追加します。GameWebRole.dllはこれまでに作成したGameWebRoleプロジェクトのbinディレクトリに出力されています。

次に，CodePlexよりJson.NETをダウンロードし，適当な場所に解凍して，『⁠Windows Phone版』のDLLの参照を参照設定に追加します。

• Json.NET
  http://json.codeplex.com/

それではGameWebRoleへの通信のレスポンスを受け取る処理の中身を書いて行きます。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    WebClient webClient = new WebClient();
    webClient.Headers[HttpRequestHeader.IfModifiedSince] = "Thu, 01 Jun 1970 00:00:00 GMT";

    Uri uri = new Uri("http://127.0.0.1:81/GameService/getcard");
    webClient.DownloadStringCompleted += 
 new DownloadStringCompletedEventHandler(webClient_DownloadStringCompleted);
    webClient.DownloadStringAsync(uri);
}

処理の流れとしては，最初にダウンロードされてきたJSON文字列をJsonConvertを用いてCardオブジェクトへデシリアライズしています。データが取得できれば，あとは結果を画面に表示するだけです。カードのイメージは上記ではStorage EmulatorへのURLを指定しています。

一通りの実装が終わりましたので，実行して動作を確認します。Visual Studioを2つ起動して，先にWindows Azureアプリケーションを実行，その後，本記事のWindows Phoneアプリケーションを実行します。

今回作成したサンプルはこちらです。

• 作成したプロジェクト（GihyoAzureSampleGame01WP）

最後に

今回はWindows Phoneアプリケーションを作成して，前回までに作成したアプリケーションにアクセスしてみました。次回はWindows Azure Toolkit for Windows Phoneをご紹介する予定です。