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

第5回 Windows Phoneクライアントアプリケーションの作成

この記事を読むのに必要な時間:およそ 5 分

画像ファイルをBlobにアップロードする

今回はカードを引いた際の画像をWindows AzureのBlobにアップロードしておくことにします。これから作成するWindows Phoneアプリケーションでは,カードを引いた際にBlobにアップロードしてある画像が表示されるようにします。BlobとはWindows Azure版のオンラインストレージで静的な画像ファイルやJSファイルなどの管理に利用されます。

Windows Azureのストレージは実際のWindows Azure上のモノと,ローカルのエミュレータのもの(Storage Emulator)の2つがあります。

Windows AzureのBlobを利用する場合

Windows Azure 管理ポータルにログインし,ストレージアカウントを作成します。⁠ホステッドサービス,ストレージアカウント,CDN」を選択し,⁠ストレージアカウント」を選択します。上部のリボンから「新規ストレージアカウント」を選択し,ストレージアカウントを作成します。

図1 ストレージアカウントの新規作成

図1 ストレージアカウントの新規作成

ここで,ストレージアカウント名は適当なものを指定してください。作成したストレージアカウントを選択するとプロパティが右に表示されますので,⁠プライマリアクセスキー」「セカンダリアクセスキー」をメモっておきます。

次にCodePlexで公開されているAzure Storage Explorerをインストールします。これを利用すると,Windows Azureのストレージ機能のコンテンツの管理が可能になります。

Azure Storage Explorerがインストールできたら,起動します。上部のAdd Accountをクリックし,先ほどのストレージアカウントを登録します。

図2 ストレージアカウントの登録

図2 ストレージアカウントの登録

これでWindows Azureでのストレージアカウントの登録は完了です。

ローカルのStorage Emulatorを利用する場合

ローカルでデバッグすると,Webロール等を実行するためのCompute Emulator以外にStorage Emulatorも同時に起動します。デスクトップのタスクバー右下で確認する事が出来ます。青いアイコンがWindows Azureのエミュレータのアイコンです。

図3 Windows Azureエミュレータ

図3 Windows Azureエミュレータ

こちらを画像の保存先として利用する場合は,Windows AzureのBlobの場合同様に,Azure Storage Explorerをインストールし,起動します。その後,上部のAdd Accountをクリックし,右上の「Developer Storage」を選択します。

図4 Storage Emulatorの利用

図4 Storage Emulatorの利用

これでStorage Emulatorでのストレージアカウントの登録は完了です。

Blobに画像ファイルをアップロードする

Azure Storage Explorerでまず,画像を格納するコンテナを作成します。コンテナはここではフォルダのようなものであると覚えておいて下さい。コンテナ名はcardとします。

作成したcardコンテナにWindowsの場合だと「C:\Users\Public\Pictures\Sample Pictures」にあるファイルをいったんデスクトップ等にコピーしてそのファイルをアップロードします(ファイル名が日本語から英語に勝手に変更されます⁠⁠。

図5 画像ファイルのBlobへのアップロード

図5 画像ファイルのBlobへのアップロード

その後,アップロードしたファイルをすべて選択してファイルのアクセス権を変更します。ファイル選択後,上部にSecurityをクリックして変更を行います。Container AccessをPublic Blobに変更しておきます。

図6 ファイルのアクセス権の変更

図6 ファイルのアクセス権の変更

また,ファイル一覧画面で1つのファイルをダブルクリックして,そのファイルを参照するためのURLを取得しておきます。URLは下記のようになっています。

  • http://127.0.0.1:10000/devstoreaccount1/card/カード名

Windows Phoneプロジェクトの作成

Visual Studio 2010を開き,新しいプロジェクトを作成します。

左のペインからプロジェクトテンプレートとして「Silverlight for Windows Phone」を選択します。プロジェクトの種類は「Windows Phoneアプリケーション」を選択します。

プロジェクト名を「GihyoAzureSampleGame01WP」とします。

「OK」ボタンをクリックすると,Windows Phone OSのバージョンを選ぶダイアログが出ます。

ここではWindows Phone OS 7.1を選択します。

これまでのWindows Azureプロジェクトの入っているソリューションにWindows Phoneのプロジェクトを混ぜることも可能なのですが,今回はWindows Azureプロジェクトとは分けてプロジェクトを作成することにします。

著者プロフィール

福田寅成(ふくだともなり)

クラスメソッド株式会社

RIAエバンジェリスト

RIAやクラウドに関する技術記事執筆やセミナーの開催を通じて,先進技術の啓蒙を行う日々。Flex/AIR/Silverlight/AWS/Azure/Android/iOS/Windows Phone/UXと幅広い技術を担当。

Twitter:@Cronoloves