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

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

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

無事立ち上がりました。

最新のJavaScript SDKを取得する

最新のSDKはこちらのJavaScript SDKダウンロードページよりダウンロードできます。このファイルを js/ 以下に保存し、index.htmlで読み込みます。

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/ncmb-latest.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

これで準備は完了です。

初期化する

ニフティクラウド 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の管理画面のデータストアを見てみます。

TestClassが追加され、カラム message の値が Hello, NCMB!になっているデータが追加されているはずです。


JavaScript SDKを使えばPhoneGapプロジェクトの中にニフティクラウド mobile backendが簡単に追加できます。ぜひお試しください!

f:id:mbaasblog:20180927104348p:plain