スマホ×Windows Azure開発講座(Windows Phone編)

第6回Windows Azure Toolkit for Windows Phone

はじめに

これまでの連載では、.NETで作成したサービスアプリケーションをWindows Azure環境にデプロイして、Windows Phoneアプリケーションからアクセスするまでを紹介してきました。

最終回となる今回は、Windows PhoneアプリケーションからWindows Azureを簡単にアクセスするためのライブラリであるWindows Azure Toolkit for Windows Phoneについてご紹介したいと思います。

なお、Toolkitのサンプル実行時にはWindows Azureストレージアカウントを使用しますので、Windows Azureの無料お試しのアカウントをご用意していただく必要があります。

Windows Azure Toolkit for Windows Phoneとは

Windows Azure Toolkit for Windows Phone(以下ツールキット)は、Windows PhoneからWindows Azureのストレージに簡単にアクセスする方法を提供するライブラリです。

Windows Phone以外にはiOSやAndroid用のツールキットがGitHubで提供されています。

ツールキットを利用する際に気を付けることの1つにWindows Azureストレージへのアクセスの方法があります。方法は2通りあり、1つはWindows PhoneアプリケーションがWindows Azureストレージに直接アクセスする方法です。もう1つはWindows Azure上のホステッドサービス上にアカウント認証用のアプリケーションをデプロイして、そのサービスを通じてWindows Azureストレージにアクセスする方法です。後者に関しては、アカウント認証機能も持ったアプリケーションがGitHubでCloud Ready Packagesとして「主に他のツールキット向け」に提供されています。

Windows Phone向けのツールキットには上記Cloud Ready Packagesの基となったASP.MVC3ベースのアプリケーションが用意されています。また、認証に関しては独自のアカウント管理機構を実装したMembersipと、Windows LiveやGoogleなどのアカウントを認証に利用可能なWindows Azure ACSを用いるもののどちらかを利用する事が可能です。

本記事ではシンプルにWindows Phone端末から直接Windows Azureにアクセスする場合のサンプルおよびコードをご紹介していきます。

Windows Azure Toolkit for Windows Phoneのサンプルを試す

それではサンプルアプリケーションを実際に動かしてツールキットを体験してみましょう。

ツールキットは下記CodePlexから入手することができます。

Windows Azure Toolkit for Windows Phone
http://watwp.codeplex.com/

インストーラが提供されていますので、インストーラの指示に従ってインストールします。ツールキットは下記フォルダにインストールされます。

  • C:\WindowsAzure\WATWindowsPhone

