CodeZine(コードジン)

特集ページ一覧

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

Windows Azure 新機能チュートリアル(19)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/12/10 14:15

目次

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

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

サンプルの実行確認

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

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

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

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

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

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

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

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

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

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

図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ライブラリ」を参照してください。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Windows Azure新機能チュートリアル

もっと読む

著者プロフィール

  • WINGSプロジェクト statemachine(statemachine)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5