ニフティクラウド mobile backendはCordovaをベースとした開発環境を提供するMonacaと連携しています。今回は、その素のCordovaプロジェクトでニフティクラウド mobile backendを使う方法を紹介します。
前提として、Node.jsがインストール済みであることとします。
Cordovaコマンドでプロジェクト作成
まずCordovaプロジェクトを作成します。そして、サポートするプラットフォームをインストールします。
$ cordova create HelloNCMB jp.moongift.hello $ HelloNCMB $ cordova platform add ios
Bowerでライブラリをインストール
次にNCMBのJavaScript SDKをインストールするのですが、主に3つの方法があると思われます。
- Bower
- npm + browserify
- JavaScript SDKをダウンロード
今回は1を使いますが、2は大型化した時に向いていると思います。3はReleases · NIFTYCloud-mbaas/ncmb_jsよりダウンロードしてください。
1の場合はBowerを最初にインストールします。
$ npm install bower -g
次にBowerプロジェクトを初期化し、JavaScript SDKをインストールします。
$ bower init . $ bower install ncmb --save
これで bower_components/ncmb/ncmb.min.js
にSDKがインストールされました。
セキュリティポリシーの変更
次に www/index.html を開き、アクセスできるURL制限を変更します。
元:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;" >
新:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src 'self' https://mb.api.cloud.nifty.com" >
これにより、NCMBのサーバへAjaxアクセスできるようになります。
JavaScript SDKの読み込み
続けて www/index.html
を編集します。
元:
<script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script>
新:
<script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="bower_components/ncmb/ncmb.min.js"></script> <script type="text/javascript" src="js/index.js"></script>
これでJavaScript SDKが読み込まれました。
データストアを試す
今回はデータストアを使ってみたいと思います。 www/js/index.js
を次のように変更します。YOUR_APPLICATION_KEY、YOUR_CLIENT_KEYはそれぞれ自分のものに読み替えてください。
receivedEvent: function(id) { : var application_key = "YOUR_APPLICATION_KEY"; var client_key = "YOUR_CLIENT_KEY"; var ncmb = new NCMB(application_key, client_key); var Hello = ncmb.DataStore("Hello"); var hello = new Hello(); hello.set("message", "Hello Cordova"); hello.save() .then(function(obj) { alert("Data save successful!"); }) .error(function(e) { alert(e); }); : }
これで実機、またはシミュレータ/エミュレータで実行すると、保存されたというダイアログが出るはずです。
ニフティクラウド mobile backendの管理画面上でもデータが保存できているのが確認できるはずです。
以上がCordovaアプリでデータストアを使うまでの流れになります。慣れてしまえばものの数分でCordovaアプリからクラウドにデータを保存する流れができるようになると思います。ぜひお試しください!