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

RendaGame

コンテンツ概要

  • ニフクラmobile backendの機能『データストア』を学習するための問題集です
  • ニフクラmobile backendの利用登録(無料)が必要です。
  • 問題用プロジェクトにはオンラインランキング機能が実装されていない状態の「連打ゲーム」です
  • 既に実装済みのニフクラmobile backendを利用するための準備(SDK導入など)方法の詳細はこちらをご覧ください。

問題について

  • 問題は2問あります
  • 2問クリアすると「連打ゲーム」にオンラインランキング機能を実装したアプリが完成します
  • 問題を取り組む上で必要な開発環境は以下です
  • Mac OS 12.5.1 (Monterey)
  • Xcode Version 14.0
  • iPhone X (iOS 16)

問題に取り組む前の準備

プロジェクトのダウンロード

▼問題用プロジェクト▼

「連打ゲーム」

  1. 上記リンクをクリックしてzipファイルをローカルに保存します
  2. zipファイルを解凍して、SwiftFirstApp.xcworkspaceをダブルクリックしてXcodeでプロジェクトを開きます
  3. アプリを実行し、「連打ゲーム」で遊んでみましょう

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

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

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

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

mBaaS

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

Xcode

  • AppDelegate.swiftを編集します
  • 先程ニフクラmobile backendのダッシュボード上で確認したAPIキーを貼り付けます

問題0-1

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

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

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

問題1-1

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

ヒント

  • ニフクラmobile backendのiOSドキュメントはObjective-Cで書かれていますので、Swiftに書き換えたものを用意しました

コーディング後の作業

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

【作業1-1】それぞれ該当する箇所に以下の処理を追記して、実行時にXcode上にログを表示できるようにします

  • 保存に失敗した場合の処理を行う箇所に追記
// 保存に失敗した場合の処理
print("エラーが発生しました。エラーコード:\(error.code)")
  • 保存に成功した場合の処理を行う箇所に追記
// 保存に成功した場合の処理
print("保存に成功しました。objectId:\(obj.objectId)")

【作業1-2】シミュレーターで実行、「Start」ボタンを押してゲームを遊びます

  • 名前を入力し、「OK」がクリックされると【問題1】で作成したsaveScoreメソッドが呼ばれ、データが保存されます

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

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

  • エラーが発生しました。エラーコード:************」の場合は保存失敗です

※エラーコードが出た場合はこちらで確認できます

答え合わせ

▼答えはこちら▼

【問題1】解答

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

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

問題2-1

  • 検索データ件数は5件とします
  • ただし、この値は「rankingNumber」としてフィールドに設定しているため、「5」の代わりに「Int32(rankingNumber)」を使用して設定してください

ヒント

コーディング後の作業

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

【作業2-1】該当する箇所に以下の処理を追記して、実行時にXcode上にログを表示できるようにします

  • 検索に失敗した場合の処理を行う箇所に追記
// 検索に失敗した場合の処理
print("検索に失敗しました。エラーコード:\(error.code)")
  • 検索に成功した場合の処理を行う箇所に追記
// 検索に成功した場合の処理
print("検索に成功しました。")

【作業2-2】シミュレーターで実行し、「ランキングを見る」ボタンをタップします

  • 画面起動後、checkRankingメソッドが呼ばれ、【問題1】で保存されたデータが検索・取得されます

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

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

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

※エラーコードが出た場合はこちらで確認できます

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

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

  • 検索に成功した場合の処理を行う箇所に追記
// 取得したデータを格納
self.rankingArray = objects as! Array
// テーブルビューをリロード
self.rankingTableView.reloadData()

【作業2-4】シミュレーターで実行、「ランキングを見る」ボタンを押します

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

答え合わせ

▼答えはこちら▼

【問題2】解答

参考

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

▼完成版プロジェクト▼

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

  • APIキーを設定してご利用ください