2015年6月8日

MonacaでもAzure。Azure Mobileサービスを試す

asial

Monacaではよりエンタープライズ向けの開発を強化すべく、Monaca for Visual Studioをリリースするなど、より企業システムの中でもアプリ開発を活用してもらうためのサービスを拡充しています。

今回はその一つ、MonacaとAzure Mobileサービスを組み合わせた利用法を紹介します。なお、実際の利用に際して以下の準備が必要です。

Windows Azure のアカウント（無料期間あり）
Monaca のアカウント（無料）

Windows Azureにてモバイルサービスを作成

Windows Azureにログインすると、ダッシュボードが表示されます。

まずモバイルサービスを作成します。画面下にある新規というリンクから、コンピューティング＞モバイルサービス＞作成の順番に辿っていきます。

そして任意の名前でモバイルサービスを作成します。データベースは無料で20MB分のものが一つだけ作成できますので、それを選択します。

データベースの接続設定はログイン、パスワードを任意で決めてください。

そうするとモバイルサービスの作成処理が実行され、しばらく待つと完了します。

モバイルサービス名をクリックすると、作成したモバイルサービスのダッシュボードに入ります。

データを作成

まずデータ（テーブル）を作成します。データタブをクリックします。

さらにテーブルの追加をクリックします。テーブル名は任意ですが、今回はMemoListとしました。

完了ボタンをクリックすると新しいテーブルが作成されます。

テーブル名をクリックすると、デフォルトのカラムが一覧表示されます。

一番下にある列の追加をクリックします。

今回はtextとしてString型の列を追加します。

完了したら、ダッシュボードの下にあるキーの管理を選択します。そうするとアプリケーションキーが表示されますのでこれをメモしておきます。

Windows AzureへのアクセスはこのアプリケーションキーとモバイルサービスURLを使って行います。

Visual StudioでMonacaプロジェクトの作成

今回はAzureということもありますのでVisual Studioを使って開発してみます。Monacaアカウントさえあれば、Webブラウザを立ち上げることなくMonacaアプリが作成できます。Monacaプラグインを配布していますので、ツールメニューから拡張機能と更新プログラムを選んでMonacaで検索してください。

出てきたMonacaをインストールして、Visual Studioを再起動すればインストールが完了します。

プラグインがインストールされていると、Visual Studioで新規プロジェクトを選んだ際にMonacaが選択に出るようになります。今回は新しいプロジェクトなのでCreate Monaca Projectを選択します。

最初にMonacaにログインします。

テンプレートを選びますので、最小限のテンプレートを選択します。

Windows Azureを使う方法について

プロジェクトができあがったら、Windows Azureを使う準備をします。2つの方法があります。

1. Cordovaプラグインを使う

MonacaではWindows Azure向けにCordovaプラグインを提供しています。これは MONACA メニューのConfiguration ＞ Cordovaプラグインの管理より選択できます。Windows Azure Mobile Servicesを選択してください。

プラグインを使った場合、iOSまたはAndroidアプリとしてビルドが必須になります。ビルド時に自動的にWindows Azure用ライブラリが読み込まれます。

2. JavaScriptを読み込む

Windows AzureがCDNで配信しているJavaScriptファイルを読み込むか、ファイルをダウンロードしてMonacaプロジェクトに取り込んで使うことができます。


<script src='https://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.2.5.min.js'></script>

上記タグを埋め込むことで利用ができるようになります。ただし使える機能は一部になります。例えばプッシュ通知機能などは利用できません。

Windows Azureを使ってみる

Windows Azureのテーブルを操作するスクリプトを書いてみます。


function onDeviceReady() {
    alert(true);
    var azure_url = "https://xxxxxxxx.azure-mobile.net/";
    var application_key = "APPLICATION_KEY";
    try {
        var client = new WindowsAzure.MobileServiceClient(azure_url, application_key);
    }catch(e) {
        alert(e);
    };
    var MemoList = client.getTable("memolist");
    var memo = { text: "Hello Azure" };
    MemoList.insert(memo).then(function () {
        alert("保存されました");
    }).fail(function (e) {
        alert(e);
    });
}
document.addEventListener("deviceready", onDeviceReady, false);