Azure App Service Mobile Apps 向けベータ版 Apache Cordova プラグインを発表

Article
01/20/2016

このポストは、1 月 19 日に投稿された Announcing the Beta Apache Cordova Plugin for Azure App Service Mobile Apps の翻訳です。

このたび、Azure App Service Mobile Apps 向け Apache Cordova プラグインのベータリリースが発表されました。このプラグインでは、データへのアクセス、プッシュ登録、Node.js または ASP.NET のいずれかで作成された Azure Mobile Apps バックエンドでの認証に使用する API が提供されます。

Azure Mobile Apps バックエンドの開発の詳細については、ASP.NET 向けまたは Node.js 向けのサーバーの使用方法に関するドキュメントを参照してください。また、Azure ポータルで Azure Mobile Apps バックエンドを生成、管理することもできます。方法については、TodoList のクイックスタートドキュメントに簡単なガイドがありますので、そちらを参照してください。

サービスの作成が完了したら、次に Apache Cordova クライアントを作成します。このために使用できる Apache Cordova クライアントをお持ちでない場合は、こちらのクイックスタートプロジェクト (英語) をご利用ください。

Apache Cordova プラグインをプロジェクトにインストールする

Apache Cordova プラグインは、Cordova Plugin コマンド (英語) でインストールします。

 cordova plugin add cordova-plugin-ms-azure-mobile-apps

これで、サポート対象のすべてのプラットフォームで自動的にプラグインを使用できるようになります。

Azure Mobile Apps バックエンドに接続する

まず、WindowsAzure.MobileServiceClient() 呼び出しでバックエンドサービスへの接続を定義します。

 var azureConnection = new WindowsAzure.MobileServiceClient('https://mysitename.azurewebsites.net');

他の関数もすべてこの接続オブジェクトを参照するため、azureConnection はどこからでもアクセスできる場所に格納するのがお勧めです。

SQL Azure テーブルに接続する

次のコマンドでテーブルに接続します。

 var tableRef = azureConnection.table('todoitem');

tableRef オブジェクトでは、Azure Mobile Apps バックエンドを操作して接続先の SQL Azure テーブルの読み取りと書き込みを行うことができます。その例を次に示します。

 var query = tableRef.where({ complete: false });
query.read().then(function (results) {
    var items = $.map(results, function (singleRow) {
        return $('<li>')
            .attr('data-todoitem-id', item.id)
            .append($('<button class="item-delete">Delete</button>'))
            .append($('<input type="checkbox" class="item-complete">').prop('checked', item.complete))
            .append($('<div>').append($('<input class="item-text">').val(item.text)));
    });
    $('#listitems').empty().append(items);
});

このサンプルコードでは、todoitem テーブル内の未完了のタスクのクエリを実行し、各行の結果テーブルから一連の LI アイテムを生成します。

また、次のコードスニペットを使用すると、アイテムを更新するイベントハンドラーに接続できます。

 var isComplete = $(this).prop('checked');
var itemid = $(this).closest('li').attr('data-todoitem-id')
todoItemTable
    .update({ id: itemid, complete: isComplete })
    .then(refreshTodoItems, handleError);

上記と同様のコードスニペットで、todo リストに新しい行を挿入したり、既存の行を削除したり、リストのテキストの内容を変更したりすることができます。

Azure App Service を使用して認証する

Azure App Service での認証を使用するためのモバイルバックエンドの構成が完了したら、この機能を Cordova アプリで使用できます。次のスニペットで認証をトリガーします。

 var provider = 'microsoftaccount'; // Facebook、Twitter、Google、AAD も使用可能
azureConnection.login(provider).done(
    function success(user) {
        console.info('User ' + user + ' has logged in);
    }, function error(error) {
        console.error('Failed to login: ', error);
    }); // success() を呼び出すと azureConnection.currentUser も使用可能

iOS または Android のエミュレーターで認証のテストを行います。ただし、Ripple シミュレーターを使用する場合、現時点では次のような制限事項がありますので必ずご確認ください。

制限事項

今回のリリースはベータ版であり、エミュレーター、または iOS や Android のデバイスで実行される Apache Cordova アプリのリリースに向けて慎重に最適化を行っているところです。しかしながらマイクロソフトでは現在、この認証フローが Ripple (Visual Studio で Apache Cordova アプリケーションを実行する際に使用される標準的なシミュレーター) では正常に動作しないことを把握しています。

また、Ionic フレームワーク (英語) などの AngularJS を基盤とするフレームワークで実行されている Apache Cordova アプリでもこの認証フローは正常に動作しません。これらの問題については、今後のベータリリースで修正される予定です。

また、このプラグインではオフライン同期機能がサポートされていません。この問題はプラグインの一般提供開始までに修正される予定です。

モバイル Web アプリケーションでの動作

モバイル Web アプリケーションでは JavaScript ライブラリが使用されます。しかしマイクロソフトは現時点で関連する JavaScript ライブラリをリリースしていません。これは、上記でお伝えした認証フロー関連の問題により、一般的なブラウザーにも影響が及ぶためです。このためモバイル Web アプリケーションの JavaScript ライブラリは、Apache Cordova の認証フローの問題が解決された時点でリリースする予定です。

ご協力のお願い

マイクロソフトはクライアントの開発をオープンに進めており、GitHub (英語) でソースコードリポジトリを公開しています。制限事項によって解決されていないコードの問題がありましたら、GitHub のイシュー (英語) からご連絡いただければ幸いです。

サポート

マイクロソフトでは、StackOverflow (英語) や Azure Mobile Services フォーラム (英語) を通じてサポートを行っています。フォーラムに質問をご投稿いただく際は、使用中のベータ版 Apache Cordova プラグインのバージョンも併せてお知らせください。

Azure App Service Mobile Apps 向けベータ版 Apache Cordova プラグインを発表

Additional resources