このフォルダにはライブラリ本体(Binariesフォルダ⁠⁠、各種サンプル等が展開されています。サンプルはWindows Phone SDK 7.0、Windows Phone SDK 7.1それぞれようにサンプルが用意されています。Windows Phone SDK 7.1用サンプルには以下のサンプルが用意されています。

BabelCam

画像内のテキストをOCRサービス(Microsoft Research Project Hawaii OCR in the Cloud Service)を用いて抽出し、それをユーザーの選択した言語にBing Translator Serviceを用いて翻訳。最後にそれをPush Nortificationを用いてユーザーに通知するサンプルアプリケーションです。

TweetYourBlobs

写真をWindows Azure Blobにアップして、そのURLを呟くサンプルアプリケーションです。認証機構がすべてオミットされているシンプルなサンプルアプリケーションです。

CRUDSqlAzure

SQL Azureデータベース上にODataサービスを構築するサンプルアプリケーション

今回はこのうちのTweetYourBlobsを動かしてみたいと思います。

サンプルアプリケーションの実行

サンプルアプリケーションの実行の前に、bit.lyのAPI KEYを取得しておきます。下記URLで直接API KEYを表示できます。

サンプルアプリケーションを実行していきましょう。

  1. TweetYourBlobsのソリューションを開きます。Visual Studio 2010を起動し、下記slnファイルを実行します。

    • C:\WindowsAzure\WATWindowsPhone\Samples\WP7.1\TweetYourBlobs\TweetYourBlobs.sln
  2. TweetYourBlobs.Phoneプロジェクトを開き、App.xamlを開きます。

  3. 下記コードを見つけて、bit.lyの情報を設定します。

    <!-- Settings to access BitLy API-->
    <system:String x:Key="BitLyLogin">watwindowsphone</system:String>
    <system:String x:Key="BitLyApiKey">R_12cfbf939f17ec8d0688acddbeaee5f9</system:String>
  4. 最初にAzureのアプリケーションをデバッグ環境で実行します。デフォルトでアプリケーションの実行を行うと、TweetYourBlobsプロジェクトが実行されます。

  5. Azureのエミュレータが起動して、ブラウザが開き、https://127.0.0.1/にアクセスします。セキュリティのエラー画面が表示されます。このエラーは無視して下さい。ブラウザは閉じてしまっても問題ありません。

  6. Visual Studio 2010に戻って、Windows PhoneのプロジェクトであるTweetYourBlobs.Phoneをソリューションエクスプローラで右クリックして実行します。

  7. 下記の画面が表示されます。

    TWEET YOUR BLOBSと表示された画面が出る
    TWEET YOUR BLOBSと表示された画面が出る

    最初に証明書をインストールします。⁠Install certificate」をクリックします。

  8. Azureプロジェクト側にあらかじめサンプルの証明書が用意されています。中央の画像をクリックします。

    サンプルの証明書
    サンプルの証明書
  9. 証明書インストール画面が出るの「インストール」ボタンをクリックし、証明書をインストールします(今回HTTPSでAzureのRESTサービスにアクセスするためにSSLの証明書をインストールしました⁠⁠。

    証明書のインストール
    証明書のインストール
  10. 白い画面に戻るので、エミュレータ左下の戻るボタンをクリックします。カメラアイコンが表示されている画面になったらカメラボタンをクリックします。 カメラ(エミュレータ)が起動するので、右上のシャッターボタンで写真を撮ります。真っ白な画面に黒い長方形が一部表示されている写真が撮れます。⁠決定」ボタンで写真を確定します。

  11. Twitterに呟く画面が表示されるので、⁠tweet」ボタンをクリックします。この際、Azure(のエミュレータ)に画像がアップロードされます。

  12. Windows Phone上でブラウザが起動するので、Twitterにログインし、⁠いまどうしてる?」の所にある「ツイート」ボタンをクリックして呟きを投稿します。

  13. 投稿したつぶやきのリンクをクリックして下記のような画像を確認します。

  14. 画像の表示を確認する
    画像の表示を確認する

ツールキットの使い方について

それでは実際のツールキットの使い方を確認しておきたいと思います。今回のサンプルアプリケーションではWindows Phone端末から画像ファイルをAzure Storageにアップロードしている部分がツールキットを利用している部分になります。

TweetYourBlobs.PhoneプロジェクトのPagesフォルダ下のTweetPhotoPage.xaml.csを開いて、114行目のOnUploadPictureメソッドを開きます。読んでいくと141行目のthis.ViewModel.UploadPhotoメソッドを呼び出している部分が該当の処理であることがわかります(その後はそのメソッド呼び出しの結果イベントハンドラ⁠⁠。

UploadPhotoメソッドを右クリックして、定義に移動します。最初にBlobのコンテナの存在チェックをしています。その後Blobの参照を取得し、BlobのUploadFromStreamメソッドを呼び出しています(下記ソースコード抜粋の最後の処理⁠⁠。

var blob = container.GetBlobReference(this.BlobName);
 
if (this.IncludeLocationData)
{
blob.Metadata["ContentLocation"] = 
string.Concat("http://www.bing.com/maps/?v=2&cp=", latitude, "~", 
longitude, "&lvl=16&dir=0&sty=h");
}

blob.Metadata["ImageType"] = "image/jpeg";
 
blob.UploadFromStream(
this.PhotoStream,
response => this.dispatcher.BeginInvoke(

アップロード成功処理に関しては同メソッドの先を読んでいくと記述してありますので、そちらもあわせてご確認ください。

最後に

本記事ではWindows Azure Toolkit for Windows Phoneとそのサンプルをご紹介してきました。このツールキットを用いるとWindows Azureとの細かい通信処理の詳細を記述することなく、Windows AzureとWindows Phoneを組み合わせたアプリケーションの構築が可能になります。

本連載は今回で最後となります。本連載がWindows PhoneとWindows Azureを組み合わせたアプリケーション開発を始めるきっかけになれば幸いです。

連載を読んでいただきました、誠にありがとうございました。

おすすめ記事

記事・ニュース一覧