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

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

 

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

 

 

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アプリの作成

 

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

 


Monacaログイン

 

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

 


テンプレート選択

 

Windows Azureを使う方法について

 

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

 

1. Cordovaプラグインを使う

 

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

 


Cordovaプラグインの管理

 

プラグインを使った場合、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でのデータ確認

 


 

Windows Azureを使うことで、Monacaアプリの開発をVisual Studio上で行いつつ、さらにサーバサイドへのデータ保存処理も行えるようになります。Windows Azureを既に使われているならば、スムーズにハイブリッドアプリ開発に入れるはずです。お試しください!

 

Microsoft Azure: クラウド コンピューティング プラットフォームとサービス

前の記事へ

次の記事へ

一覧へ戻る
PAGE TOP