Windows Azureのモバイルサービスを使ってみる

Windows Azure のモバイルサービスを使って Windows Azure で実行されるアプリケーションのバックエンドサービスを作成します。作ったバックエンドサービスからデータを取得し前回作成した画面に登録したデータを表示します。

Windows Azure と YEOMAN で簡単Webサイト構築 - albatrosary's blog

Azureの設定

モバイルサービスの選択

モバイルサービスを選択し新規作成をクリックします。

モバイルサービスの作成

モバイルサービスの作成をクリックし指示にしたがって作成していきます。今回はプッシュ通知は利用しません。

• URL：albasay
• データベース：既存でも新規でも

データベースの設定

データベースの設定をします。今回は既存のデータベースを使ってますのでパスワードなどは設定した値を登録してください。新規作成した場合もほとんど手間いらずです：

これでモバイルサービスは基本的に終わりです。基本的といったのは、許可されているURLが「localhostのみ許可」の設定になっているため、前回作ったモジュールをAzureのWEBSITESからアクセスさせる場合にはWEBSITESのURL登録が必要になります。

クライアントの実装

既存のクライアントアプリケーションを利用します。まずは作成したモバイルサービスの名前の横に矢印「⇒」をクリックします。

利用するプラットフォーム、既存のものを使うかなど聞いてきます：

プラットフォームとしてはHTML/JavaScript、既存のHTMLを使用しますのでポチポチと選択していきます。「既存の HTML アプリケーションを接続する」をクリックするとコーティングサンプルが出てきますのでそれを既存のモジュールに写していきます。

クライアントの修正

「index.html」にモバイルサービスを利用するためのモジュールを設定します。

      <!-- 省略  -->
      <script src="http://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.2.5.min.js"></script> 
</body>
</html>

続いて、データの呼び出しですが、その前にデータ登録をします、下記メソッドを利用します。

         var item = { text: "すばらしいアイテム" };
     client.getTable("Item").insert(item);

これが完了したら、前回作成した「sample.controller.js」を修正します。

'use strict';

angular.module('azureApp')
  .controller('SampleCtrl', function ($scope) {

    var client = new WindowsAzure.MobileServiceClient(
      "https://albass.azure-mobile.net/",
      "EZNfvLASASDOFIJLKN1234567890"
    );

    client.getTable("Item").read()
        .done(
            function (results) {
                 console.log("results: " + results) ;           
                try {
                    console.log("exists");
                    $scope.$apply(function () {
                      $scope.items = results;
                    });    
                }
                catch(err) {
                      console.log("doesnt exist yet");  
                }            
            } 
        );
  });

ここで$scope.$applyを利用していますが理由は次の通りです：

AngularJS と無関係なところ（jQuery など）で XHR 通信して受け取ったデータをモデルに反映した場合や、あるいは datepicker などのプラグインからモデルに値を反映した場合は、そのモデルと UI が ng-model や ng-bind などでバインドされていたとしても、それだけでは即時には反映されない。

AngularJS のデータバインドを支える $apply - AngularJS Ninja

データを表示させるための「sample.html」は

<div ng-include="'components/navbar/navbar.html'"></div>

<ul>
  <li ng-repeat="data in items">{{data.id}} - {{data.text}}</li>
</ul>

これで終了です。gruntタスクで確認します。

$ grunt serve

WEBSITESとの連携

WEBSITESとの連携で行うのは２つです。

• 既存のモジュールをビルドしてgithubへ登録する
• ホスト名からの要求を許可する

まずはビルドします:

$ grunt build

次にホスト名の許可です。先ほどのモバイルサービス画面から「構成」を選択します。その中にホスト名の設定があります：

前回作ったWEBSITESのホスト名が「albatrosite.azurewebsites.net」でしたので登録し保存します。

これで完了です。URLを叩くと

最後に

Windows Azure の Webサイトとモバイルサービス、そしてYEOMANだとあまり悩まずに作れました。