ニフティクラウド 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を取得する
<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の管理画面にログインしてアプリケーションキー、クライアントキーを取得します。
<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の管理画面のデータストアを見てみます。
JavaScript SDKを使えばPhoneGapプロジェクトの中にニフティクラウド mobile backendが簡単に追加できます。ぜひお試しください!