Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Copyright © Asial Corporation. All Rights Reserved.
はじめてのプログラミング
で学ぶ
Copyright © Asial Corporation. All Rights Reserved.
試験問題アプリを作ろう
2
Copyright © Asial Corporation. All Rights Reserved.
今回のテーマ
Onsen UIを利用して、4択問題から1つ選択する形式の、
試験問題アプリを作成します。
 JSONファイルに定義された問...
Copyright © Asial Corporation. All Rights Reserved.
Onsen UIとは
4
Copyright © Asial Corporation. All Rights Reserved.
Onsen UI
• HTML5モバイルアプリのための、UIフレームワーク(画面を作るための
ツール)です。
• Apple/Googleの...
Copyright © Asial Corporation. All Rights Reserved.
豊富なUIパーツを利用可能
ボタンやテキストボックスなどの入力項目や、ツールバーやタブバーといった
画面のレイアウトを構成するパーツが豊富に...
Copyright © Asial Corporation. All Rights Reserved.
使い方は独自タグを記述するだけの簡単設計
Onsen UIの使い方は、独自のタグを記載するだけです。
<ons-toolbar></ons-...
Copyright © Asial Corporation. All Rights Reserved.
JSONとは
8
Copyright © Asial Corporation. All Rights Reserved.
JSONとは
[
"りんご",
"みかん",
"ぶどう"
]
相互変換
JSON
JSONとは
 JavaScriptの配列を文字列として...
Copyright © Asial Corporation. All Rights Reserved.
Excel → JSON
Excelの問題データをJSON形式に変換する方法
 Excelで問題を作成します。
10
今回は以下のような形...
Copyright © Asial Corporation. All Rights Reserved.
Excel → JSON
Excelの問題データをJSON形式に変換する方法
 CSV形式(カンマ区切りの形式)で保存します。
