Monacaを使ってクイズアプリをたった1時間で作ってみる-後編-

前回はクイズアプリのトップページとクイズページの途中まで作成いたしました。今回はデータオブジェクトからクイズデータを持って来てバインド、正解不正解のアラート表示、結果画面でのスコア表示、全体のレイアウトを行いたいと思います。

クイズデータを作ろう

まずはクイズのデータを作成します。データは管理しやすくするためコントローラー内ではなくサービス(value)内で管理します。jsフォルダ内にservicesフォルダを新規作成して下さい。更にservicesフォルダ内にquestionsService.jsファイルを作成します。このファイル内にサービスを下記コードのように記述します。

2行目からのquestions配列の中に、問題ごとの問題文(text)答え(answer)答え以外の選択肢×3の配列(choices)を保持したオブジェクトを問題数分記述します。

作成したquestionsServiceファイルをindex.htmlのbody閉じタグ手前で読み込ませます。

データバインド用にクイズページを書き換えよう

前編で作成途中だったクイズページですが、仮で入れていた部分をデータバインドするように下記のように変更します。まだクイズページ用コントローラー(gameCtrl)の記述は済んでいないため、次章と照らし合わせるとデータバインド部分が分かるかと思います。

まず4行目ではクローズボタンがクリックされた時に実行する関数をng-clickで指定します。
13行目では現在のクイズ番号(items.currentNum)と全クイズ数(items.items.totalNum)をデータバインドさせます。items.currentNumは0から始まるので1を足します。
18行目では現在のクイズオブジェクト(items.currentQ)の問題文(text)をデータバインドさせます。
23行目からはng-repeatにて、現在のクイズオブジェクト(items.currentQ)の選択肢(choices)の分だけ、ons-col要素を繰り返させます。
25行目のng-clickにて解答ボタンがクリックされた時に実行する関数に、引数で選択肢の番号($index)を渡します。
26行目で解答ボタンに表示させるテキスト(choice)をデータバインドさせます。

クイズページ用コントローラーを作ろう

クイズページ用コントローラーでは、

  • 前々章で作成したクイズデータを取得
  • 前章で作成したクイズ用ページへのデータバインド
  • 解答ボタンがクリックされた時の正誤判定をアラート表示
  • 次のクイズを用意or結果ページへ遷移

の機能を実装します。app.jsのgameCtrlの関数内に下記のコードを追記してください。

コードの細かい部分はコメントを見てもらえば分かると思いますので、大事な点だけ下記にピックアップします。

1行目の引数にquestionsServiceを指定することによりクイズデータを収めたサービスをコントローラー内で使えるようにしています。
32行目のons.notification.alertではonsenUIの機能によりアラート表示を使用しています。詳しくはコチラ
39行目はこれから作成する結果ページへの遷移をさせます。pushPageの第二引数にオブジェクトを指定することにより、ページナビゲーター(myNavigator)にデータを保持させたままページ遷移させることが出来ます。全クイズ数と正解数をデータとして持たせ結果ページで使います。

結果ページを作ろう

全クイズの解答が完了したら、スコアを表示させる結果ページを表示させます。結果ページには

  • 何問中何問正解だったか
  • スコア
  • トップへ戻るボタン

を配置させます。wwwフォルダ内にresult.htmlを新規作成してください。元から記述があれば削除して下記のコードを参考にしてください。

ここまで来たら特に難しいことはありませんね。

それでは続けて結果ページ用コントローラーを下記のようにapp.jsへ追記します。

3行目のページナビゲーターのgetCurrentPage().optionsによってクイズページ用コントローラー(gameCtrl)より遷移時に渡されたデータ( {totalNum:全クイズ数,rightNum:正解数} )を取得しています。

以上で動きやシステム部分は完了です。iPhoneとAndroidで若干違いますが、各ページ下記のような見え方になっているかと思います。

monaca-app

レイアウトを調整しよう

最後に見え方を良くするためレイアウト調整で仕上げに入ります。ここからは単純にCSSを扱うだけなので好きなようにしていただければと思いますが、下記が今回使ったCSSです。cssフォルダに元からあるstyle.cssに書きます。

このCSSを付けることにより下の画像のように見えやすくなりました。

monaca-app02

また、背景やテキスト、コンポーネント各種の色をブラウザ上でカスタマイズできるOnsen Theme Rollerを使うと便利です。使い方は簡単ですが、詳しく知りたい方はコチラ

今回はツールバー部分とボタン部分をオレンジに変更しました。ダウンロードしたCSSファイルをcssフォルダに置き、index.htmlで読み込みます。

以上で完成!!お疲れ様でした。下記のような動き、デザインになりました。(GIFアニメーション)

monaca

まとめ

念の為、完成形のコードをGitへ上げておきます。wwwフォルダ内を参考にしてください。

https://github.com/matorel/monaca_quiz_app/tree/v1.0.0

今回の作り方はAngularJS流でしたので少しまどろっこしい部分もありますが、今後拡張していく上でその方が便利です。例えばクイズデータをサーバーから取得したり、クイズにレベルを設けたり、ハイスコアをデータベースに登録したりする複雑な工程はAngularJS流に書いたほうが自由にできます。

ここから実際はアプリをデプロイしてリリースする作業があります。それはまたの機会に紹介できたらと思います。