環境 :
Visual Studio 2013 RC

Azure Mobile App のあれこれ

• Visual Studio 2013 を使用した Azure Mobile App のアプリケーション開発
• Azure Mobile App で別の Server Script を参照 (Refer) する
• Azure Mobile App の Client-directed Login

こんにちは。

このあと見ていただきますが、Visual Studio 2013 を使用すると、Azure Mobile App (旧 Azure Mobile Services) を使った Windows 8 ストア・アプリの開発における “一般的な作業” が、Azure Portal との間を行ったり来たりせずに迅速に開発できます。
そこで今週は、Visual Studio 2013 を使用した Azure Mobile App の開発について紹介します。(なお、Build Insider の記事として Mobile App の認証系を中心に「どのようなことが可能か」を記載しましたが、今月は掲載記事も多く、公開までにしばらくかかると思いますのでお待ちください。ここで紹介するような細かな話は書けなかったので、公開までの「箸休め」ということで。。。)

構築手順

通常、Azure Mobile App を使った開発では、下図のようにプラットフォームごとの SDK の入ったサンプル コードをダウンロードできますが、今回はスクラッチから作成してみます。
では、一般的な流れを見ていきましょう。

当たり前ですが、あらかじめ、Azure のサブスクリプション契約をおこなっておきましょう。(さすがにこれは Visual Studio 単独では不可能です。) Azure Mobile App のサービスは、この後 作成するので、あらかじめ作成しておく必要はありません。

まず、Visual Studio 2013 を起動し、Windows ストア・アプリのプロジェクトを新規作成します。
プロジェクトが作成されたら、ソリューション エクスプローラーでプロジェクトを右クリックし、[追加] – [Connected Service] (接続済みサービス) というメニュー (下図) があるので、これを選択します。

はじめて Azure に接続する場合、サブスクリプションに接続するため、プロファイルのダウンロードを要求されるので、指示に従って Azure にログインしてサブスクリプションに接続してください。
接続をおこなうと、下図の通り、接続する Azure Mobile App (旧 Azure Mobile Service) を選択する画面が表示されます。

まだ Azure Mobile App のサービスを作成していない場合、この画面で [サービスの作成] (上図参照) をクリックすると、Azure Mobile App のサービスを新規作成できます。
今回は、下図の通り、「tsmatsuz-zumo01.azure-mobile.net」という名前の Mobile App を新規作成し、このサービスに接続します。(サービスを作成する際は、下図の通り、使用する SQL Database も同時に作成できます。)

Azure Mobile App のサービスに接続すると、プロジェクトに WindowsAzure.MobileServices パッケージ (Windows ストア・アプリ用の Mobile App の SDK) がインストールされ、App.xaml.cs に下記 (太字) の通りコードが追加されます。

