HTML・CSS・JavaScriptなどのWeb技術のみで制作が可能なスマートフォンアプリ、いわゆるハイブリッドアプリの制作サービスMonacaを使って簡単なクイズアプリを作ってみようと思います。今回は無料で使えるMonaca クラウド IDEを使って、ブラウザ上だけで制作しますので環境を整える必要もありません。
なおMonacaでアプリを作るにはAngularJSとOnsen UIの知識が必要ですが、この記事ではそれぞれの説明は割愛します。簡単な予備知識だけでも持っているとスムーズかと思います。
先に断わっておきますが、制作手順は我流です。なんでこんな効率悪いの？とか書き方が汚い!!と言ったことがあったらすみません。。
基本的にAngularJS流にコードは書いていきます。
完成は下記のような動きにする予定です。(GIFアニメーション)
Monacaにログインしよう
それでは早速下記リンクよりMonacaのサイトへアクセスして下さい。
Monaca – HTML5ハイブリッドアプリ開発プラットフォーム
まだMonacaのアカウントを作っていない方は先に右上のサインアップより登録してください。
今回はブラウザ上で制作するMonaca クラウド IDEを使って進めていくので無料プランで問題ありません。
登録が完了したら、まずはダッシュボードから新規プロジェクトをクリック。
右側に色々な項目のプロジェクトテンプレートが表示されます。
作りたいアプリに合わせ、ある程度のテンプレートが用意された状態からアプリ制作を始めることができます。
今回はOnsen UI最小限のテンプレートを選択します。
プロジェクト名は任意で付けましょう。後からの変更も可能です。
ちなみに2016年3月現在のcordovaバージョンは以下の通りです。もし原因不明のエラーなどがあればバージョンが違う事が原因かもしれません。
- CLIバージョン:5.2.0
- iOSプラットフォーム:3.9.1
- Androidプラットフォーム:4.1.1
プレビュー・デバッグ環境を整えよう
制作を始める前にプレビュー環境を整えましょう。ブラウザ上でも右側にPreview画面が表示されていると思います。表示されていない場合、上のメニューバーのプレビューを押してください。この画面でアプリの動作をテストできます。
Onsen UI最小限のテンプレートの初期段階では
- トップページのボタンを押すとPage2に遷移
- Page2からPop pageボタン、もしくはBackボタンでトップページに戻る
のみの機能です。
お持ちのスマートフォン実機でもMonaca用のアプリを使うことによりテストプレビューが可能です。Monacaデバッガーアプリをスマートフォンにインストールしましょう。
[appbox appstore 550941371 compact]
[appbox googleplay mobi.monaca.debugger compact]
アプリを起動したままブラウザ上で変更を保存すると、アプリ側でも即時同期されます。アプリの使い方は簡単ですが詳しく知りたい方はMonaca公式ページを参考にしてください。
index.htmlを変更しよう
それでは早速制作に取り掛かりましょう。用意したいページは
- スタートボタンを設置したトップページ
- 問題と解答ボタンを設置したクイズページ
- 結果のスコアを表示する結果ページ
の3ページのみのシンプルな構造にする予定です。
適時Ctrl + Sで保存してください。
まずは全部のページを管理するindex.htmlを変更します。
head内のscriptタグを見てください。
1 2 3 | <script> ons.bootstrap(); </script> |
ここのons.bootstrap()によってonsen UIの機能を初期化宣言しています。今回はソースコードをAngularJS流に書きたいので、引数に後で作るAngularJS用のモジュール名を配列に格納して指定します。名前は任意ですがここでは’myApp’としています。
1 2 3 | <script> ons.bootstrap(['myApp']); </script> |
さらにhead内でこれから作るapp.jsを読み込ませます。
1 2 3 | <script src="components/loader.js"></script> <script src="js/app.js"></script> <link rel="stylesheet" href="components/loader.css"> |
メインJSファイルを作ろう
左のwwwフォルダを右クリックして新規フォルダにjsと言う名前を付けます。ここにJavaScriptファイルを置いていきます。wwwフォルダに元からあるpage1.htmlとpage2.htmlは削除してしまってかまいません。
jsフォルダを右クリックして新規ファイルを作成し、app.jsと言うファイル名にします。このファイルをメインの統括JSファイルにします。第一引数に先ほど指定したモジュール名を、第二引数には依存する機能として’onsen‘を渡しAngularJS内でonsen UIの機能を使えるようにします。
1 | var app = angular.module( 'myApp', ['onsen']); |
トップページを作ろう
タイトルとスタートボタンを表示させるトップページを作ります。まず先ほどのindex.htmlのons-navigatorタグにこれから作るトップページ用のファイル(top.html)をpage属性に指定します。
1 2 | <ons-navigator var="myNavigator" page="top.html"> </ons-navigator> |
ons-navigatorはページナビゲーターと呼ばれ、このons-navigatorタグ内に指定したページが読み込まれます。var属性のmyNavigatorはこのナビゲーターの名前です。
ons-から始まるタグはonsen UIで元から用意されているコンポーネントです。詳しくは下記の公式ページを参考にしてください。
http://ja.onsen.io/reference/css.html#button
次に左のwwwフォルダを右クリックして新規ファイル、top.htmlを作成します。ファイルに元からコードの記述があれば全て削除します。
トップページにはタイトルとスタートボタンを設置します。下記のようなコードにしました。
1 2 3 4 5 6 7 8 9 10 11 | <ons-page> <div class="title"> <h1><span>matorel</span><br>Quiz App</h1> <p>monacaで作る簡単なクイズアプリ</p> </div> <div class="start-btn" ng-controller="topCtrl as top"> <ons-button modifier="large" ng-click="top.gameStart()"> Game Start </ons-button> </div> </ons-page> |
ons-pageタグで囲んだ範囲がindex.htmlのons-navigatorタグ内に表示されます。スタートボタンの表示にはons-buttonタグを使用してng-click属性によりクリックされた時に実行する関数を指定しています。
app.jsに戻り、トップページ用コントローラー(topCtrl)の作成を追記します。
1 2 3 4 5 | app.controller('topCtrl',function(){ this.gameStart = function(){ myNavigator.pushPage('game.html'); }; }); |
2行目は先ほどtop.html内のons-buttonタグでng-click属性に指定した関数です。myNavigatorはindex.html内のページナビゲーターの名前です。pushPageメソッドにより引数で指定したページへ遷移します。まだgame.htmlは作っていないのでスタートボタンをクリックしてもエラーになります。
ここまでで下の画像の様に表示されるはずです。
クイズページを作ろう
次にクイズページを作ります。クイズ用に一つのページを作り、問題・解答ボタンを入れ替えて使いまわします。
wwwフォルダにgame.htmlファイルを新規作成します。元からコードの記述があれば全て削除します。
クイズページには
- closeボタン(トップページへ戻る)
- 現在の問題番号
- 問題文
- 選択ボタン4つ
を表示させます。
それではまず先にapp.jsに空のクイズページ用コントローラー(gameCtrl)を追記しておきます。
1 2 3 | app.controller('gameCtrl',function(){ //後程追記します }); |
game.htmlには下の様に仮の問題文などを記述しておきます。後程AngularJSにより取得したクイズデータをバインドさせる予定です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <ons-page> <div ng-controller="gameCtrl as game"> <ons-toolbar> <div class="left"> <ons-toolbar-button> <ons-icon icon="ion-close-round" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon> </ons-toolbar-button> </div> <div class="center"> Quiz App </div> <div class="right"> 1/10問目 </div> </ons-toolbar> <div class="question"> <p> ここに問題文を表示します。ここに問題文を表示します。ここに問題文を表示します。ここに問題文を表示します。 </p> </div> <div class="choices"> <ons-row> <ons-col width="50%" align="center"> <div class="choice"> <button class="button button--large--cta">解答A</button> </div> </ons-col> <ons-col width="50%" align="center"> <div class="choice"> <button class="button button--large--cta">解答B</button> </div> </ons-col> <ons-col width="50%" align="center"> <div class="choice"> <button class="button button--large--cta">解答C</button> </div> </ons-col> <ons-col width="50%" align="center"> <div class="choice"> <button class="button button--large--cta">解答D</button> </div> </ons-col> </ons-row> </div> </div> </ons-page> |
まず、上から説明します。
3行目のons-toolbarタグ内でヘッダー部にツールバーを作成しています。左から、クローズ(トップへ戻る)ボタン、タイトル、問題番号を表示します。6行目クローズボタン部分では外部サービスのWEBアイコンを指定しています。詳しくはコチラ。
div.questionでは問題文を仮で入れています。
div.choicesでは解答ボタンを4つ仮で入れています。ons-row(行)の中でons-col(列)のwidthを50%に指定している為、横にボタンが2つ並ぶようにしています。
ここまでで、トップページのボタンをクリックすると下の画像の様に表示されるはずです。
後編に向けて
長くなってしまうので、続きは後編で説明します。後編では、問題をデータオブジェクトから持って来てgame.html内にバインド、正解不正解をアラート表示、結果画面でスコア表示、全体のレイアウト調整などをやりたいと思います。もしここまでで1時間以上かかってしまっているようでしたらごめんなさい。。念の為ここまでの所をGithub上に上げておきます。MonacaのGithub連携機能便利!!
