Windows Phone 7 Cloud Application Project Template を使ってみよう

先日紹介したWindows Azure Toolkit for Windows Phone 7を実際に使ってみました。

※ Windows Phone Developer Toolsも入れておきましょう。

Windows Azure Toolkit for Windows Phone 7 ってなんなの?

Windows Azure Toolkit for Windows Phone 7は簡単にいうとWindows Azureで動作するクラウドなWebアプリ(サービス)とWindows Phone 7アプリの連携を容易にするためのツールキットです。

Windows Azure AppFabric ACSやASP.NETを使用した認証の連携や、Push通知、Azure Storageへのアクセスなどを容易に扱えるようテンプレート化されています。
※テンプレートと言いながらサンプルとしてそのまま何もせずに動作するぐらいには作りこまれています。

チュートリアルは英語ですが、ASP.NETを使用した認証とAzure AppFabric ACSを使用した認証の2パターンでビデオが用意されているので、そちらを見るのが良いかと思います。

またMicrosoftの井上さんが解説されてる記事もあるので参考まで

 

やってみよう!

事前準備として以下のものを用意しておきましょう。

  • Azure AppFabric ACSv2のネームスペース
  • Azure Storageのアカウント

AppFabric ACSはフェデレーション認証する場合は必須、Azure Storageはエミュレータ(ローカル実行のみ)の場合は不要ですが今回はちゃんとAzure Storageを使用するようにします。
※Azure AppFabric ACSv2の設定はテンプレートが自動的にするので特に設定不要です。また認証だけを行うのでLiveIDやGoogle、Yahooなども特に設定することがありません。(独自のIdPを追加する場合はちゃんとしましょう)

またこのプロジェクトではHTTPS/443とHTTP/10080ポートを利用します。
Windows AzureのCompute Emulatorで正しく指定ポートが利用できるように予めローカルのIISがこのポートを利用していないか確認しましょう。(もし既にバインドされていたら一旦バインドを解除するかポートを変更します)

では実際に使ってみようと思います。今回は空じゃなくてPush通知など一通り実装されている「Windows Phone 7 Cloud Application」テンプレートを使います。

※WAT4WP7を入れるとCloudプロジェクトテンプレートに仲間が増えたよ!やったねたえちゃん!

プロジェクトを作成すると、Azure Storageアカウントを聞いてくるのでWindows Azure管理ポータルからアカウント名とアカウントキーを取得し入力します。

Push Notification Services欄は通知対象にチェックを付けましょう。Apple(iOS?)の場合はこの時点で証明書の指定が必要なようなので注意

次に認証をどうするか設定します。

今回はAppFabric ACSv2を使用するので「Use the Windows Azure Access Control Service」を選択し、AppFabric ACSの管理ポータルから入手したManagement KeyとNamespaceを入力します。

入手先はこちらを参考に↓

以上で初期設定は完了です。
プロジェクトがロードされるまで待ちます。

この時日本語環境だとエラーがでますが内容的に気にしなくても大丈夫でしょう。たぶん。

プロジェクトがロードされると、以下の3つのプロジェクトが作成されてプロジェクトのスタートページが表示されます。

Windows Azureプロジェクトと、Push通知や管理を行うASP.NET MVC2なWebアプリケーション、それからWindows Phone 7アプリケーションのプロジェクトができあがります。

それぞれ手を入れなくても最低限動作するようになっています。

 

デバッグ実行

さてプロジェクトができあがりましたので、さっそくデバッグ実行してみたいと思います。

※実行前にWindows AzureのCompute EmulatorとStorage Emulatorを起動しておきましょう。
※Toolkitのインストール時にWIFのランタイムがない云々を言われて後からWIFのランタイムをインストールした場合、Webアプリがエラーになります。こちらの「アセンブリ ‘System.ServiceModel, Version 3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089’ から型 ‘System.ServiceModel.Activation.HttpModule’ を読み込むことができない」を参考にaspnet_regiis.exe -i -enable コマンドを実行しておきましょう。

普通にF5でデバッグ実行でも問題ありませんが、結構処理が重いので個別に起動するといいかもです。

起動はWP7CloudApp1(Azureプロジェクト)を実行→WP7CloudApp1.Phoneを実行します。(WebアプリケーションはAzureプロジェクトを実行すれば良い)

