More Related Content
Similar to 書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編) (20)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
- 3. Copyright © Asial Corporation. All Rights Reserved.
今回のテーマ
Onsen UIを利用して、4択問題から1つ選択する形式の、
試験問題アプリを作成します。
JSONファイルに定義された問題データを取得する
問題の正誤判定を行う
最後に正答率を表示する
3
結果表示
- 5. Copyright © Asial Corporation. All Rights Reserved.
Onsen UI
• HTML5モバイルアプリのための、UIフレームワーク(画面を作るための
ツール)です。
• Apple/Googleのスタイルガイドラインに準拠した、「アプリらしい」画面
を作ることができます。
• また、HTML5で作ったアプリで課題となりがちな、パフォーマンスの問題
が改善されます。
5
- 6. Copyright © Asial Corporation. All Rights Reserved.
豊富なUIパーツを利用可能
ボタンやテキストボックスなどの入力項目や、ツールバーやタブバーといった
画面のレイアウトを構成するパーツが豊富に用意されています。
また、スマートフォンOSの種類を判別して、Androidであればマテリアルデザ
イン(立体的な質感のデザイン)、iOSの場合はフラットデザイン(平坦な質
感のデザイン)を自動的に適用する機能が搭載されています。
6
- 7. Copyright © Asial Corporation. All Rights Reserved.
使い方は独自タグを記述するだけの簡単設計
Onsen UIの使い方は、独自のタグを記載するだけです。
<ons-toolbar></ons-toolbar>
<ons-list-item></ons-list-item>
<ons-tabbar></ons-tabbar>
7
- 9. Copyright © Asial Corporation. All Rights Reserved.
JSONとは
[
"りんご",
"みかん",
"ぶどう"
]
相互変換
JSON
JSONとは
JavaScriptの配列を文字列として扱うデータ形式です。
JSONのデータと配列は相互に変換することができます。
9
りんご みかん ぶどう
JavaScriptの配列
- 10. Copyright © Asial Corporation. All Rights Reserved.
Excel → JSON
Excelの問題データをJSON形式に変換する方法
Excelで問題を作成します。
10
今回は以下のような形式で作成します。
• no 問題番号
• title 問題文
• choice1 選択肢1
• choice2 選択肢2
• choice3 選択肢3
• choice4 選択肢4
• answer 正解の選択肢番号
- 11. Copyright © Asial Corporation. All Rights Reserved.
Excel → JSON
Excelの問題データをJSON形式に変換する方法
CSV形式(カンマ区切りの形式)で保存します。
11
[はい]を選択
- 12. Copyright © Asial Corporation. All Rights Reserved.
Excel → JSON
Excelの問題データをJSON形式に変換する方法
保存したCSVファイルを右クリックして、[プログラムから開く] >
[メモ帳]を選択します。
12
- 13. Copyright © Asial Corporation. All Rights Reserved.
Excel → JSON
Excelの問題データをJSON形式に変換する方法
CSVファイルの内容をコピーして、JSONに変換するサイトで変換
(Convert)を実行します。
13
例: http://www.csvjson.com/csv2json
- 16. Copyright © Asial Corporation. All Rights Reserved.
新しいプロジェクトを作成する
Monacaにログインし、ダッシュボードで「新規プロジェクトの作
成」ボタンを選択します。
16
- 17. Copyright © Asial Corporation. All Rights Reserved.
プロジェクトの作成
17
「Onsen UI V2 JS Minimum」テンプレートを選択 > プロジェク
ト名に「試験問題アプリ」と設定してプロジェクトを作成します。
- 18. Copyright © Asial Corporation. All Rights Reserved.
プロジェクトの作成
18
今 回 の ア プ リ で は 、 JSON デ ー タ を 取 得 す る た め の 命 令 を 持 つ
「jQuery」というライブラリを使います。
メニューバーの[設定] > [JS/CSSコンポーネントの追加と削除]を選
択し、jQueryをプロジェクトに追加します。
- 20. Copyright © Asial Corporation. All Rights Reserved.
問題データファイルの作成
1. [www]フォルダを右クリックし、[新規ファイル]を選択します。
2. ファイル作成ダイアログで、以下のように入力します。
└ フ ァ イ ル 名 : data.json
20
- 21. Copyright © Asial Corporation. All Rights Reserved.
問題データファイルの作成
先ほど作成したJSONデータを、data.jsonに貼り付けます。
21
- 23. Copyright © Asial Corporation. All Rights Reserved.
実習
index.htmlの<body>タグ内を以下のように変更します。
<body>
<ons-navigator id="navi" page="top.html"></ons-navigator>
</body>
23
- 24. Copyright © Asial Corporation. All Rights Reserved.
<ons-navigator>
【Onsen UI】画面の構成
今回のアプリは、複数の画面から構成されています。このような複数のページ
を扱うには、全体を管理する<ons-navigator>というタグを使います。
24
- 25. Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】<ons-navigator>
<ons-navigator>
• 複数ページを管理するタグです。画面上に描画されるパーツではありま
せん。
• 画面遷移のための命令を持っています。
<ons-navigator page="初期表示するページ"></ons-navigator>
25
- 26. Copyright © Asial Corporation. All Rights Reserved.
TOPページの作成
1. [www]フォルダを右クリックし、[新規ファイル]を選択します。
2. ファイル作成ダイアログで、以下のように入力します。
└ フ ァ イ ル 名 : top.html
└ テンプレート: Onsen Page
top.html
26
- 27. Copyright © Asial Corporation. All Rights Reserved.
実習
top.htmlを以下のように変更します。
<ons-page id="top-page" style="text-align:center">
<h1>試験問題アプリ</h1>
<ons-button style="width:80%" onclick="start()">スタート</ons-button>
</ons-page>
27
- 28. Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】画面の構成
<ons-navigator>の中に表示される各ページは、それぞれ<ons-page>タグ
で全体を囲みます。
<ons-page>
28
<ons-navigator>
<ons-page> <ons-page> <ons-page>
- 29. Copyright © Asial Corporation. All Rights Reserved.
実習
index.htmlの<script>タグ内を以下のように変更します。
<script>
// 問題データを取得
var questions;
$.getJSON("data.json", function(result) {
questions = result;
});
var score; // 正答数
var current; // 現在の問題インデックス
// 開始する
function start() {
current = 0;
score = 0;
document.getElementById("navi").pushPage("question.html");
}
</script>
29
- 30. Copyright © Asial Corporation. All Rights Reserved.
【jQuery】$.getJSON()
JSONデータの取得
• jQueryの$.getJSON()命令を使います。
• 第一引数に指定したJSONファイルの内容を取得し、取得が完了したら第
二引数の関数を実行します。
$.getJSON(ファイルのURL, データ取得後に実行する関数);
30
$.getJSON("data.json", function(result) {
// 省略
});
ここにdata.jsonの中身が
入ります
文法 JSONデータの取得
例 data.jsonファイルに記載されたデータを取得する
- 31. Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】ページ遷移
ons-navigatorは、ページを進めたり、戻ったりする命令を持っています。
ons-navigator要素.pushPage('ページURL');
popPage()
• 1つ前のページに戻ります。
ons-navigator要素.popPage();
pushPage()
• 指定したページへ遷移します。
resetToPage()
• 先頭のページに戻ります。
ons-navigator要素.resetToPage('ページURL');
31
- 33. Copyright © Asial Corporation. All Rights Reserved.
問題ページの作成
1. [www]フォルダを右クリックし、[新規ファイル]を選択します。
2. ファイル作成ダイアログで、以下のように入力します。
└ フ ァ イ ル 名 : question.html
└ テンプレート: Onsen Page
question.html
33
- 34. Copyright © Asial Corporation. All Rights Reserved.
実習
question.htmlを以下のように変更します。
<ons-page id="question-page">
<h1 id="title">問題文</h1>
<ons-list>
<ons-list-item modifier="longdivider">
<ons-button modifier="large" id="btn1" onclick="select(1)"></ons-button>
</ons-list-item>
<ons-list-item modifier="longdivider">
<ons-button modifier="large" id="btn2" onclick="select(2)"></ons-button>
</ons-list-item>
<ons-list-item modifier="longdivider">
<ons-button modifier="large" id="btn3" onclick="select(3)"></ons-button>
</ons-list-item>
<ons-list-item modifier="longdivider">
<ons-button modifier="large" id="btn4" onclick="select(4)"></ons-button>
</ons-list-item>
</ons-list>
</ons-page>
34
- 35. Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】リストの表示
<ons-list>
<ons-list-item>りんご</ons-list-item>
<ons-list-item>みかん</ons-list-item>
<ons-list-item>ぶどう</ons-list-item>
</ons-list>
<ons-list>
└ リスト全体を囲む要素です。
<ons-list-item>
└ リスト内の1件分の要素を表します。
35
- 36. Copyright © Asial Corporation. All Rights Reserved.
実習
index.htmlの<script>タグ内に、以下のコードを追記します。
// 各ページが開いたとき
document.addEventListener('init', function(event) {
// 開いたページ
var page = event.target;
// 問題ページが開いたとき
if(page.id == "question-page") {
// タイトルを設定
var title = "第" + questions[current].no + "問:" + questions[current].title;
page.querySelector('#title').innerHTML = title;
// 選択肢を設定
page.querySelector("#btn1").innerHTML = questions[current].choice1;
page.querySelector("#btn2").innerHTML = questions[current].choice2;
page.querySelector("#btn3").innerHTML = questions[current].choice3;
page.querySelector("#btn4").innerHTML = questions[current].choice4;
}
});
36
- 37. Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】ページの初期化処理
initイベント
• <ons-navigator>のナビゲーション機能によって、各ページが表示され
たタイミングでinitイベントが発生します。
• ページが開いたタイミングで何らかのデータを表示する処理は、initイベ
ントを使って行います。
document.addEventListener('init', function(event) {
var page = event.target;
if (page.id === '<ons-page>のID') {
// ページが開いたときに実行する処理
}
});
イベント引数の中の
「target」に、開いたページ
の<ons-page>要素が入って
います
37
- 39. Copyright © Asial Corporation. All Rights Reserved.
結果ページの作成
1. [www]フォルダを右クリックし、[新規ファイル]を選択します。
2. ファイル作成ダイアログで、以下のように入力します。
└ フ ァ イ ル 名 : result.html
└ テンプレート: Onsen Page
result.html
39
- 40. Copyright © Asial Corporation. All Rights Reserved.
実習
result.htmlを以下のように変更します。
<ons-page id="result-page" style="text-align:center">
<div style="height:300px">
<ons-icon icon="" size="300px" id="result-icon"></ons-icon>
</div>
<div>
<ons-button style="width:80%" onclick="next()">次へ</ons-button>
</div>
</ons-page>
40
- 41. Copyright © Asial Corporation. All Rights Reserved.
実習
index.htmlの<script>タグ内に、以下のコードを追記します。
// 回答を選択したとき
function select(choiceNo) {
var icon;
if(choiceNo == questions[current].answer) {
// 正解の場合、〇を表示して正答数をカウントアップ
icon = "circle-o";
score++;
} else {
// 間違いの場合、×を表示
icon = "ion-close";
}
// 結果ページに移動
document.getElementById("navi").pushPage("result.html")
.then(function(page) {
page.querySelector("#result-icon").setAttribute("icon", icon);
});
}
41
- 42. Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】<ons-navigator>
次のページへ進み、移動後に何らかの処理を行う
• 画面遷移をするには<ons-navigator>が持つpushPage()命令を利用し
ますが、移動完了後に何らかの処理をする場合は、pushPage()の後ろに
続けてthen()という命令を実行します。
• このように、JavaScriptではたくさんの命令を繋げて記述することがで
きます。(このような記述方法をメソッドチェーンと呼びます)
ons-navigator要素.pushPage(移動先ページ)
.then(ページ移動後に実行する処理);
42
- 44. Copyright © Asial Corporation. All Rights Reserved.
実習
index.htmlの<script>タグ内に、以下のコードを追記します。
// 次のページへボタンを押したとき
function next() {
current++;
if(current < questions.length) {
// 次の問題があるとき
document.getElementById("navi").pushPage('question.html');
} else {
// 最後の問題まで進んだとき
var percent = Math.floor(score / questions.length * 100);
var message = "正答率は" + percent + "%でした!";
alert(message);
// 最初のページに戻る
document.getElementById("navi").resetToPage("top.html");
}
}
44