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);
このMonacaアプリを実行すると、次のようにダイアログが表示されます。
そしてWindows Azureにてデータを確認すると、実際にデータが追加されているのが分かります。
Windows Azureを使うことで、Monacaアプリの開発をVisual Studio上で行いつつ、さらにサーバサイドへのデータ保存処理も行えるようになります。Windows Azureを既に使われているならば、スムーズにハイブリッドアプリ開発に入れるはずです。お試しください！