こんな感じでCompute Emulator上でWebアプリが稼働して、Windows Phone 7 Emulatorが起動します。

認証も最初にAppFabric ACSv2を使用したフェデレーション認証を選択しているので、独自で認証処理を実装しなくても既存のIDを使用して委任することが出来ています。

※ちなみに開発PCのスペックのせいかどうかわかりませんが、ブラウザコントロールが凄く挙動が怪しい場合があります…
スクロールしても位置が戻るのでサインインのボタンのタップが職人技になったりとか大変です…
あとなぜかWindows Live IDでの認証はうまく行きませんでした。(なのでGoogleで…w)

あとはPush通知をしてみたり、一通りWindows AzureのWebアプリやWindows Azure Storageへのアクセスを楽しみましょう。

Push通知をタイルやトーストに出したり、簡単ですね!

他どんなことが出来るかはスタートページやドキュメントを参考にしてください。

※Push通知はHttpNotificationChannelで接続してWebアプリ側でJSONでデータ返してるのかな~。ソース見てるといろいろ面白いです。

 

Windows Azureへの展開

Windows Azureへ今回のアプリを展開する場合はいくつか注意点があります。

こちらのドキュメントを参照

  • 証明書を利用できるものに変更する
    • テンプレートの初期設定では自己署名のになってますので、Windows Azureのホスト名で証明書を作成し、ロールのプロパティから証明書を選択しなおしましょう。また指定した証明書がWindows Azure上でも利用できるように秘密鍵付証明書(.pfx)をあらかじめアップロードしておく必要があります。(HTTPSで接続したときに証明書の警告が表示されない状態にする必要があります)
      ※勝手証明書なので、わざわざ証明書(*.cer)をダウンロードするステップがアプリ内にあるんですね~。親切ですねw
    • 以下のコマンドを実行して証明書の作成を行い、Certmgr.mscを使用して秘密鍵付証明書を作成(エクスポート)しておきます。
    • makecert -sky exchange -r -n "CN=<CertificateName>" -pe -a sha1 -len 2048 -ss My "<CertificateName>.cer"
    • またWindows Phone 7からSSLで通信を行う為に、証明書(.cer)がダウンロードできるようにする必要があります。

      Windows Azureプロジェクトで設定した証明書の.cerファイルをWP7CLoudApp1.Webプロジェクトに追加し、一緒に含まれるようにビルドアクションを「コンテンツ」にしましょう。

  • ロールの仮想マシンサイズがXSになっている
    • XSで構成されてるので、自分のプランにあったものに変更しておきましょう。
  • Windows Phone 7アプリ(WP7CloudApp1.Phone)の以下のファイルにエンドポイントがハードコードされているので修正します。
    • CloudClientFactory.cs 44行目

    • App.xaml 27~31行目、39行目
    • LoginPageViewModelSampleData.xaml 6行目 (これサンプルのViewModelだと思われるから直さなくても大丈夫とは思う…)

あとは通常通りサービスパッケージを作成し、Windows Azure上にデプロイします。証明書だけちゃんとしておけば特に問題なく動作すると思います。

次にWP7CloudAPp1.Phone プロジェクトフォルダの出力ディレクトリにXAPがあるので、実機に転送しましょう。あとはWindows Phone 7上のWA Toolkit WP7をいろいろ試してみましょう!

Push通知はタイルやトーストもOKですね。

あとトーストの場合、ロックスクリーンでもちゃんと表示されます。

※通知用のWebアプリのFailedは別PCのエミュレータです。(起動してないのでエラー)

サンプルではWindows Azure Storage上のデータにもアクセスできます。

例えばBlogにカメラから撮影した画像をUpするとか

ちゃんとBlobストレージに格納されています。

 

まとめ

これだけの事ができるテンプレートってすごいですね!よくできてます。

細かな要素(Windows Phone 7のPush通知とかフェデレーション認証とかもろもろ)に関する説明は不足しているので、このテンプレートだけで学習するには不向き(解説が無い)ですが、コードを参考にしたりする場合や一通り仕組みをしってて且つ簡単にプロジェクトを起こしたい場合は凄く有用だと思います。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中