次の方法で共有

クイック スタート: モバイル サービスの追加 (JavaScript)

  • [アーティクル]

[この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、 「最新のドキュメント」をご覧ください]

このクイック スタートでは、Azure のモバイル サービスを使うことで、既にあるアプリにクラウド ベースのバックエンド サービスを追加する手順について説明します。 モバイル サービスは、アプリでのデータの保存や照会、主要 ID プロバイダーを使ったユーザーのログイン、プッシュ通知の送受信を容易にします。詳しくは、モバイル サービスのデベロッパー センターをご覧ください。作業が終了すると、Azure のサブスクリプションで新しいモバイル サービスが作成され、モバイル サービスのコードがスターター アプリ プロジェクトに追加され、アプリを実行して新しいモバイル サービスにデータを挿入できます。

必要条件

  • Microsoft Visual Studio 2013**。
  • アクティブな Azure アカウント。 アカウントを持っていない場合は、数分で無料試用版アカウントを作成できます。詳しくは、「Microsoft Azure 無料評価版」をご覧ください。
  • GetStartedWithMobileServices プロジェクト。これは、モバイル サービスを使用できるように設定される Windows ストア アプリ プロジェクトです。

GetStartedWithMobileServices プロジェクトをダウンロードして実行する

最初に、モバイル サービスが追加される Windows ストア アプリ用の Visual Studio 2013 プロジェクトをダウンロードしてテストします。このスターター アプリはメモリに項目を格納します。

  1. GetStartedWithMobileServices サンプル アプリ プロジェクトをダウンロードします。
  2. Visual Studio で、ダウンロードしたプロジェクトを開き、js フォルダーを展開して、default.js スクリプト ファイルを調べます。追加された TodoItem オブジェクトはメモリ内 List に格納されることを確認した後、F5 キーを押してプロジェクトをリビルドし、アプリを起動します。
  3. アプリで、[Insert a TodoItem] にテキストを入力し、[保存] をクリックします。 保存されたテキストは、"Query and update data" の下の 2 番目の列に表示されます。

新しいモバイル サービスを作成する

