アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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

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



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





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



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



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





モバイルサービス作成



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





モバイルサービスの作成ウィザード



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



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





モバイルサービスの作成中



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





モバイルサービスダッシュボード



データを作成



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





データタブ



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





新しいテーブルの作成



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





作成完了



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





デフォルトのカラム



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





列の追加



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



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





アプリケーションキー



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



Visual StudioMonacaプロジェクトの作成



今回は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 AzureCDNで配信している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: クラウド コンピューティング プラットフォームとサービス