- 本サンプルは不具合がある場合、issue等から報告いただくようにお願いいたします
- 作成日：2016/6（更新日：2020/6）
- Monacaデバッガー使用時(iPhone6)の画面例です
- ニフクラ mobile backendの機能『データストア』を学習するための問題集です
- ニフクラ mobile backendの利用登録（無料）が必要です。
- 問題用プロジェクトにはオンラインランキング機能が実装されていない状態の「連打ゲーム」です
- 既に実装済みのニフクラ mobile backendを利用するための準備（SDK導入など）方法の詳細はこちらをご覧ください。
- Cordova 9.0, Javascript SDK ver 3.1.1導入済み
- Monacaデバッグアプリ
- 問題は２問あります
- ２問クリアすると「連打ゲーム」にオンラインランキング機能を実装したアプリが完成します
- Monaca（ハイブリットアプリ開発環境）を使用してアプリを作成します
- アカウントをお持ちでない場合は会員登録（無料）が必要です。
- ブラウザ環境にInternet Explorerは使用できません
- Google ChromeまたはFire Fox等をご使用ください。
- Monacaにログインします
- 左上の「Import Project」をクリックします
- 「プロジェクト名」を入力します 例）「連打アプリ」
- 「インポート方法」の「URLを指定してインポート」をチェックし、下記リンクを右クリックでコピーし、貼り付けます
- 問題用プロジェクト：連打ゲーム
- 「インポート」をクリックするとインポートされたプロジェクトが作成されます
- 作成されたプロジェクトを「開く」をクリックして開きます
- プロジェクトが開き、プレビュー画面が表示されます
-
プレビュー画面あるいはMonacaデバッガーで遊んでみましょう！
-
動作確認は、プレビュー画面・Monacaデバッガーいずれも__iPhone6__の使用を推奨します
- 「Start」ボタンをタップします
- 「3」,「2」,「1」とカウントダウンし、「スタート！」から「タイムアップ！」の10秒間「◎」の部分がタップできるようになります
- 10秒間の間に何回タップできるかを競う単純なゲームです
- 10秒経つと名前を入力するアラートが表示されますので、入力し「OK」をクリックします
- 画面に名前とスコアが表示されます
- 4.で「キャンセル」をクリックした場合は「保存がキャンセルされました」と表示されます
※注意：問題に取り組む前の状態では「ランキングを見る」ボタンをタップしてもランキングは表示されません
- ニフクラ mobile backendにログインしアプリの新規作成を行います
- アプリ名はわかりやすいものにしましょう。例）「renda」
- アプリが作成されるとAPIキーが２種類（アプリケーションキーとクライアントキー）発行されます
- 次で使用します。
js/tapGame.jsを編集します- 先程ニフクラ mobile backendのダッシュボード上で確認したAPIキーを貼り付けます
- それぞれ
YOUR_NCMB_APPLICATION_KEYとYOUR_NCMB_CLIENT_KEYの部分を書き換えます - このとき、ダブルクォーテーション（
"）を消さないように注意してください！
js/tapGame.jsを開きます。下図の__saveScoreメソッドを編集し、引数のname（アラートで入力した名前）とscore__（連打ゲームでタップした回数）の値をmBaaSに保存する処理をコーディングしてください
- データストアに保存先クラスを作成します
- クラス名は「
GameScore」としてください nameを保存するフィールドを「name」、scoreを保存するフィールドを「score」として保存してください
- ニフクラ mobile backendのドキュメントページをご活用ください
- データストア（Monaca）：基本的な使い方
問題１のコーディングが完了したら、下記の作業を行います
__【作業1-1】__それぞれ該当する箇所に以下の処理を追記して、実行時にコンソールにログを表示できるようにします
- 保存に成功した場合の処理を行う箇所に追記
// 保存に成功した場合の処理
console.log("保存に成功しました。");- 保存に失敗した場合の処理を行う箇所に追記
// 保存に成功した場合の処理
console.log("保存に失敗しました。エラー:" + error); -
コンソールログの確認方法（ブラウザのコンソール表示）
-
プレビュー画面の場合：【Windows】→「F12」キーまたは「Ctrl+Shift+K」、【Mac】「Command+Option+I」で表示されます
-
デバッガーの場合：画面のアイコンをタップし、「!」マークのアイコンをクリックすると「App Log」画面に表示されます
-
注意：入力が完了したら必ず__「保存」をクリック__してプロジェクトを保存してください！
-
Windowsの場合「Ctrl+S」、iOSの場合「Command+S」でも保存可能です
__【作業1-2】__プレビュー画面あるいはデバッガーで実行し、「Start」ボタンを押してゲームを遊びます
-
名前を入力し、「OK」をクリックすると【問題１】で作成した
saveScoreメソッドが呼ばれ、データが保存されます -
このとき下記のいずれかのログが出力されます
-
「
保存に成功しました。objectId:************」の場合は保存成功です -
「
保存に失敗しました。エラー::************」の場合は保存失敗です
▼答えはこちら▼
js/Ranking.jsを開きます。下図のcheckRankingメソッドを編集し、データストアのGameScoreクラスに保存したnameとscoreのデータをscoreの降順（スコアの高い順）で検索・取得する処理をコーディングしてください
- 検索データ件数は５件とします
- ニフクラ mobile backendのドキュメントページをご活用ください
- データストア（Monaca）：基本的な使い方
- データストア（Monaca）：ランキングを作る
問題２のコーディングが完了したら、下記の作業を行います
__【作業2-1】__それぞれ該当する箇所に以下の処理を追記して、実行時にコンソールにログを表示できるようにします
- 検索に成功した場合の処理を行う箇所に追記
// 検索に成功した場合の処理
console.log("検索に成功しました。");- 検索に失敗した場合の処理を行う箇所に追記
// 検索に失敗した場合の処理
console.log("検索に失敗しました。エラー:" +error);-
コンソールログの確認方法（ブラウザのコンソール表示）
-
プレビュー画面の場合：【Windows】→「F12」キーまたは「Ctrl+Shift+K」、【Mac】「Command+Option+I」で表示されます
-
デバッガーの場合：画面のアイコンをタップし、「!」マークのアイコンをクリックすると「App Log」画面に表示されます
-
注意：入力が完了したら必ず__「保存」をクリック__してプロジェクトを保存してください！
-
Windowsの場合「Ctrl+S」、iOSの場合「Command+S」でも保存可能です
__【作業2-2】__プレビュー画面あるいはデバッガーで実行し、「ランキングを見る」ボタンをタップします
-
画面起動後、
checkRankingメソッドが呼ばれ、【問題１】で保存されたデータが検索・取得されます -
このとき下記のいずれかのログが出力されます
-
「
検索に成功しました。」が表示された場合は検索成功です -
「
検索に失敗しました。エラー:************」が表示された場合は検索失敗です -
検索の状態（成功・失敗）に関係なく、「ランキングを見る」ボタンをタップしても、まだランキングは表示されません
__【作業2-3】__検索に成功したら、該当する箇所に以下の処理を追記して、取得した値から必要なデータを取り出し、ランキング画面へ反映させるsetDataメソッドを呼びます
- 検索に成功した場合の処理を行う箇所に追記
// テーブルにデータをセット
setData(results);__【作業2-4】__プレビュー画面あるいはデバッガーで実行し、「ランキングを見る」ボタンを押します
- 先ほどのスコアが表示されれば完成です！おめでとうございます★
▼答えはこちら▼
- 問題の回答を実装した完全なプロジェクトをご用意しています
▼完成版プロジェクト▼
- APIキーを設定してご利用ください