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流に書いたほうが自由にできます。

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

matorelでは、もう少し色々な機能を搭載したクイズアプリをドコマチと言う名前でリリースしています。ベースは今回紹介した内容と同じよう作っています。もしよろしければダウンロードして遊んでみてください!!

The app was not found in the store. 🙁 #wpappbox

Links: → Visit Store → Search Google
 

 

 

 

 - Angular.js, JavaScript Tips, monaca, アプリ開発 , , ,