UIアプリ前回はクイズアプリのトップページとクイズページの途中まで作成いたしました。今回はデータオブジェクトからクイズデータを持って来てバインド、正解不正解のアラート表示、結果画面でのスコア表示、全体のレイアウトを行いたいと思います。まとめクイズデータを作ろうまずはクイズのデータを作成します。データは管理しやすくするためコントローラー内ではなくサービス(value)内で管理します。jsフォルダ内にservicesフォルダを新規作成して下さい。servicesフォルダ内にquestionsService.jsファイルを作成します。このファイル内にサービスを下記コードのように記述します。["FireFox","Opera","Safari"]},.........]});2行目からのquestions配列の中に、問題ごとの問題文(text)・答え(answer)・答え以外の選択肢×3の配列(choices)を保持したオブジェクトを問題数分記述します。作成したquestionsServiceファイルをindex.htmlのbody閉じタグ手前で読み込ませます。src="js/services/questionsService.js"></script></body>データバインド用にクイズページを書き換えよう前編で作成途中だったクイズページですが、仮で入れていた部分をデータバインドするように下記のように変更します。クイズページ用コントローラー(gameCtrl)の記述は済んでいないため、次章と照らし合わせるとデータバインド部分が分かるかと思います。ng-click="game.getAnswer($index)">{{choice}}</button></div></ons-col></ons-row></div></div></ons-page>まず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の関数内に下記のコードを追記してください。});};init();});コードの細かい部分はコメントを見てもらえば分かると思いますので、大事な点だけ下記にピックアップします。1行目の引数にquestionsServiceを指定することによりクイズデータを収めたサービスをコントローラー内で使えるようにしています。32行目のons.notification.alertではonsenUIの機能によりアラート表示を使用しています。39行目はこれから作成する結果ページへの遷移をさせます。pushPageの第二引数にオブジェクトを指定することにより、ページナビゲーター(myNavigator)にデータを保持させたままページ遷移させることが出来ます。全クイズ数と正解数をデータとして持たせ結果ページで使います。結果ページを作ろう全クイズの解答が完了したら、スコアを表示させる結果ページを表示させます。結果ページには何問中何問正解だったかスコアトップへ戻るボタンを配置させます。wwwフォルダ内にresult.htmlを新規作成してください。元から記述があれば削除して下記のコードを参考にしてください。ng-click="result.backTop()">トップへ戻る</ons-button></div></div></ons-page>ここまで来たら特に難しいことはありませんね。それでは続けて結果ページ用コントローラーを下記のようにapp.jsへ追記します。以上で動きやシステム部分は完了です。iPhoneとAndroidで若干違いますが、各ページ下記のような見え方になっているかと思います。レイアウトを調整しよう最後に見え方を良くするためレイアウト調整で仕上げに入ります。ここからは単純にCSSを扱うだけなので好きなようにしていただければと思いますが、下記が今回使ったCSSです。cssフォルダに元からあるstyle.cssに書きます。60px;}このCSSを付けることにより下の画像のように見えやすくなりました。Rollerを使うと便利です。使い方は簡単ですが、詳しく知りたい方はコチラ。今回はツールバー部分とボタン部分をオレンジに変更しました。ダウンロードしたCSSファイルをcssフォルダに置き、index.htmlで読み込みます。以上で完成!!お疲れ様でした。下記のような動き、デザインになりました。(GIFアニメーション)まとめ念の為、完成形のコードをGitへ上げておきます。wwwフォルダ内を参考にしてください。https://github.com/matorel/monaca_quiz_app/tree/v1.0.0今回の作り方はAngularJS流でしたので少しまどろっこしい部分もありますが、今後拡張していく上でその方が便利です。クイズデータをサーバーから取得したり、クイズにレベルを設けたり、ハイスコアをデータベースに登録したりする複雑な工程はAngularJS流に書いたほうが自由にできます。ここから実際はアプリをデプロイしてリリースする作業があります。それはまたの機会に紹介できたらと思います。リンク関連PREV:Monacaを使ってクイズアプリをたった1時間で作ってみる-前編-NEXT:ハイブリッドアプリで使えるデータベースまとめAboutこんにちは。matorel管理人です。都内でフロントエンドエンジニアをしております。このブログではWebデザインやアプリ制作に関する備忘録として技術や知識を紹介していきます。