ニフティクラウドmobile backend のJavaScript SDKでハマった話【早起きアプリ】

ニフティクラウドmobile backendに慣れるべく、サンプルの早起きアプリを作ってみたら少しハマってしまいました。
自分用メモですが、他の私のような初心者さんにも役に立つと嬉しいですね。

ちなみに、ニフティクラウドmobile backendについてはこちらがわかりやすいです。

• Nifty Cloud Mobile Backendとは？

公式の基本ガイドもあります。

• ニフティクラウド mobile backend 基本ガイド Kindle版

動作環境

• MacOS El Capitan　10.11.5
• GoogleChrome バージョン 51.0.2704.103 (64-bit)

ncmbはブラウザあれば動くので、OSは関係ないですが一応。

今回作ってみてハマった早起きアプリ

公式サイトからはなくなっていて、動画だけYouTubeにありました。

• 01/14 - ニフティクラウド mobile backendを使ってみよう

全14回で、これのとおりにやっていけばちゃんと完成するようになってます。

私もiPhoneアプリ開発初心者ですので、とりあえずこれのとおりにやってみよう・・・
と思ってやってみたのですが、コード写してるだけなのに動かないぞ・・・？となりました。

ハマった場所

動画でいうと、10回目ですね。
JavaScript SDKを組み込んだ後に書いた処理が動きませんでした。

index.html

//初期化
  var application_key = 'APIキー';
  var client_key = 'クライアントキー';
  var ncmb = new NCMB(application_key, client_key);

//データの保存
  var WakeUpClass = ncmb.DataStore("WakeUpClass");
  var WakeUpClass = NCMB.Object.extend("WakeUpClass");

  var wakeup = new WakeUpClass();
  wakeup.set("hour", hour);
  wakeup.save().then(function() {
     //データの抽出
     var query = new NCMB.Query(WakeUpClass);
     /*
     query.find().then(function(results) {
     console.log(results);
     });
     */
     query.count().then(function(count) {
     $(".msg").text("You're #" + count + "!");
     });
  });

原因

調べてみたところ、9回目でダウンロードしたJavaScript SDKのバージョンのせいだとわかりました。
動画だとver1.2.6のようなのですが、2016年7月の時点ではver2.1.1が最新なんですね。
一番古くてもver2.0.0までしかありませんでした。
バージョンが変わったことにより、書き方も少し変わっていたようです。

対処

SDKガイドを参考に、書き換えてみました。
これが正しい書き方なのかはわかりませんが、とりあえずこれで動きました。
旧バージョンのところはコメントアウトにしてます。

index.html

//初期化
  var application_key = 'APIキー';
  var client_key = 'クライアントキー';
  //NCMB.initialize(application_key, client_key);
  var ncmb = new NCMB(application_key, client_key);

//データの保存
  //var WakeUpClass = NCMB.Object.extend(“WakeUpClass”);
  var WakeUpClass = ncmb.DataStore("WakeUpClass");
  
  var wakeup = new WakeUpClass();
  wakeup.set("hour", hour);
  wakeup.save().then(function() {
     //データの抽出
     //var query = new NCMB.Query(WakeUpClass);
     //QueryはfetchAllと同じ
     //query.find().then(function(results) {
     WakeUpClass.count().fetchAll().then(function(results) {
        $(".msg").text("You're #" + results.count + "!");
     });
  });

こんな感じです。
以降は、動画を真似ていればできました。

初心者にとってはバージョンの違いとか気が付きにくいですよね。
これからもお勉強しなくては・・・

参考にさせていただいたサイト

チュートリアルMonacaでクイズアプリを作る（前半）で詰まっています

以上です。なにかご指摘などございましたらよろしくお願いいたします。