次の手順では、Auzre で新しいモバイル サービスを作成し、この新しいサービスへのアクセスを可能にするコードをプロジェクトに追加します。モバイル サービスを作成するには、Azure サブスクリプションから Visual Studio に publishsettings ファイルをインポートする必要があります。これによって、Visual Studio でユーザーの代わりに Azure に接続できます。新しいモバイル サービスを作成する場合、アプリのデータを保存するためにモバイル サービスで使用される Azure SQL データベースを指定する必要があります。

  1. Visual Studio 2013 で、ソリューション エクスプローラーを開き、プロジェクトを右クリックして [追加]、[接続済みサービス] の順にクリックします。

  2. [サービス マネージャー] ダイアログで [サービスの作成] をクリックし、[モバイル サービスの作成] ダイアログの [サブスクリプション] で [<インポート>] をクリックします。

  3. [Microsoft Azure サブスクリプションのインポート] で、[サブスクリプション ファイルのダウンロード] をクリックし、(必要に応じて) Microsoft Azure アカウントにログインして、ブラウザーでファイルの保存を求めるメッセージが表示されたら [保存] をクリックします。注  ログイン ウィンドウはブラウザー内に表示され、Visual Studio ウィンドウの背面に表示されている場合があります。ダウンロードした .publishsettings ファイルを保存した場所をメモしておいてください。プロジェクトが既に Azure サブスクリプションに接続されている場合は、この手順を省略できます。

     

  4. [参照] をクリックして .publishsettings ファイルを保存した場所に移動し、ファイルを選択します。次に、[開く] をクリックし、[インポート] をクリックします。Visual Studio によって、Azure のサブスクリプションに接続するために必要なデータがインポートされます。サブスクリプションに 1 つまたは複数のモバイル サービスが既にある場合、サービス名が表示されます。注  ダウンロードした .publishsettings ファイルには、他のユーザーが使用してアカウントにアクセスできる情報が含まれているため、発行の設定をインポートした後、このファイルを削除することを検討してください。 他の接続型アプリ プロジェクトで使用できるようにこのファイルを保存しておく場合は、ファイルをセキュリティで保護します。

     

  5. [サービスの作成] をクリックし、[モバイル サービスの作成] ダイアログで、モバイル サービス用の [サブスクリプション] と目的の [領域] を選択します。モバイル サービスの [名前] を入力し、その名前が利用できることを確認します。名前が利用できない場合、赤い X が表示されます。[データベース] で [<新規作成>] を選択し、[サーバー ユーザー名] と [サーバー パスワード] を入力して [作成] をクリックします。注  このクイック スタートでは、新しい SQL データベースのインスタンスとサーバーを作成します。この新しいデータベースを再利用し、他の SQL データベースのインスタンスと同様に管理できます。新しいモバイル サービスと同じ領域に既にデータベースがある場合は、代わりに既存のデータベースを選択できます。既存のデータベースを選択する場合は、正しいログイン資格情報を指定してください。間違ったログイン資格情報を指定した場合、モバイル サービスは正常ではない状態で作成されます。

     

    モバイル サービスが作成された後、モバイル サービス クライアント ライブラリへの参照がプロジェクトに追加され、プロジェクトのソース コードが更新されます。

  6. ソリューション エクスプローラーで、[サービス]、[モバイル サービス]、使用するサービス名の順に展開し、service.js ファイルを開きます。次の例に示されているような、新しく追加された変数に注意してください。

    var todolistClient = new WindowsAzure.MobileServiceClient(
                "https://todolist.azure-mobile.net/",
                "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

    このコードは、MobileServiceClient オブジェクトのインスタンスを使用することによって、アプリ内で新しいモバイル サービスにアクセスできるようにします。クライアントは、新しいモバイル サービスの URI とアプリケーション キーを指定することによって作成されます。

  7. default.html ファイルを開くと、2 つの新しい script 参照が追加されていることがわかります。1 つは Azure のモバイル サービス クライアント ライブラリへの参照で、もう 1 つはプロジェクト内で MobileServiceClient オブジェクトを定義するスクリプトへの参照です。

モバイル サービスに新しいテーブルを追加し、アプリを更新する

新しいモバイル サービスにデータを格納するには、サービス内で新しいストレージ テーブルを作成する必要があります。次の手順では、Visual Studio 2013 を使ってモバイル サービスで新しいテーブルを作成する方法を示します。次に、モバイル サービスを使用して、ローカル コレクションではなく、Azure に項目を格納するようにアプリを更新します。

  1. サーバー エクスプローラーで、[Azure]、[モバイル サービス] の順に展開し、モバイル サービスを右クリックして、[テーブルの作成] をクリックします。[テーブルの作成] ダイアログで、[テーブル名] に「TodoItem」と入力します。

  2. [詳細] を展開し、テーブル操作のアクセス許可の既定値が [アプリケーション キーを持つすべてのユーザー] になっていることを確認し、[作成] をクリックします。これによって、サーバー上に TodoItem テーブルが作成され、アプリケーション キーを持つすべてのユーザーがテーブルのデータにアクセスして変更でき、最初に認証される必要はありません。 注  アプリケーション キーはアプリケーションと共に配布されます。このキーは、セキュリティで保護して配布されていないため、セキュリティ トークンと見なすことはできません。モバイル サービスのデータへのアクセスをセキュリティで保護するには、アクセスの前にユーザーを認証する必要があります。詳しくは、「権限」をご覧ください。

     

  3. default.js スクリプト ファイルで、既にある items コレクションを定義する行をコメントし、次のコード行をコメント解除または追加して、yourClient を、モバイル サービスにプロジェクトを接続したときに service.js ファイルに追加された変数に置き換えます。

    var todoTable = yourClient.getTable('TodoItem');

    このコードは、新しいデータベース テーブルのプロキシ オブジェクト (todoTable) を作成します。

  4. InsertTodoItem 関数を次のコードに置き換えます。

    var insertTodoItem = function (todoItem) {
    // Inserts a new row into the database. When the operation completes
    // and Mobile Services has assigned an id, the item is added to the binding list.
    todoTable.insert(todoItem).done(function (item) {
        todoItems.push(item);
    });
};

    このコードは、テーブルに新しい項目を追加します。 注  新しいテーブルは、Id 列のみを使って作成されます。動的スキーマが有効である場合、モバイル サービスは、挿入要求または更新要求の JSON オブジェクトに基づいて新しい列を自動的に生成します。 詳しくは、「動的スキーマ」をご覧ください。

     

  5. RefreshTodoItems 関数を次のコードに置き換えます。

    var refreshTodoItems = function () {
    // This code refreshes the entries in the list by querying the table. 
    todoTable.read().done(function (results) {
        todoItems = new WinJS.Binding.List(results);
        listItems.winControl.itemDataSource = todoItems.dataSource;
    });
};

    これは、モバイル サービスから返されるすべての TodoItem オブジェクトをすべて含む todoTable の項目のコレクションへのバインドを設定します。

  6. UpdateCheckedTodoItem 関数を次のコードに置き換えます。

    var updateCheckedTodoItem = function (todoItem) {
    // This code takes a freshly completed TodoItem and updates the database. 
    todoTable.update(todoItem);
};

    これは、項目の更新をモバイル サービスに送信します。

新しいモバイル サービスに対してアプリをテストする

これで、アプリはバックエンド ストレージとしてモバイル サービスを使用するように更新されたため、モバイル サービスに対してアプリをテストします。

  1. Visual Studio で、F5 キーを押してアプリを実行します。
  2. 以前のように、[Insert a TodoItem] にテキストを入力し、[Save] をクリックします。 これによりモバイル サービスに挿入として新しい項目が送信され、項目はコレクションに追加されます。
  3. アプリをシャットダウンして再起動します。追加されたデータは、永続化され、モバイル サービスからもう一度読み込まれて、表示されることに注意してください。

完了した項目をフィルター処理するようにクエリを変更する

アプリが Azure にデータを格納するようになったため、結果から完了した項目をフィルター処理で除外するようにクエリを変更します。

  1. default.js スクリプト ファイルで、既にある RefreshTodoItems メソッドを、完了した項目をフィルター処理して除外する次のコードに置き換えます。

    var refreshTodoItems = function () {
    // More advanced query that filters out completed items. 
    todoTable.where({ complete: false })
        .read()
        .done(function (results) {
            todoItems = new WinJS.Binding.List(results);
            listItems.winControl.itemDataSource = todoItems.dataSource;
        });
};

  2. アプリを再起動し、一覧にあるもう 1 つの項目を確認し、[Refresh] をクリックします。 チェック ボックスをオンにした項目が、一覧から消えていることに注意してください。更新のたびに、モバイル サービスへのラウンド トリップが発生し、これによってフィルター処理されたデータが返されます。

要約と次のステップ

ここでは、モバイル サービスを使用して、既にある Windows ストア アプリにリモート データ ストレージ機能を追加する方法について説明しました。

次に、モバイル サービスを使用して、Windows ストア アプリにプッシュ通知機能を追加する方法 (クイック スタート: モバイル サービスのプッシュ通知の追加) について説明します。

関連トピック

サーバー スクリプトを使ってモバイル サービスのデータを検証して変更する

ページングによってモバイル サービスのクエリを調整する