ニフティクラウドmobile backendを試してみる（７）早起きアプリpart2
前回は、monacaで早起きアプリの途中まで行った。
http://twosquirrel.mints.ne.jp/?p=11569
引き続き、以下の動画にしたがってやっていきたい。
（環境）
Cordova (PhoneGap) Loader Ver=1.0.0
Monaca Core Utility Ver=2.0.4
jQuery (Monaca Version) Ver=2.0.3
ncmb Ver=2.1.3
しかし、ここで要注意。
（参考）
ニフティクラウドmobile backend のJavaScript SDKでハマった話【早起きアプリ】
tsumi 2016年07月12日に更新
http://qiita.com/tsumi/items/4d1f9da56b3550e3be13
→このページ、本当に大事！！！
（８）JavaScript SDKを組み込む。
「上記の動画に従ってやっていく」といったが、2016年11月時点で上記動画に従うと失敗するので、いきなり、下記リンクにしたがって行っていく。
ニフティクラウドmobile backend のJavaScript SDKでハマった話【早起きアプリ】
tsumi 2016年07月12日に更新
http://qiita.com/tsumi/items/4d1f9da56b3550e3be13
具体的には、まず、 設定 ＞ JS/CSSコンポーネントの追加と削除
検索窓に、ncmb と入力して、検索 → 追加 → インストール開始
（９）NiftyCloud MobileBackendのアプリを新規作成
hayaoki という名前のNCMBアプリを作成
ニフティクラウドmobile backendの初期化（ここが、動画と異なる。ncmbのJavascript SDKのVerisionが、1.xから、2.xに変更したかららしいが、詳細は不明。とにかく、動画通りにやるとうまくいかない。参考：http://qiita.com/tsumi/items/4d1f9da56b3550e3be13）
ここで出てくる、「APIキー」と、「クライアントキー」をコピペ。
//初期化 var application_key = 'APIキー'; var client_key = 'クライアントキー'; //NCMB.initialize(application_key, client_key); var ncmb = new NCMB(application_key, client_key);
とにかく、var ncmb = new NCMB(application_key, client_key); と記載するところがポイント。その後も罠はいっぱい出てくる。
（１０）（１１）NCMBの「データストア」の利用
ど素人の私には、
データストア（JavaScript）基本的な使い方（公式のドキュメント）
http://mb.cloud.nifty.com/doc/current/datastore/basic_usage_javascript.html
を読んで実行するなんて無理。こちらを写経する。
<script>
var onDeviceReady = function() {
// 初期化
var application_key = '(アプリケーションキー)'
var client_key = '（クライアントキー）'
//NCMB.initialize(application_key, client_key); //(旧バージョン)
var ncmb = new NCMB(application_key, client_key);
$(".btn").on("click", function() {
// 今の時間を取得
var hour = (new Date()).getHours();
//var hour = 8;
console.log(hour);
// データの保存
//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 + "!");
});
});
// 条件分岐
// スマイルマークをハイライト
if (hour < 12) $(".fa:nth-child(1").addClass("highlight");
if (hour < 9) $(".fa:nth-child(2").addClass("highlight");
if (hour < 7) $(".fa:nth-child(3").addClass("highlight");
});
}
document.addEventListener("deviceready", onDeviceReady, false);
</script>
ここで、実機デバッグで、「Wake UP!!!」ボタンを押すと、NCMBのデータストアのところに、WakeUpClassというテーブルが作成されて、データが1個保存されている。
（１２）早起きした順番を表示する
</style>の直前に追加
.msg {
margin: 0 auto;
font-size: 22px;
color: #0AF;
}
<script>の前に、以下のような感じで追加。
<div class="btn">Wake UP!!!</div> <p class="msg"></p> <script>
実機（Androidスマホ）でデバッグ （なぜか、monacaのプレビュー画面ではうまくいかない）
ここまでとする。