11
[は...
Copyright © Asial Corporation. All Rights Reserved.
Excel → JSON
Excelの問題データをJSON形式に変換する方法
 保存したCSVファイルを右クリックして、[プログラムから開...
Copyright © Asial Corporation. All Rights Reserved.
Excel → JSON
Excelの問題データをJSON形式に変換する方法
 CSVファイルの内容をコピーして、JSONに変換するサイト...
Copyright © Asial Corporation. All Rights Reserved.
アプリの作成
14
Copyright © Asial Corporation. All Rights Reserved.
プロジェクトの作成
15
Copyright © Asial Corporation. All Rights Reserved.
新しいプロジェクトを作成する
Monacaにログインし、ダッシュボードで「新規プロジェクトの作
成」ボタンを選択します。
16
Copyright © Asial Corporation. All Rights Reserved.
プロジェクトの作成
17
「Onsen UI V2 JS Minimum」テンプレートを選択 > プロジェク
ト名に「試験問題アプリ」と設定...
Copyright © Asial Corporation. All Rights Reserved.
プロジェクトの作成
18
今 回 の ア プ リ で は 、 JSON デ ー タ を 取 得 す る た め の 命 令 を 持 つ
「j...
Copyright © Asial Corporation. All Rights Reserved.
問題データファイルの作成
19
Copyright © Asial Corporation. All Rights Reserved.
問題データファイルの作成
1. [www]フォルダを右クリックし、[新規ファイル]を選択します。
2. ファイル作成ダイアログで、以下のよう...
Copyright © Asial Corporation. All Rights Reserved.
問題データファイルの作成
先ほど作成したJSONデータを、data.jsonに貼り付けます。
21
Copyright © Asial Corporation. All Rights Reserved.
TOPページの作成
22
Copyright © Asial Corporation. All Rights Reserved.
実習
index.htmlの<body>タグ内を以下のように変更します。
<body>
<ons-navigator id="navi" p...
Copyright © Asial Corporation. All Rights Reserved.
<ons-navigator>
【Onsen UI】画面の構成
今回のアプリは、複数の画面から構成されています。このような複数のページ
を扱...
Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】<ons-navigator>
 <ons-navigator>
• 複数ページを管理するタグです。画面上に描画される...
Copyright © Asial Corporation. All Rights Reserved.
TOPページの作成
1. [www]フォルダを右クリックし、[新規ファイル]を選択します。
2. ファイル作成ダイアログで、以下のように入力...
Copyright © Asial Corporation. All Rights Reserved.
実習
top.htmlを以下のように変更します。
<ons-page id="top-page" style="text-align:cen...
Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】画面の構成
<ons-navigator>の中に表示される各ページは、それぞれ<ons-page>タグ
で全体を囲みます...
Copyright © Asial Corporation. All Rights Reserved.
実習
index.htmlの<script>タグ内を以下のように変更します。
<script>
// 問題データを取得
var questi...
Copyright © Asial Corporation. All Rights Reserved.
【jQuery】$.getJSON()
JSONデータの取得
• jQueryの$.getJSON()命令を使います。
• 第一引数に指定し...
Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】ページ遷移
ons-navigatorは、ページを進めたり、戻ったりする命令を持っています。
ons-navigator...
Copyright © Asial Corporation. All Rights Reserved.
問題ページの作成
32
Copyright © Asial Corporation. All Rights Reserved.
問題ページの作成
1. [www]フォルダを右クリックし、[新規ファイル]を選択します。
2. ファイル作成ダイアログで、以下のように入力し...
Copyright © Asial Corporation. All Rights Reserved.
実習
question.htmlを以下のように変更します。
<ons-page id="question-page">
<h1 id="ti...
Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】リストの表示
<ons-list>
<ons-list-item>りんご</ons-list-item>
<ons-li...
Copyright © Asial Corporation. All Rights Reserved.
実習
index.htmlの<script>タグ内に、以下のコードを追記します。
// 各ページが開いたとき
document.addEve...
Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】ページの初期化処理
initイベント
• <ons-navigator>のナビゲーション機能によって、各ページが表示され...
Copyright © Asial Corporation. All Rights Reserved.
結果ページの作成
38
Copyright © Asial Corporation. All Rights Reserved.
結果ページの作成
1. [www]フォルダを右クリックし、[新規ファイル]を選択します。
2. ファイル作成ダイアログで、以下のように入力し...
Copyright © Asial Corporation. All Rights Reserved.
実習
result.htmlを以下のように変更します。
<ons-page id="result-page" style="text-ali...
Copyright © Asial Corporation. All Rights Reserved.
実習
index.htmlの<script>タグ内に、以下のコードを追記します。
// 回答を選択したとき
function select(...
Copyright © Asial Corporation. All Rights Reserved.
【Onsen UI】<ons-navigator>
次のページへ進み、移動後に何らかの処理を行う
• 画面遷移をするには<ons-navig...
Copyright © Asial Corporation. All Rights Reserved.
次の問題への遷移と正答率の計算
43
Copyright © Asial Corporation. All Rights Reserved.
実習
index.htmlの<script>タグ内に、以下のコードを追記します。
// 次のページへボタンを押したとき
function n...
Upcoming SlideShare
Loading in …5
×

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

1,576 views

Published on

このスライドは書籍『Monacaで学ぶはじめてのプログラミング』全12章相当の学習が完了している方を対象とした講義用スライドです。

Published in: Education
  • Be the first to comment

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

  1. 1. Copyright © Asial Corporation. All Rights Reserved. はじめてのプログラミング で学ぶ
  2. 2. Copyright © Asial Corporation. All Rights Reserved. 試験問題アプリを作ろう 2
  3. 3. Copyright © Asial Corporation. All Rights Reserved. 今回のテーマ Onsen UIを利用して、4択問題から1つ選択する形式の、 試験問題アプリを作成します。  JSONファイルに定義された問題データを取得する  問題の正誤判定を行う  最後に正答率を表示する 3 結果表示
  4. 4. Copyright © Asial Corporation. All Rights Reserved. Onsen UIとは 4
  5. 5. Copyright © Asial Corporation. All Rights Reserved. Onsen UI • HTML5モバイルアプリのための、UIフレームワーク(画面を作るための ツール)です。 • Apple/Googleのスタイルガイドラインに準拠した、「アプリらしい」画面 を作ることができます。 • また、HTML5で作ったアプリで課題となりがちな、パフォーマンスの問題 が改善されます。 5
  6. 6. Copyright © Asial Corporation. All Rights Reserved. 豊富なUIパーツを利用可能 ボタンやテキストボックスなどの入力項目や、ツールバーやタブバーといった 画面のレイアウトを構成するパーツが豊富に用意されています。 また、スマートフォンOSの種類を判別して、Androidであればマテリアルデザ イン(立体的な質感のデザイン)、iOSの場合はフラットデザイン(平坦な質 感のデザイン)を自動的に適用する機能が搭載されています。 6
  7. 7. Copyright © Asial Corporation. All Rights Reserved. 使い方は独自タグを記述するだけの簡単設計 Onsen UIの使い方は、独自のタグを記載するだけです。 <ons-toolbar></ons-toolbar> <ons-list-item></ons-list-item> <ons-tabbar></ons-tabbar> 7
  8. 8. Copyright © Asial Corporation. All Rights Reserved. JSONとは 8
  9. 9. Copyright © Asial Corporation. All Rights Reserved. JSONとは [ "りんご", "みかん", "ぶどう" ] 相互変換 JSON JSONとは  JavaScriptの配列を文字列として扱うデータ形式です。  JSONのデータと配列は相互に変換することができます。 9 りんご みかん ぶどう JavaScriptの配列
  10. 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. 11. Copyright © Asial Corporation. All Rights Reserved. Excel → JSON Excelの問題データをJSON形式に変換する方法  CSV形式(カンマ区切りの形式)で保存します。 11 [はい]を選択
  12. 12. Copyright © Asial Corporation. All Rights Reserved. Excel → JSON Excelの問題データをJSON形式に変換する方法  保存したCSVファイルを右クリックして、[プログラムから開く] > [メモ帳]を選択します。 12
  13. 13. Copyright © Asial Corporation. All Rights Reserved. Excel → JSON Excelの問題データをJSON形式に変換する方法  CSVファイルの内容をコピーして、JSONに変換するサイトで変換 (Convert)を実行します。 13 例: http://www.csvjson.com/csv2json
  14. 14. Copyright © Asial Corporation. All Rights Reserved. アプリの作成 14
  15. 15. Copyright © Asial Corporation. All Rights Reserved. プロジェクトの作成 15
  16. 16. Copyright © Asial Corporation. All Rights Reserved. 新しいプロジェクトを作成する Monacaにログインし、ダッシュボードで「新規プロジェクトの作 成」ボタンを選択します。 16
  17. 17. Copyright © Asial Corporation. All Rights Reserved. プロジェクトの作成 17 「Onsen UI V2 JS Minimum」テンプレートを選択 > プロジェク ト名に「試験問題アプリ」と設定してプロジェクトを作成します。
  18. 18. Copyright © Asial Corporation. All Rights Reserved. プロジェクトの作成 18 今 回 の ア プ リ で は 、 JSON デ ー タ を 取 得 す る た め の 命 令 を 持 つ 「jQuery」というライブラリを使います。 メニューバーの[設定] > [JS/CSSコンポーネントの追加と削除]を選 択し、jQueryをプロジェクトに追加します。
  19. 19. Copyright © Asial Corporation. All Rights Reserved. 問題データファイルの作成 19
  20. 20. Copyright © Asial Corporation. All Rights Reserved. 問題データファイルの作成 1. [www]フォルダを右クリックし、[新規ファイル]を選択します。 2. ファイル作成ダイアログで、以下のように入力します。 └ フ ァ イ ル 名 : data.json 20
  21. 21. Copyright © Asial Corporation. All Rights Reserved. 問題データファイルの作成 先ほど作成したJSONデータを、data.jsonに貼り付けます。 21
  22. 22. Copyright © Asial Corporation. All Rights Reserved. TOPページの作成 22
  23. 23. Copyright © Asial Corporation. All Rights Reserved. 実習 index.htmlの<body>タグ内を以下のように変更します。 <body> <ons-navigator id="navi" page="top.html"></ons-navigator> </body> 23
  24. 24. Copyright © Asial Corporation. All Rights Reserved. <ons-navigator> 【Onsen UI】画面の構成 今回のアプリは、複数の画面から構成されています。このような複数のページ を扱うには、全体を管理する<ons-navigator>というタグを使います。 24
  25. 25. Copyright © Asial Corporation. All Rights Reserved. 【Onsen UI】<ons-navigator>  <ons-navigator> • 複数ページを管理するタグです。画面上に描画されるパーツではありま せん。 • 画面遷移のための命令を持っています。 <ons-navigator page="初期表示するページ"></ons-navigator> 25
  26. 26. Copyright © Asial Corporation. All Rights Reserved. TOPページの作成 1. [www]フォルダを右クリックし、[新規ファイル]を選択します。 2. ファイル作成ダイアログで、以下のように入力します。 └ フ ァ イ ル 名 : top.html └ テンプレート: Onsen Page top.html 26
  27. 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. 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. 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. 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. 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
  32. 32. Copyright © Asial Corporation. All Rights Reserved. 問題ページの作成 32
  33. 33. Copyright © Asial Corporation. All Rights Reserved. 問題ページの作成 1. [www]フォルダを右クリックし、[新規ファイル]を選択します。 2. ファイル作成ダイアログで、以下のように入力します。 └ フ ァ イ ル 名 : question.html └ テンプレート: Onsen Page question.html 33
  34. 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. 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. 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. 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
  38. 38. Copyright © Asial Corporation. All Rights Reserved. 結果ページの作成 38
  39. 39. Copyright © Asial Corporation. All Rights Reserved. 結果ページの作成 1. [www]フォルダを右クリックし、[新規ファイル]を選択します。 2. ファイル作成ダイアログで、以下のように入力します。 └ フ ァ イ ル 名 : result.html └ テンプレート: Onsen Page result.html 39
  40. 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. 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. 42. Copyright © Asial Corporation. All Rights Reserved. 【Onsen UI】<ons-navigator> 次のページへ進み、移動後に何らかの処理を行う • 画面遷移をするには<ons-navigator>が持つpushPage()命令を利用し ますが、移動完了後に何らかの処理をする場合は、pushPage()の後ろに 続けてthen()という命令を実行します。 • このように、JavaScriptではたくさんの命令を繋げて記述することがで きます。(このような記述方法をメソッドチェーンと呼びます) ons-navigator要素.pushPage(移動先ページ) .then(ページ移動後に実行する処理); 42
  43. 43. Copyright © Asial Corporation. All Rights Reserved. 次の問題への遷移と正答率の計算 43
  44. 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

×