Windows Azureモバイルサービスを利用しよう

Windows Azure 新機能チュートリアル（19）

サンプルアプリケーションの解説

　それではダウンロードしたサンプルアプリーションについて解説します。

サンプルの実行確認

　まずは、サンプルアプリケーションを実行してみましょう。

　ダウンロードしたソリューションをVisual Studioで開き、デバッグ実行します。

1. サンプルアプリケーションを実行する

　Visual Studio 2012を起動し、サンプルアプリケーションを開きます。メインメニューから、［デバッグ］－［デバッグ開始］を選択します。図6はシミュレータ上で実行した様子です。Windowsストアアプリの場合、ローカルコンピュータで実行か、シミュレータ上で実行かを選ぶことができます。

　左テキストボックスに文字を入力し、［Save］ボタンをクリックすると、バックグラウンドではモバイルサービスのデータベースにデータが挿入されるとともに、右側のリストにアイテムの一覧が表示されます。アイテム左側のチェックボックスにチェックを入れると、次に説明するcompleteカラムが更新され、一覧の表示からは削除されます。

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

2. 実行後のデータを確認する

　管理ポータルに戻って、挿入されたテーブルの内容を確認してみましょう。それぞれ、アイテムに対応するtextカラムと、チェックボックスに対応するcompleteカラムが作成されていることが確認できます（図8）。

図8：サンプルアプリケーション実行後のテーブルカラムの確認

　また［参照］タブからデータを確認することもできます。先ほど入力したデータが表示されているでしょう（図9）。

図9：データの確認

サンプルアプリケーションの確認

　簡単な実行確認が終わったところで、サンプルアプリケーションの中身を確認していきます。

1. データクラスの確認

　まず初めに使われるデータを確認するため、リスト1を開きます。

リスト1 （MainPage.xaml.cs 26行目～）

    public class TodoItem
    {
        public int Id { get; set; }

        [DataMember(Name = "text")]
        public string Text { get; set; }

        [DataMember(Name = "complete")]
        public bool Complete { get; set; }
    }

　TodoItemクラスが定義されており、それぞれ、Id、Text、Completeプロパティを持っています。UI側からいえば、テキストボックスがTextプロパティ、チェックボックスがCompleteプロパティに対応しています。またText、Complete両プロパティはDataMember属性が指定されており、テーブルのtext、completeカラムに対応しています。

2. モバイルサービスへの接続

　次にモバイルサービスの接続について確認しましょう。リスト2を開きます。

リスト2 モバイルサービスへの接続（App.xaml.cs 27行目～）

public static MobileServiceClient MobileService = new MobileServiceClient(
       "https://mobileservicedemo.azure-mobile.net/",
       "fnBWCbdBNhbxNGVemOJXNJHgzndscP81");

　接続のためにMobileServiceClientクラスを使用します。コンストラクタの第1引数にはモバイルサービスのURLを指定し、第2引数にはアプリケーションキー（＊2）を指定します。詳細は後述しますが、モバイルサービスのデータにはアクセス権限を設定することができます。既定値ではモバイルサービスにアクセスするために、アプリケーションキーが必要です。また、アクセス制限の設定によっては、アプリケーションキーが不要でアクセス可能です。

＊2　アプリケーションキー

　サンプルアプリケーションには、初めからアプリケーションキーが埋め込まれています。アプリケーションキーは管理ポータルから確認できます

3. モバイルサービスからデータの取得、挿入

　最後にデータの取得、挿入部分を確認しましょう。モバイルサービス上にあるテーブル操作は、IMobileServiceTableインターフェースを利用します（リスト3）。インスタンスを取得するためには、リスト2で作成した、MobileServiceクラスを利用し、GetTableメソッドを呼び出します。ここで取得したIMobileServiceTable<TodoItem>インターフェースには、挿入や更新、読み込み、削除などのメソッドなどが用意されており、これらでテーブルの操作が可能です。

リスト3 モバイルサービスへの接続（Main.page.xaml 37行目～）

private IMobileServiceTable<TodoItem> todoTable = App.MobileService.GetTable<TodoItem>();

　リスト4は、データストアからデータを取得している部分です。

リスト4 アイテムの取得（Main.xaml.cs 53行目～）

      private MobileServiceCollectionView<TodoItem> items;          ...（1）
      ...
      private void RefreshTodoItems()                               ...（2）
      {
          items = todoTable
              .Where(todoItem => todoItem.Complete == false)
              .ToCollectionView();
          ListItems.ItemsSource = items;
      }

　（1）のMobileServiceCollectionView<TodoItem>は、アイテムの格納先となるコレクションです。

　（2）RefreshTodoItemsメソッドは、モバイルサービスからアイテムの一覧を取得します。リスト3で定義されたtodoTableからtodoItemのCompleteプロパティがfalseのものを取得し、リストビューコントロールにバインディングしています。

　リスト5は、モバイルサービスへのデータ挿入部分です。

リスト5 モバイルサービスへのデータ挿入 （Main.xaml.cs 44行目～）

        private async void InsertTodoItem(TodoItem todoItem)
        {
            await todoTable.InsertAsync(todoItem);
            items.Add(todoItem);
        }

　IMobileServiceTableクラスのInsertAsyncメソッドを呼び出して、データを挿入しています。Asyncと名前がついているとおり非同期メソッドです。Windowsストアアプリではユーザーインターフェースをブロックさせないようにするため、時間のかかる処理は非同期での実装を強要されます。ただし新しく導入されたasync/await構文を用いて簡単に実装できるようになっています。

　ここで紹介した、各クラスやインターフェースの詳細については、「モバイルサービスのMSDNライブラリ」を参照してください。