Webアプリでクイズをつくろう⌗

レッスン31でつくったWebアプリをつかって、みんなでクイズをつくってあそびましょう。

Webアプリをコピーする⌗

レッスン31で１からWebアプリをつくるのはたいへんなので、こんかいはすでにつくってあるものをコピーします。

ターミナルにいかのコマンドをにゅうりょくしてWebアプリをコピーします。

cd mcc1
git pull

Flaskのインストール⌗

ターミナルからいかのコマンドをにゅうりょくしてFlaskをインストールします。

pip3 install flask

Webアプリをうごかしてみる⌗

Webアプリをうごかすためにターミナルからいかのコマンドをにゅうりょくします。

cd code/python/flaskworks
python3 index.py

うまくうごいたら、いかのようなメッセージがひょうじされます。

 * Serving Flask app 'index'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5000
 * Running on http://XXX.XXX.XXX.XXX:5000
Press CTRL+C to quit

うえのメッセージのうちXXX.XXX.XXX.XXXというぶぶんは、うごかしているパソコンによってことなります。

Webアプリのないようをブラウザでみる⌗

Webアプリをうごかしたら、そのないようをブラウザでみます。

ブラウザ(Firefox)をたちあげて、Google で検索、または URL を入力しますのぶぶんに、127.0.0.1:5000とにゅうりょくしましょう。

そうするといかのようながめんがひょうじされます。

４月を英語で何と言いますか？	April	May	June
うるう年で月の日数が変わるのは何月ですか?	2月	3月	12月

せいかいをえらんで「解答」ボタンをおすと

２問中Ｘ問正解

とひょうじされます

じぶんのすきなクイズをつくる⌗

テキストエディタをきどうして、mcc1/code/python/flaskworks/data.csvというファイルをひらきます。

４月を英語で何と言いますか？,April,May,June,April
うるう年で月の日数が変わるのは何月ですか?,2月,3月,12月,2月

コンマ(,)でくぎられているファイルをＣＳＶファイルといいます。このＣＳＶファイルをかきかえてじぶんのすきなクイズをつくります。

１つのぎょうが１もんになります。うえのファイルには２ぎょうあるので、２もんしゅつだいされています。

コンマ(,)でくぎられたぶんをコラムといいます。

さいしょのコラムはクイズのもんだいです。
さいごのコラムはクイズのせいかいです。
２ばんめのコラムからさいごから１つまえのコラムまでのコラムがクイズのせんたくし（せいかいをふくめた、いくつかのかいとうれい）になります。
せんたくしのかずはいくつでもかまいません。（うえのファイルでは３つです）

それではさっそくじぶんのすきなくいずにかきかえてください。さいしょはためしなので２もんくらいにしておきましょう。かきかえたら、わすれずにほぞんしてください。

たしかめる⌗

かきかえたら、クイズがただしくひょうじされるかたしかめます。

 * Serving Flask app 'index'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5000
 * Running on http://XXX.XXX.XXX.XXX:5000
Press CTRL+C to quit

というメッセージがひょうじされているがめんで「Ctrl」というキーと「C」というきーをどうじにおして、いったんWebアプリをとめます。

そうしたら、もういちどpython3 index.pyをじっこうします。キーボードからにゅうりょくしなくても「▲」キーをおすとターミナルにひょうじされるので、「Enter」キーをおしてじっこうします。

ブラウザの「こうしん」ボタン（まるいやじるしマーク）をおしてがめんをこうしんすると、あなたがつくったクイズがひょうじされます。

おともだちにクイズをだす⌗

ここまでできたら、ホワイトボードにあなたのなまえと、ターミナルにひょうじされているXXX.XXX.XXX.XXXのなまえをかいてください。

おともだちのパソコンのブラウザのGoogle で検索、または URL を入力しますのぶぶんに、あなたがホワイトボードかいたXXX.XXX.XXX.XXX:5000をいれると、おともだちのパソコンにあなたのクイズがひょうじされます。

おなじように、おともだちがホワイトボードにかいたXXX.XXX.XXX.XXX:5000をあなたのパソコンのブラウザににゅうりょくすると、おともだちのクイズがひょうじされます。

いろいなクイズをつくってみる。⌗

ここまでうまくいったら、あとはじぶんのクイズをいろいろつくってためしてみましょう。 data.csvというファイルをまいかいうわがきすると、せっかくつくったまえのクイズがきえてしまうので、べつななまえ（たとえばdata1.csvとか）でクイズをさくせいし、cp data1.csv data.csvでdata.csvにコピーすれば、いろいろなクイズをけさないで、つかいたいときだけ、data.csvにうつすことができます。

コピーなどでdata.csvをへんこうしたときは、かならず、「Ctrl」＋「C」でWebアプリをとめて、じっこうしなおしてください。（data.csvをへんこうしただけでは、Webアプリにはんえいされません）

レッスン 42