FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Cordovaプロジェクトでニフティクラウド mobile backendをはじめてみよう

ニフティクラウド 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つの方法があると思われます。

  1. Bower
  2. npm + browserify
  3. 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アプリからクラウドにデータを保存する流れができるようになると思います。ぜひお試しください!