アシアル主催・オンラインキャンプ・クイズアプリを作ろう（90分）

by アシアル情報教育研究所

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Copyright © Asial Corporation. All Rights Reserved. クラウドデータベースの概要  プログラムとデータの関係 └ 基本的にプログラムの『変数』はコンピューターのメモリ上で一時的に保持されており、処理が終わったら消えてしまいます。 └ データを『一時的」ではなくずっと保存することを『永続的』と呼びます └ 永続的に保持する方法の一つとして『ファイル』に記録する方法があります。 9 ファイルプログラム読み書き

Slide 10

Slide 10 text

Copyright © Asial Corporation. All Rights Reserved. OS クラウドデータベースの概要  ファイルやフォルダの管理はOSの仕事の一つ └ 一般にパソコン上で動作するプログラムはOSを経由してファイルを読み書きできます └ OSはファイルやプログラムの実行を管理しています └ 例えばファイルに複数のプログラムが読み書きしても壊れないようにします 10 ファイルプログラム読み書きプログラム読み書き

Slide 11

Slide 11 text

Copyright © Asial Corporation. All Rights Reserved. クラウドデータベースの概要  ファイルを利用したプログラミングの課題 └ プログラムからファイルに自由に読み書きできるとは限りません └ 端末の設定や環境によります └ ネットワーク越しに複数の端末がデータを利用したいときの対応が困難です └ そこでクラウドデータベースを活用します 11 プログラムおよびアプリケーション読み書きプログラムおよびアプリケーション読み書き (クラウド) データベース

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Copyright © Asial Corporation. All Rights Reserved. クラウドデータベースの概要  SQL風の文法 └ select/insert/update/delete文を実行できます。 16 操作 SQL文クラウドデータベースのエンドポイント選択 select https://db.monaca.education/select?apikey=[API_KEY] 挿入 insert https://db.monaca.education/insert?apikey=[API_KEY] 更新 update https://db.monaca.education/update?apikey=[API_KEY] 削除 delete https://db.monaca.education/delete?apikey=[API_KEY]

Slide 17

Slide 17 text

Copyright © Asial Corporation. All Rights Reserved. クラウドデータベースの概要  SQL風の文法 └ SQL文における選択、つまりWhere句による絞り込みのようなことを行えます。 17 絞り込み文法意味例一致 IN 一致するものだけで絞り込む。複数指定可能。 int0In=1,2,3 あいまい検索 LIKE 指定した文字列を含むものだけで絞り込む。 text0Like=もなか以上 GE 比較演算子の：＜＝ int0GE=100 より大きい GT 比較演算子の：＜ int0GT=100 以下 LE 比較演算子の：＞＝ int0LE=100 より小さい LT 比較演算子の：＞ int0LT=100

Slide 18

Slide 18 text

