PhoneGapとニフティクラウド mobile backendを組み合わせて使ってみる

ニフティクラウド mobile backendはMonaca連携をしていますので、開発環境構築などの手間を考えるとMonacaを使う方が簡単なのですが、既にPhoneGapプロジェクトを立ち上げていたり、実機でバッグなどをがしがし行おうと思うと素のPhoneGap/Cordovaを選択することになるかと思います。

そこで今回はPhoneGapとニフティクラウド mobile backendを組み合わせた使い方を紹介します。使うのはJavaScript SDKになります。

PhoneGapのインストール

PhoneGapはnode/npmを使ってインストールするのが手軽です。

$ npm install -g phonegap
# iOSシミュレータでデバッグする場合（必要があれば）
$ npm install -g ios-sim

まず新しいプロジェクトを立ち上げます。

$ phonegap create NCMB-PhoneGap com.nifty.cloud.mb.phonegap

ベースが生成されたらビルドしてみます。

$ cd NCMB-PhoneGap/
$ phonegap run ios --emulator

無事立ち上がりました。

初期化する

ニフティクラウド mobile backendの管理画面にログインしてアプリケーションキー、クライアントキーを取得します。

その上で index.html で初期化をします。

<script type="text/javascript">
  NCMB.initialize("APPLICATION_KEY", 
    "CLIENT_KEY");
  app.initialize();
</script>

APPLICATION_KEYとCLIENT_KEYを設定してください。

データストアを呼び出す

js/index.js の onDeviceReady にて必要な処理を実装します。

onDeviceReady: function() {
  app.receivedEvent('deviceready');
  var TestClass = NCMB.Object.extend("TestClass");
  var query = new NCMB.Query(TestClass);
  query.equalTo("message", "test");
  query.find({
    success: function(data) {
      if (data[0] == null) {
        var testClass = new TestClass();
        testClass.set("message", "Hello, NCMB!");
        testClass.save();
      }else{
      }
    }
  });
},

この状態にして実行してみます。

画面は特に作っていませんので先ほどと変わらないかと思います。そこでニフティクラウド mobile backendの管理画面のデータストアを見てみます。