書籍『Monacaで学ぶはじめてのプログラミング』発展資料（試験問題アプリ編）

Copyright © Asial Corporation. All Rights Reserved.
はじめてのプログラミング
で学ぶ

試験問題アプリを作ろう
2

今回のテーマ
Onsen UIを利用して、4択問題から1つ選択する形式の、
試験問題アプリを作成します。
 JSONファイルに定義された問題データを取得する
 問題の正誤判定を行う
 最後に正答率を表示する
3
結果表示

Onsen UIとは
4

Onsen UI
• HTML5モバイルアプリのための、UIフレームワーク（画面を作るための
ツール）です。
• Apple/Googleのスタイルガイドラインに準拠した、「アプリらしい」画面
を作ることができます。
• また、HTML5で作ったアプリで課題となりがちな、パフォーマンスの問題
が改善されます。
5

豊富なUIパーツを利用可能
ボタンやテキストボックスなどの入力項目や、ツールバーやタブバーといった
画面のレイアウトを構成するパーツが豊富に用意されています。
また、スマートフォンOSの種類を判別して、Androidであればマテリアルデザ
イン（立体的な質感のデザイン）、iOSの場合はフラットデザイン（平坦な質
感のデザイン）を自動的に適用する機能が搭載されています。
6

使い方は独自タグを記述するだけの簡単設計
Onsen UIの使い方は、独自のタグを記載するだけです。
<ons-toolbar></ons-toolbar>
<ons-list-item></ons-list-item>
<ons-tabbar></ons-tabbar>
7

JSONとは
8

JSONとは
[
"りんご",
"みかん",
"ぶどう"
]
相互変換
JSON
JSONとは
 JavaScriptの配列を文字列として扱うデータ形式です。
 JSONのデータと配列は相互に変換することができます。
9
りんごみかんぶどう
JavaScriptの配列

Excel → JSON
Excelの問題データをJSON形式に変換する方法
 Excelで問題を作成します。
10
今回は以下のような形式で作成します。
• no 問題番号
• title 問題文
• choice1 選択肢１
• choice2 選択肢２
• choice3 選択肢３
• choice4 選択肢４
• answer 正解の選択肢番号

Excel → JSON
 CSV形式（カンマ区切りの形式）で保存します。
11
[はい]を選択

Excel → JSON
 保存したCSVファイルを右クリックして、[プログラムから開く] ＞
[メモ帳]を選択します。
12

Excel → JSON
 CSVファイルの内容をコピーして、JSONに変換するサイトで変換
（Convert）を実行します。
13
例： http://www.csvjson.com/csv2json

アプリの作成
14

プロジェクトの作成
15

新しいプロジェクトを作成する
Monacaにログインし、ダッシュボードで「新規プロジェクトの作
成」ボタンを選択します。
16

17
「Onsen UI V2 JS Minimum」テンプレートを選択＞プロジェク
ト名に「試験問題アプリ」と設定してプロジェクトを作成します。

18
今回のアプリでは、 JSON データを取得するための命令を持つ
「jQuery」というライブラリを使います。
メニューバーの[設定] ＞ [JS/CSSコンポーネントの追加と削除]を選
択し、jQueryをプロジェクトに追加します。

問題データファイルの作成
19

1. [www]フォルダを右クリックし、[新規ファイル]を選択します。
2. ファイル作成ダイアログで、以下のように入力します。
└ ファイル名： data.json
20

先ほど作成したJSONデータを、data.jsonに貼り付けます。
21

TOPページの作成
22

実習
index.htmlの<body>タグ内を以下のように変更します。
<body>
<ons-navigator id="navi" page="top.html"></ons-navigator>
</body>
23

<ons-navigator>
【Onsen UI】画面の構成
今回のアプリは、複数の画面から構成されています。このような複数のページ
を扱うには、全体を管理する<ons-navigator>というタグを使います。
24

【Onsen UI】<ons-navigator>
 <ons-navigator>
• 複数ページを管理するタグです。画面上に描画されるパーツではありま
せん。
• 画面遷移のための命令を持っています。
<ons-navigator page="初期表示するページ"></ons-navigator>
25

TOPページの作成
└ ファイル名： top.html
└ テンプレート： Onsen Page
top.html
26

実習
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

【Onsen UI】画面の構成
<ons-navigator>の中に表示される各ページは、それぞれ<ons-page>タグ
で全体を囲みます。
<ons-page>
28
<ons-navigator>
<ons-page> <ons-page> <ons-page>

実習
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

【jQuery】$.getJSON()
JSONデータの取得
• jQueryの$.getJSON()命令を使います。
• 第一引数に指定したJSONファイルの内容を取得し、取得が完了したら第
二引数の関数を実行します。
$.getJSON(ファイルのURL, データ取得後に実行する関数);
30
$.getJSON("data.json", function(result) {
// 省略
});
ここにdata.jsonの中身が
入ります
文法 JSONデータの取得
例 data.jsonファイルに記載されたデータを取得する

【Onsen UI】ページ遷移
ons-navigatorは、ページを進めたり、戻ったりする命令を持っています。
ons-navigator要素.pushPage('ページURL');
 popPage()
• １つ前のページに戻ります。
ons-navigator要素.popPage();
 pushPage()
• 指定したページへ遷移します。
 resetToPage()
• 先頭のページに戻ります。
ons-navigator要素.resetToPage('ページURL');
31

問題ページの作成
32

問題ページの作成
└ ファイル名： question.html
question.html
33

実習
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>
</ons-list-item>
</ons-list-item>
</ons-list>
</ons-page>
34

【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>
└ リスト内の１件分の要素を表します。
35

実習
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;
}
});
36

【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

結果ページの作成
38

結果ページの作成
└ ファイル名： result.html
result.html
39

実習
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

実習
// 回答を選択したとき
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

【Onsen UI】<ons-navigator>
次のページへ進み、移動後に何らかの処理を行う
• 画面遷移をするには<ons-navigator>が持つpushPage()命令を利用し
ますが、移動完了後に何らかの処理をする場合は、pushPage()の後ろに
続けてthen()という命令を実行します。
• このように、JavaScriptではたくさんの命令を繋げて記述することがで
きます。（このような記述方法をメソッドチェーンと呼びます）
ons-navigator要素.pushPage(移動先ページ)
.then(ページ移動後に実行する処理);
42

次の問題への遷移と正答率の計算
43

実習
// 次のページへボタンを押したとき
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

書籍『Monacaで学ぶはじめてのプログラミング』発展資料（試験問題アプリ編）

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 書籍『Monacaで学ぶはじめてのプログラミング』発展資料（試験問題アプリ編）

Similar to 書籍『Monacaで学ぶはじめてのプログラミング』発展資料（試験問題アプリ編） (20)

More from アシアル株式会社

More from アシアル株式会社 (20)

Recently uploaded

Recently uploaded (7)

書籍『Monacaで学ぶはじめてのプログラミング』発展資料（試験問題アプリ編）