Copyright © Asial Corporation. All Rights Reserved. クラウドデータベースの概要  SQL風の文法 └ SQLのように列の値の大小で並び替えを行ったり、取得件数の制限をしたり取得開始位置を指定できます。 18 オプション文法意味例昇順ソート asc 小さい順で並び替え orderByInt0=asc 降順ソート desc 大きい順で並び替え orderByInt0=desc 上限 limit 取得件数を制限 limit=5 開始位置 offset 取得開始位置を指定 offset=5

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Copyright © Asial Corporation. All Rights Reserved. クラウドデータベースの概要  APIキーを即時発行 └ 3種類のキーが自動的に発行されます └ マスターキー：読み書き全般を実行可能。漏洩すると危険。 └ 取得専用キー：読み書き専用。漏洩しても読み込みしかできない。 └ 追記専用キー：追記専用。漏洩しても読み込みや既存データの更新はできない。 20

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright © Asial Corporation. All Rights Reserved. 素材のデータベース  プロジェクトを作成する └ 今回は素材のサンプルアプリを元に作成します └ インポートすれば即座に動きます └ しかし著者のデータベースを参照しているだけです └ なので自身のデータベースを作成してキーを差し替えましょう └ CSVデータもダウンロードしておきましょう 27

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Copyright © Asial Corporation. All Rights Reserved. 素材のデータベース  プロジェクトのAPIキーを自分のものに変更する └ main.jsファイルを修正します └ 1行目の変数 apikeyの値を書き換えて下さい └ 先ほどコピーした参照キーを利用します 29 let apikey = "*****************"; let url = "https://db.monaca.education/select"; url += "?apikey=" + apikey; console.log("WebAPIを呼び出します：",url); fetch(url) .then(function(response) { console.log("WebAPIのレスポンスです：",response); return response.json(); }) .then(function(db) { console.log("JSONとして受け取りました：",db); // 最初のレコードを処理してタイトルと画像を表示する例 document.getElementById("title").innerHTML = db.records[0].text0; document.getElementById("sozai").src = db.records[0].text1; });

Slide 30

Slide 30 text

Copyright © Asial Corporation. All Rights Reserved. 素材のデータベース  結果のカスタマイズ └ データベース素材の名称を和名に変えてみましょう └ 例：「apple」→「りんご」 └ データをランダムに取得してみましょう └ 変数URLを組み立てる際の末尾に「&random=1」を連結してください 30 let apikey = "*****************"; let url = "https://db.monaca.education/select"; url += "?apikey=" + apikey; url += "&random=1"

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Copyright © Asial Corporation. All Rights Reserved. 二択クイズアプリ  二択クイズアプリの動き（解答編） └ アプリはランダムに問題を出題 └ 利用者はYES/Noで問題に解答 └ アプリが正解・不正解の結果を判定 └ アプリが解説を表示 32 アプリはランダムに問題を出題利用者は YES/Noで問題に解答アプリは正解・不正解の結果を判定アプリは解説を表示

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Copyright © Asial Corporation. All Rights Reserved. 二択クイズアプリ  二択クイズアプリの動き（登録編） └ アプリは問題文の入力欄を表示 └ 利用者は問題文を入力 └ アプリは問題文のYES/NOを確認 └ 利用者はYES/Noを解答 └ アプリは解説文の入力欄を表示 └ 利用者は解説文を入力 34 アプリは問題文の入力欄を表示アプリは問題文のYES/NOを確認アプリは解説文の入力欄を表示

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Copyright © Asial Corporation. All Rights Reserved. 二択クイズアプリ  二択クイズアプリの出題方法（プログラム側） └ クイズの正解・不正解は「真偽値」で表すことができます └ if文で処理しやすい！ └ データの持ち方も簡単 └ 2択ならば○か×かの「真偽値」を聞ければOK └ confirm()命令を使えば「真偽値」を簡単に取れます └ ※ただし、回答ボタンの名称「OK / キャンセル」は変えられません 36 // confirmによる二択のイメージ回答 = confirm(問題文) if (回答 == 真偽値) { alert("正解"); } else { alert("不正解"); }

Slide 37

Slide 37 text

Copyright © Asial Corporation. All Rights Reserved. 二択クイズアプリ  二択クイズアプリの出題方法（データベース側） └ int0:真偽値（0ならば不正解、1ならば正解） └ 真偽値型はMonacaデータベースには無いので数値型で代用 └ text0:問題 └ text1:解説 └ ランダムに出題する方法：「&random=1」とすればOK 37

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Copyright © Asial Corporation. All Rights Reserved. 二択クイズアプリ  実習 └ 二択クイズアプリをインポート └ アプリの動作確認 └ キーは参照専用のため、問題の登録はできません └ キーの差し替え └ 自身のマスターキーに変更します └ アプリの動作確認 └ 問題の登録が行えてデータベースに値が記録されれば成功です └ カスタマイズ └ まずは見た目（タイトル・色など）をカスタムすることをお勧めします 39

Slide 40

Slide 40 text

Copyright © Asial Corporation. All Rights Reserved. 二択クイズアプリ  更なるカスタマイズのアイディア └ 4択にする └ 設計案 └ text1に正しい選択肢、text2～4に正しくない選択肢を持たせる └ 選択肢をシャッフルしてランダムに提示する └ promptで1～4の解答を数値で解答させる └ ボタンで解答させる └ confirmは見た目が微妙なのでDOMで画面を作って解答させる └ 問題数を増やす └ 10問ぐらい問題を登録する └ データが消えると辛いので、インポート＆エクスポートも適宜利用してください └ 問題を繰り返し出題したり正答数で点数を付ける └ 繰り返し処理を工夫すれば可能です 40