Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
Monaca
タグ :
JavaScript
Monaca
Windows Azure

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にログインします。




Monacaログイン

Monacaログイン



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




テンプレート選択

テンプレート選択



Windows Azureを使う方法について



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



1. Cordovaプラグインを使う



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




Cordovaプラグインの管理

Cordovaプラグインの管理



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



2. JavaScriptを読み込む



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



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



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



Windows Azureを使ってみる



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



  1. function onDeviceReady() {
  2.     alert(true);
  3.     var azure_url = "https://xxxxxxxx.azure-mobile.net/";
  4.     var application_key = "APPLICATION_KEY";
  5.     try {
  6.         var client = new WindowsAzure.MobileServiceClient(azure_url, application_key);
  7.     }catch(e) {
  8.         alert(e);
  9.     };
  10.     var MemoList = client.getTable("memolist");
  11.     var memo = { text: "Hello Azure" };
  12.     MemoList.insert(memo).then(function () {
  13.         alert("保存されました");
  14.     }).fail(function (e) {
  15.         alert(e);
  16.     });
  17. }
  18. document.addEventListener("deviceready", onDeviceReady, false);

このMonacaアプリを実行すると、次のようにダイアログが表示されます。




アプリを実行したところ

アプリを実行したところ



そしてWindows Azureにてデータを確認すると、実際にデータが追加されているのが分かります。




Windows Azureでのデータ確認

Windows Azureでのデータ確認






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



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