2017/05/17作成 (2017/05/19修正)
- Monacaデバッガー使用時(iPhone6)の画面例です
GitHub
https://goo.gl/74KOyO
- ニフティクラウドmobile backend の機能『データストア』を学習するための問題集です
- ニフティクラウドmobile backend の利用登録（無料）が必要です。
- 問題用プロジェクトにはオンラインランキング機能が実装されていない状態の「連打ゲーム」です
- 既に実装済みのニフティクラウドmobile backend を利用するための準備（SDK導入など）方法の詳細はこちらをご覧ください。
http://mb.cloud.nifty.com/doc/current/introduction/quickstart_ios.html
- 問題は２問あります
- ２問クリアすると「連打ゲーム」にオンラインランキング機能を実装したアプリが完成します
- Monaca（ハイブリットアプリ開発環境）を使用してアプリを作成します
https://ja.monaca.io/ - アカウントをお持ちでない場合は会員登録（無料）が必要です。
- ブラウザ環境にInternet Explorerは使用できません
- Google Chrome（推奨）をご使用ください。
▼問題用プロジェクト▼
https://github.com/natsumo/MonacaFirstApp/archive/Question.zip
- Monacaにログインします
https://ja.monaca.io/ - 左上の「Import Project」をクリックします
- 「プロジェクト名」を入力します 例）「連打アプリ」
- 「インポート方法」の「URLを指定してインポート」をチェックし、上記リンク（問題用プロジェクト）をコピーし、貼り付けます
- 「インポート」をクリックするとインポートされたプロジェクトが作成されます
- 作成されたプロジェクトを「開く」をクリックして開きます
- プロジェクトが開き、プレビュー画面が表示されます
- プレビュー画面で遊んでみましょう！
- Monacaデバッガーも使用可能です
https://ja.monaca.io/debugger.html
- 「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 のドキュメントページをご活用ください
http://mb.cloud.nifty.com/doc/current/datastore/basic_usage_monaca.html
問題１のコーディングが完了したら、下記の作業を行います
それぞれ該当する箇所に以下の処理を追記して、実行時にコンソールにログを表示できるようにします
- 保存に成功した場合の処理を行う箇所に追記
- 保存に失敗した場合の処理を行う箇所に追記
- プレビュー画面の場合：【Windows】→「F12」キーまたは「Ctrl+Shift+K」、【Mac】「Command+Option+I」で表示されます
- デバッガーの場合：画面のアイコンをタップし、「!」マークのアイコンをクリックすると「App Log」画面に表示されます
※ 注意：入力が完了したら必ず__「保存」をクリック__してプロジェクトを保存してください！Windowsの場合「Ctrl+S」、iOSの場合「Command+S」でも保存可能です。
プレビュー画面あるいはデバッガーで実行し、「Start」ボタンを押してゲームを遊びます
- 名前を入力し、「OK」をクリックすると【問題１】で作成した
saveScoreメソッドが呼ばれ、データが保存されます - このとき下記のいずれかのログが出力されます
- 保存成功時：「
保存に成功しました。」 - 保存失敗時：「
保存に失敗しました。エラー:************」
- 保存されたデータを確認しましょう
- 「データストア」をクリックすると、「
GameScore」クラスにデータが登録されていることが確認できます。
- 上図はスコアが35連打で名前を「あいうえお」とした場合の例です。
- 模範解答は以下です
js/Ranking.jsを開きます。下図のcheckRankingメソッドを編集し、データストアのGameScoreクラスに保存したnameとscoreのデータをscoreの降順（スコアの高い順）で検索・取得する処理をコーディングしてください
- 検索データ件数は５件とします
- ニフティクラウドmobile backend のドキュメントページをご活用ください
http://mb.cloud.nifty.com/doc/current/datastore/basic_usage_monaca.html
http://mb.cloud.nifty.com/doc/current/datastore/ranking_monaca.html
問題２のコーディングが完了したら、下記の作業を行います
それぞれ該当する箇所に以下の処理を追記して、実行時にコンソールにログを表示できるようにします
- 検索に成功した場合の処理を行う箇所に追記
- 検索に失敗した場合の処理を行う箇所に追記
- プレビュー画面の場合：【Windows】→「F12」キーまたは「Ctrl+Shift+K」、【Mac】「Command+Option+I」で表示されます
- デバッガーの場合：画面のアイコンをタップし、「!」マークのアイコンをクリックすると「App Log」画面に表示されます
※ 注意：入力が完了したら必ず__「保存」をクリック__してプロジェクトを保存してください！Windowsの場合「Ctrl+S」、iOSの場合「Command+S」でも保存可能です。
プレビュー画面あるいはデバッガーで実行し、「ランキングを見る」ボタンをタップします
-
画面起動後、
checkRankingメソッドが呼ばれ、【問題１】で保存されたデータが検索・取得されます -
このとき下記のいずれかのログが出力されます
-
保存成功時：「
保存に成功しました。」 -
保存失敗時：「
検索に失敗しました。エラー:******」 -
検索の状態（成功・失敗）に関係なく、「ランキングを見る」ボタンをタップしても、まだランキングは表示されません
検索に成功したら、該当する箇所に以下の処理を追記して、取得した値から必要なデータを取り出し、ランキング画面へ反映させるsetDataメソッドを呼びます
- 検索に成功した場合の処理を行う箇所に追記
プレビュー画面あるいはデバッガーで実行し、「ランキングを見る」ボタンを押します
- 先ほどのスコアが表示されれば完成です！おめでとうございます★
- ランキング画面を確認しましょう
- アプリで「ランキングを見る」をタップすると以下のようにランキングが表示されます
- 上図は３回遊んだ場合の例です。複数回遊んで、ランキングが表示されることを確認しましょう！
- 模範解答は以下です
- 問題の回答を実装した完全なプロジェクトをご用意しています
▼完成版プロジェクト▼
https://github.com/natsumo/MonacaFirstApp/archive/AnswerProject.zip
- APIキーを設定してご利用ください