Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Pull request Compare This branch is 1 commit ahead, 3 commits behind natsumo:master.
NCMB Admin
NCMB Admin Merge pull request #4 from natsumo/master
社名変更・他
Latest commit a18aa50 Apr 25, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.monaca
platforms 1 Jun 29, 2016
readme-img
www fix Copyright name for LICENSE and java doc Apr 14, 2017
README.md
config.xml

README.md

【Monaca問題集】『オンラインランキング機能を作ってみよう!「連打ゲーム」』

RendaGame

コンテンツ概要

問題について

  • 問題は2問あります
  • 2問クリアすると「連打ゲーム」にオンラインランキング機能を実装したアプリが完成します
  • Monaca(ハイブリットアプリ開発環境)を使用してアプリを作成します
  • アカウントをお持ちでない場合は会員登録(無料)が必要です。
  • ブラウザ環境にInternet Explorerは使用できません
  • Google ChromeまたはFire Fox等をご使用ください。

問題に取り組む前の準備

Monacaでプロジェクトインポートしてアプリを起動

Monaca

  1. Monacaにログインします
  2. 左上の「Import Project」をクリックします
  3. 「プロジェクト名」を入力します 例)「連打アプリ」
  4. 「インポート方法」の「URLを指定してインポート」をチェックし、下記リンクを右クリックでコピーし、貼り付けます
  1. 「インポート」をクリックするとインポートされたプロジェクトが作成されます
  2. 作成されたプロジェクトを「開く」をクリックして開きます
  3. プロジェクトが開き、プレビュー画面が表示されます
  • プレビュー画面あるいはMonacaデバッガーで遊んでみましょう!

  • 動作確認は、プレビュー画面・Monacaデバッガーいずれも__iPhone6__の使用を推奨します

「連打ゲーム」の操作方法

  1. 「Start」ボタンをタップします
  2. 「3」,「2」,「1」とカウントダウンし、「スタート!」から「タイムアップ!」の10秒間「◎」の部分がタップできるようになります
  3. 10秒間の間に何回タップできるかを競う単純なゲームです
  4. 10秒経つと名前を入力するアラートが表示されますので、入力し「OK」をクリックします
  5. 画面に名前とスコアが表示されます
  • 4.で「キャンセル」をクリックした場合は「保存がキャンセルされました」と表示されます

注意:問題に取り組む前の状態では「ランキングを見る」ボタンをタップしてもランキングは表示されません

アプリの新規作成とAPIキーの設定

mBaaS

  • ニフティクラウドmobile backendにログインしアプリの新規作成を行います
  • アプリ名はわかりやすいものにしましょう。例)「renda」
  • アプリが作成されるとAPIキーが2種類(アプリケーションキーとクライアントキー)発行されます
  • 次で使用します。

Monaca

問題0-1

  • それぞれYOUR_NCMB_APPLICATION_KEYYOUR_NCMB_CLIENT_KEYの部分を書き換えます
  • このとき、ダブルクォーテーション(")を消さないように注意してください!

【問題1】:名前とスコアの保存をしてみよう!

js/tapGame.jsを開きます。下図の__saveScoreメソッドを編集し、引数のname(アラートで入力した名前)とscore__(連打ゲームでタップした回数)の値をmBaaSに保存する処理をコーディングしてください

問題1-1

  • データストアに保存先クラスを作成します
  • クラス名は「GameScore」としてください
  • nameを保存するフィールドを「name」、scoreを保存するフィールドを「score」として保存してください

ヒント

コーディング後の作業

問題1のコーディングが完了したら、下記の作業を行います

__【作業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」をクリックすると【問題1】で作成したsaveScoreメソッドが呼ばれ、データが保存されます

  • このとき下記のいずれかのログが出力されます

  • 保存に成功しました。objectId:************」の場合は保存成功です

  • 保存に失敗しました。エラー::************」の場合は保存失敗です

答え合わせ

▼答えはこちら▼

【問題1】解答

【問題2】:ランキングを表示しよう!

js/Ranking.jsを開きます。下図のcheckRankingメソッドを編集し、データストアのGameScoreクラスに保存したnamescoreのデータをscoreの降順(スコアの高い順)で検索・取得する処理をコーディングしてください

問題2-1

  • 検索データ件数は5件とします

ヒント

コーディング後の作業

問題2のコーディングが完了したら、下記の作業を行います

__【作業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メソッドが呼ばれ、【問題1】で保存されたデータが検索・取得されます

  • このとき下記のいずれかのログが出力されます

  • 検索に成功しました。」が表示された場合は検索成功です

  • 検索に失敗しました。エラー:************」が表示された場合は検索失敗です

  • 検索の状態(成功・失敗)に関係なく、「ランキングを見る」ボタンをタップしても、まだランキングは表示されません

__【作業2-3】__検索に成功したら、該当する箇所に以下の処理を追記して、取得した値から必要なデータを取り出し、ランキング画面へ反映させるsetDataメソッドを呼びます

  • 検索に成功した場合の処理を行う箇所に追記
// テーブルにデータをセット
setData(results);

__【作業2-4】__プレビュー画面あるいはデバッガーで実行し、「ランキングを見る」ボタンを押します

  • 先ほどのスコアが表示されれば完成です!おめでとうございます★

答え合わせ

▼答えはこちら▼

【問題2】解答

参考

  • 問題の回答を実装した完全なプロジェクトをご用意しています

▼完成版プロジェクト▼

「【完成版】連打ゲーム」

  • APIキーを設定してご利用ください
You can’t perform that action at this time.