. . .namespace App1{  sealed partial class App : Application  {    public static Microsoft.WindowsAzure.MobileServices.MobileServiceClient     tsmatsuz_zumo01Client =      new Microsoft.WindowsAzure.MobileServices.MobileServiceClient(        "https://tsmatsuz-zumo01.azure-mobile.net/",        "siZmGWlsNAnfswMvFniqYGSl...");    . . .

さて、少し話が横道にそれますが、Azure に接続すると、いろいろとすばらしい機能が使用できます。Server Explorer (下図) を表示してみてください。

この Server Explorer では、Windows Azure のサブスクリプションに接続していくつのタスクを実行できます。例えば、Azure Web App (旧 Azure WebSite) の作成も この Server Explorer から可能であり、Azure Web App を作成して、そこにWeb プロジェクトを配置する一連の作業が Visual Studio のみで可能です。
以降でも、この Server Explorer を使って、Mobile App に必要ないくつかのタスクを実施します。

では、Azure Mobile App のダウンロード サンプルで記述されているように、テーブルにアクセスしてデータの参照や更新をおこなう簡単な Windows 8.1 アプリを構築してみましょう。

まず、Mobile App を使ってテーブルを作成する必要がありますが、これも Azure Portal は不要です。Server Explorer を使って、作成した Mobile App (今回の場合は「tsmatsuz-zumo01」) を右クリックして、[テーブルの作成] を選択します。

テーブル名の入力と認証方法など (認証されたユーザーのみアクセス可能にする、など) を入力するダイアログ ボックスが表示されるので、今回は「TestTbl」という名前のテーブルを作成しましょう。(認証については、今後公開される Build Insider の記事などをご参照ください。ここでは説明を省略します。)

なお、列の作成などをおこなう場所がありませんが、Azure Mobile App で作成されたテーブルは、既定では、Json データを投入した際に動的にスキーマ拡張されるようになっています。こうした設定は、モバイル・サービスのプロパティ ウィンドウで確認することができます。(残念ながら、設定の変更は Visual Studio では不可能みたいです。Azure Portal が必要です。)

では、この構築した TestTbl と連携するアプリを構築しましょう。

MainPage.xaml の XAML デザイナーを開き、今回は、下図のように、ListView を 1 つと、Button を 1 つ配置します。今回は、名前をそれぞれ「listView1」、「saveButton」とします。(まったく気持ちのこもっていない UI ですみません。そろそろ帰りたいので。。。)
なお、listView1 の [DisplayMemberPath] プロパティに「Text」と入力しておきます。(後述しますが、今回は、バインドしたデータの「Text」プロパティを ListView に表示するためです。)

では、コード (処理) を記述します。
まず、TestTbl に保存するデータとして、下記のクラスを定義しておきます。

. . .using Newtonsoft.Json;public class TestTbl{  public string Id { get; set; }  [JsonProperty(PropertyName = "text")]  public string Text { get; set; }  [JsonProperty(PropertyName = "complete")]  public bool Complete { get; set; }}

つぎに、MainPage.xaml.cs にコード (処理) を記述します。saveButton の Click イベント含め、今回は下記の通りコードを記述します。
ここでは、画面の表示と共に TestTbl の内容の検索をおこなって内部変数 items に設定し、さらに items と ListView のデータ バインドをおこなうことで結果を ListView に表示します。ボタンを押すと TestTbl にアイテムを追加して、バインドされた変数 items にもデータを追加します。

. . .using Microsoft.WindowsAzure.MobileServices;. . .public sealed partial class MainPage : Page{  private MobileServiceCollection<TestTbl, TestTbl> items;  private IMobileServiceTable<TestTbl> testTable =    App.tsmatsuz_zumo01Client.GetTable<TestTbl>();  public MainPage()  {    this.InitializeComponent();  }  protected override void OnNavigatedTo(NavigationEventArgs e)  {    RefreshTestItems();  }  private void saveButton_Click(object sender, RoutedEventArgs e)  {    var testItem =      new TestTbl { Text = "Test : " + DateTime.Now.ToLocalTime() };    InsertTestItem(testItem);  }  private async void RefreshTestItems()  {    items = await testTable      .Where(testItem => testItem.Complete == false)      .ToCollectionAsync();    listView1.ItemsSource = items;  }  private async void InsertTestItem(TestTbl testItem)  {    // update table    await testTable.InsertAsync(testItem);    // update binding list    items.Add(testItem);  }}. . .

以上で完了です。

F5 でデバッグ実行すると、下図の通り Azure Mobile App のテーブルと連携したアプリが動作します。

Visual Studio 2013 を使用すると、例えば、server script の編集なども可能です。下図の通り、Server Explorer から、作成したテーブルのスクリプトを表示して、エディターで編集と保存が可能です。

なお、F9 でブレークポイントを置けますが、残念ながらデバッグしても止まらないみたいですね。これまで通り、server scirpt はログ出力でデバッグしてください。(なお、Visual Studio 上でこのログを表示するには、Server Explorer から Mobile App を右クリックして [ログの表示] を選択します。下図を参照してください。)

今回は省略しますが、Visual Studio から Push Notification の追加なども可能です。(プロジェクトを右クリックして、[追加] – [プッシュ通知] を選択します。)

例えば、認証設定用の appid/secret の設定など、一度だけ設定しておくようなタスクの多くは Visual Studio では実施できません。(これらは Azure Portal が必要です。) ただし、上記のように、頻繁に必要になる一般的なタスクは、概ね、Visual Studio のみを使用して開発をおこなうことが可能になっています。
私もついつい Portal で設定してしまいますが、開発中は、こっちのほうが楽ですね。

注記 : Windows 8 store app では、MainPage.xaml.cs など、MobileServiceClient を使用する箇所で、必ず、Microsoft.WindowsAzure.MobileServices の名前空間の追加 (using の追加) をおこなってください。(LoginAsync メソッドなど一部で error が発生します。)

※ 変更履歴

2015/03/26  Azure Mobile Service から Azure Mobile App に名称変更