Windows ストアアプリから Windows Azure へアクセスする（その1）

  • Article

10月4日-5日に開催された、Developer Camp 2012 Japan Fall にて、「デバイス + クラウドで実現するこれからのサービス ～ Windows 8 + Windows Azure 編 ～」を担当させていただきました。ご多忙のところご参加いただいた方々、USTREAMで視聴いただいた方々、誠にありがとうございました。

ご都合などが合わなく、残念ながらご参加いただけなかった方々にも以下の URL にてストリーミングおよびスライドが公開されていますので、ぜひご覧ください。
ストリーミング： https://www.ustream.tv/recorded/25927178
スライド： https://www.slideshare.net/DeveloperCamp2012/windows-8-windows-azure

デバイス + クラウドで実現する これからのサービス ～ Windows 8 + Windows Azure 編 ～ from Developer Camp 2012 Japan Fall

さて、セッション中で最初にお見せしました、Windows ストアアプリから Windows Azure サービスにアクセスし、クラウディアの画像及び説明文を表示するデモの作成手順を本ブログで数回に分けて説明します。  
内部では特に複雑なことはやっていません。Windows 8 + Windows Azure 連携がシンプルに実現されている１つの例として何かの参考になれば幸いです。

作成するサンプルの画面例（といっても Windows ストアアプリ側のほうですが）を以下をご覧ください。

01

02

03

では、まずは Azure 側の環境構築と、ベースとなる Azure サービスを作成し、デプロイしてみるところまでステップ・バイ・ステップで説明してゆきます。

  1. Web Sites と一緒にSQL データベースを作成します。

    WEB SITES タブを選択し、
    00-0

    ページ下の NEW を選択します。
    00

    CREATE WITH DATABASE を選択します。
    01

    ユニークな URL を入力します。データベースを新規に作成するため、Create a new SQL database を選択します。
    02-2

    Web サイト設定ページ右下の右矢印ボタンを押し、次のページにてデータベース設定を指定します。
    03-2

    データベース設定ページ右下のチェックボタンを押し、Web サイトが作成されて Running になるまで待ちます。
    04-1

    作成した Web サイト名を選択すると、ダッシュボード画面に切り替わります。
    05

    後ほど Azure へのデプロイに使用するために、publish profile ファイルを保存しておきます。保存先とファイル名を記録しておいてください。
    06

    一緒に作成した SQL データベースが構築されているか、上部メニューから LINKED RESOURCES を選択し確認します。
    07

    続いて SQL データベース名を選択し、ダッシュボード画面に切り替えます。後ほど Azure へのデプロイに使用するために、データベース名及びサーバー名を記録しておいてください。
    08

     

  2. Visual Studio 2012 で Windows Azure サービスを作成します。

    新しいプロジェクトで空の Visual Studio ソリューションを作成します。ソリューション名を「PicMgr」とします。
    09
       
    新しいプロジェクトを追加します。
    10

    ASP.NET MVC 4 Web アプリケーションを作成します。アプリケーション名を「PicMgr.WebApi」とします。.NET Framework のバージョンは必ず ”4” を選択してください。（2012年10月5日時点ではまだ Azure が .NET 4.5 に対応していません。）
     11

    プロジェクト テンプレートの種類を Web API にします。OK ボタンを押します。
    12

    ウィザードが展開されます。[Controllers] フォルダ下の ValuesController.cs の中身を確認してみてください。Get / Post / Put / Delete という REST ベースの CRUD(Create / Read / Update / Delete) 処理が最初から生成されています。

     namespace PicMgr.WebApi.Controllers
 {
     public class ValuesController : ApiController
     {
         // GET api/values
         public IEnumerable<string> Get()
         {
             return new string[] { "value1", "value2" };
         }
  
         // GET api/values/5
         public string Get(int id)
         {
             return "value";
         }
  
         // POST api/values
         public void Post([FromBody]string value)
         {
         }
  
         // PUT api/values/5
         public void Put(int id, [FromBody]string value)
         {
         }
  
         // DELETE api/values/5
         public void Delete(int id)
         {
         }
     }
 }

      

    F5 を押して、デバッグモードでサービスを起動します。URL に”api/values”を追加して、JSON ファイルの内容を確認します。上記コードの Get () メソッドの内容が返されていることがわかります。    
    13

    デバッグを終了します。

  3. 作成した ASP.NET MVC 4 アプリケーションを Azure にデプロイします。

    プロジェクト名を右クリックして、発行メニューを選択します。

    14

    「Web を発行」ダイアログの[プロファイル]タブで[インポート(I)…]ボタンを押して、さきほど作成した publish profile ファイルを読み込みます。

    15

    [接続]タブ、[設定]タブはいづれも[次へ(X) >]ボタンを押して、[プレビュー]タブで[発行(P)]ボタンを押します。

    16

    発行が完了し、デプロイされると、Web ページが表示されます。URL が Web Sites の作成時に指定したものと同じであることを確認してください。

    17

    さきほどのデバッグモードと同様にURL に”api/values”を追加して、JSON ファイルの内容を確認すると同じ内容が表示されるはずです。

    次のエントリーで Azure から画像と詳細情報を公開するロジックを追加します。