一覧へ Streamlit で Web アプリを作る 第6回 | 公開と試用
高校の情報学探究 | Streamlit で Web アプリを作る | 第6回

公開と試用

自分の端末で動かしているうちは、自分しか使えない。URL を人に渡し、やめ方まで決める

10〜50分
教師用メモ

準備(授業前) 動かし方を 3 通りから先に一つ選ぶ(①各自の端末に入れる ②クラウドの実行環境 ③教師の 1 台で投影し、設計だけ各自が書く)。この回だけは実機が要る。③を選んできた場合は、教師の 1 台で 1 つだけ公開して見せ、生徒は 12 の提出カードまでを設計として書く。公開先のサービスと学校の規定(アカウントの扱い、公開してよい範囲)を授業前に必ず確認する。教室コードは第1回と同じものを板書する。「教師」を押す。

投影 09 の 3 点は、生徒に声に出して読ませる。1 つずつ、自分のアプリに当てはめながら確かめさせる。12 の提出カードは一覧を投影し、相互に触り合う相手を決める。

時間配分

  • 50分版 01〜15 全部。02・03 前回と目標 5分 / 04〜07 公開するまで 14分 / 08〜11 公開する前に確かめる 16分 / 12 提出と相互に触る 9分 / 13〜15 まとめ 6分
  • 20分版 01・03・05・06・09・10・12・14。公開の手順 5分 / 3 点の確認 7分 / 提出 5分 / まとめ 3分
  • 10分版 01・09・10・12。3 点の確認だけを 6 分、提出カードを 4 分。公開は宿題にする

この回の評価(単元末の評価課題「自分の調べたことを、人が触れるアプリにして公開する」。B・A の基準と C の生徒への手立ては 単元設計のページ。詳しいコードは 情報学探究マニュアル 第9節・第11節)

  • 知識・技能 入力と出力がそろって動き、公開して URL が開ける(体験01・提出)。A は、まちがった入力でも止まらないよう手当てしている(体験02)
  • 思考・判断・表現 何を入れると何が返るかを一文で書けている(提出)。A は、相手を決め、その人が最初の 10 秒で分かる説明を置いている(体験02・提出)
  • 態度 一度は人に触ってもらっている(提出)。A は、触ってもらって直した所と理由を書いている(ふりかえり)

指導要領 高等学校 情報Ⅰ (3)「コンピュータとプログラミング」イ(イ)、情報Ⅱ (4)「情報システムとプログラミング」ア(ウ)・イ(ウ)。設計指針(第2版)はこの単元で F2L4(抽象階層をもつプログラムを設計/構築できる)・F4L3(テストケースに基づき不備を確認し修正できる)・J3L1(システム開発が単なるプログラム作成と違う点)・B5L4(統一された UX をグループで設計/制作)に対応する。この回が F4L3 と J3L1 の場面。公開・運用・やめ方まで含めるところが、単なるプログラム作成との違いになる。

前にやった回 情報Ⅱ (4) 第13回「想定外の入力でも止まらないか」。あのとき作ったテストの考え方を、そのまま公開前の確認に使う。情報Ⅰ (3) 第12回「プログラムの評価と改善」の直し方も、人に触ってもらった後にもう一度使う。

環境が整わない場合の進め方 第1〜5回は設計として進められたが、この回だけは実機が要る。用意できない場合は、教師の 1 台で 1 つだけ公開して URL を全員に開かせ、生徒は 10 の確認と 12 の提出カードを設計として書く。3 点の確認とやめ方は、公開しなくても書ける。むしろ、公開する人がいなくてもここは必ずやる。

前回のまとめ

やり直されるから、覚えさせた

動かす→入れてもらう→表を読む→図を出す→おぼえる・分ける→今日 | 公開する

ここまでの 5 回で作ってきたものは、全部、自分の端末の中にある。streamlit run を打てるのは自分だけで、隣の人は開けない

他の人の端末から開けるようにするには、何が要るのか

教師用メモ

3 分。「この単元の値打ちは今日にある」とはっきり言う。自分しか使えないものは、道具ではない。

今日の目標

授業の終わりにできるようになること

01
公開に必要な2 つのファイルを用意できる
02
公開する前の 3 点を、自分のアプリで確かめられる
03
誰に使ってもらうかと、やめ方を決めて出せる
01 | 14分
公開するまで

ファイルは 2 つ

02 | 16分
公開する前に

3 点とやめ方

提出 | 9分
人に触ってもらう

単元末の課題

SECTION 01

公開するまで

置く場所を変え、書くものを 1 つ増やすだけ

自分の端末の画面に出ているページと、友だちのスマートフォンに出ている同じページを見比べている高校生
公開に要るもの

ファイルは 2 つ、手順は 3 つ

置くファイル

app.py
requirements.txt

requirements.txt の中身

streamlit
pandas

※ import した道具の名前を、1 行ずつ書くだけ。pandas を使っていなければ 1 行でよい

手順

01
2 つのファイルを GitHub に置く
02
公開の仕組みに、その置き場所をつなぐ
03
できた URL を人に渡す

相手の端末には何も入れなくてよい。相手はただ URL を開くだけ

※ URL(ユーアールエル)= ページの住所を表す文字列。https:// で始まる、あの文字の並び

教師用メモ

5 分 requirements.txt が何のためにあるかを言う。公開先の機械には、まだ streamlit も pandas も入っていない。何を入れればよいかを書いて渡すのがこのファイル。第1回で自分が pip install streamlit を打ったのと同じことを、機械にやらせている。

手順の細かいところは書かない 公開の仕組みは変わる。2 つのファイルを置き、置き場所をつなぐという形だけ押さえれば、やり方が変わっても通じる。

学校の規定 アカウントの作り方と、公開してよい範囲は授業前に確認しておく。生徒に判断させない。情報Ⅰ (4) 第3回「サーバとクライアント」で扱った、頼む側と返す側の関係がここで実物になる。

体験 01

自分の requirements.txt を書く

自分の app.py のいちばん上を見る。import で始まる行を数え、そこに出てくる道具の名前を書き出す。as st や as pd はあだ名なので書かない

import した道具 | 全部
requirements.txt に書く行 | 1 行ずつ

全員の「import した道具 → 書く行」が右に並ぶ。st や pd と書いてしまった人を拾って、あだ名と本名の違いを説明する

みんなの import → requirements.txt
教師用メモ

進め方(9分) 書く 4 分 → 隣と交換 2 分 → 読み上げ 3 分。実機がある教室は、書けた人からファイルを作って公開の手順に進む。

よくある直し st pd と書いている → as の後ろはあだ名 / import math を書いている → Python に最初から入っているものは書かなくてよい / バージョンを書きたがる → 書かなくても動く。書かないほうが、公開先で入れ直すときに困らない。

環境が無い場合 この枚はそのまま全員できる。コードが手元になければ、これまでの枚のコードを写して import を数えさせる。目標 01。

まとめ 01

置き場所が変わると、使える人が変わる

自分の端末streamlit run を打てる人だけが使える。つまり自分だけ
GitHub に置くコードが人から見える場所に移る。一緒に置いたものは全部見られる
公開の仕組みにつなぐその機械が requirements.txt を読んで道具を入れ、app.py を動かす
URL ができる相手は何も入れずに開ける。ここから先は、自分だけの持ちものではなくなる
教師用メモ

2 分。最後の 1 行が、次の節の入口。公開するとは、責任が増えること。だから確かめることがある。

SECTION 02

公開する前に、必ず確かめる

出してしまってからでは、戻せないものがある

公開ボタンの前で手を止め、チェックの紙を指で追いながら 3 つの項目を確かめている高校生
公開する前に

3 つとも、声に出して確かめる

01
個人が分かるデータを、一緒に置いていないか
GitHub に CSV を入れると、誰でも見られる。名前・組・出席番号は入れない。人数が少ない区分はまとめる
02
相手が最初の 10 秒で、何をすればよいか分かるか
説明を1 行、いちばん上に置く。「何を入れると、何が返るか」。数の出どころも st.caption で書く
03
まちがった入力でも、止まらないか
空欄・0・とても大きい数を入れてみる。ファイルを選ばずに開いてみる。文字の列で折れ線を選んでみる

公開したものは、やめ方も決める。誰が、いつ、どうやって止めるか。始めたものを誰も止められない形で置いていくのは、引き継ぐ人に対して無責任だから

教師用メモ

6 分 3 つとも生徒に声に出させる。読み上げてから、自分のアプリに当てはめる。

01 がいちばん重い アンケートの生データをそのまま置いてしまう事故が起きる。置くのはコードだけ、データは相手に選んでもらう形(st.file_uploader)にしておけば、そもそも置かなくて済む。第3回でその形にしてある。

03 は第13回(情報Ⅱ (4))の続き あのとき分けた 3 種類(ふつう・境目・想定外)を、そのまま試す入力として使う。設計指針 F4L3。

やめ方 情報学探究マニュアル 第11節の引き渡しメモと同じ考え方。「使う人が月 10 人を下回った月に、決めて止める」のように、いつ止めるかの目安まで書かせる。設計指針 J3L1。

体験 02

3 点とやめ方を、自分のアプリで確かめる

5 つの欄を上から確かめ、確かめた結果を一つずつ書く。書けたら右の「確かめた」に印を付ける。まだ公開していない人は「公開したらこうする」を書けばよい。この画面は自分の端末にだけ残る

01
一緒に置くもの | 個人が分かるものは無いか
02
いちばん上に置く 1 行の説明
03
試したまちがった入力 | 3 つ
04
止まった所と、した手当て
05
やめ方 | 誰が、いつ、どうやって止めるか
※ この 5 行はこの端末に残る。次の枚の提出カードに写す。「消す」を押すと 5 行が空になる
教師用メモ

進め方(10分) 01・02 を書く 3 分 → 03・04 を試す 5 分 → 05 を書く 2 分。実機がある教室は、03 で必ず手を動かして入れてみる。

02 の見るところ 「待ち時間アプリ」だけでは足りない。何を入れると何が返るかまで 1 行に入っているか。相手を決めていない生徒には「誰に使ってほしいか」を先に聞く。設計指針 B5L4。

03 で止まった生徒へ 止まったこと自体が成果。04 に書かせる。手当ては if を 1 つ足すだけで済むことが多い。第3回の if up: と同じ形。

05 が書けない生徒へ 「ずっと置いておく」でもよいが、誰が決めるかだけは書かせる。止める人が決まっていないものは、止まらない。目標 02・03。

まとめ 02

出す前に 3 つ、出した後に 1 つ

出す前 ①個人が分かるデータを一緒に置かない。置くのはコードだけにできないか、先に考える
出す前 ②相手が 10 秒で分かる説明を 1 行、いちばん上に。何を入れると何が返るか
出す前 ③空欄・0・とても大きい数・選ばずに開く。止まったら if を 1 つ足す
出した後やめ方を決める。誰が、いつ、どうやって止めるか。止める人が決まっていないものは止まらない
教師用メモ

2 分。「作って終わりではない」が、この単元でいちばん残したいこと。探究の社会実装(第12回 形にして、使ってもらう)へ、そのままつながる。

提出

単元末の課題 | 人が触れる形にして出す

誰に使ってもらうか | 相手を 1 つに決める
何を入れると何が返るか | 一文で
公開前の確認 | 3 点でどうだったか
やめ方 | 誰が、いつ、どうやって止めるか

全員の提出カードが右に並ぶ。隣どうしで 1 分ずつ触り合わせ、迷った所を言ってもらう。まだ公開できていないカードにも印を付けて残すよう伝える

みんなの提出カード
教師用メモ

進め方(9分) 4 欄を書く 4 分 → 隣と 1 分ずつ触り合う 3 分 → 「迷った所」を聞き取って 2 分。

4 つの観点は評価に使う(単元設計の B・A の基準と同じ言葉)。「動いて公開できている」= 入力と出力がそろい、URL が開ける。「何が返るか分かる」= 一文で書けていて、相手が 10 秒で分かる。「人に触ってもらった」= 一度は人が触った。

触ってもらうときに聞くこと 「よかった」は情報にならない。最初にどこを見たか/迷った所はどこか/また使いたいかの 3 つを聞かせる。マニュアル 第11節と同じ。

公開できていない生徒 提出カードは書ける。「まだ」に印を付けて出させる。設計が書けていることを評価する。C の生徒には、第2回の 7 行のアプリに戻し、1 か所だけ変えさせる。

今日のまとめ

自分が分かったことを、人が自分で触れる形にした

01
公開 app.py と requirements.txt を置いて、つなぐ。相手は URL を開くだけ
02
確認 個人が分かるデータ/10 秒で分かる説明/まちがった入力で止まらないか
03
やめ方 誰が、いつ、どうやって止めるか。ここまで決めて、はじめて人に渡せる

この 6 回で作ったものは、探究で「相手に触ってもらう形にしたい」と思ったときに、そのまま使える

教師用メモ

2 分。探究 第12回「社会実装の試み」の社会実装は、ここで作ったものが受け皿になる。単元設計のページから探究の 14 回へ行ける。

自己評価

今日の目標、自分はどこまで

3 つの目標それぞれに、できた/だいたい/まだ、を 1 つ選ぶ。右の帯にクラス全体の分布が出る

今日の目標、自分はどこまで | 1 つずつ選ぶ
01公開に必要な 2 つのファイルを用意できた
02公開する前の 3 点を、自分のアプリで確かめた
03誰に使ってもらうかと、やめ方を決めて出せた
できただいたいまだ
教師用メモ

1 分。「まだ」が多い項目は、次の時間か放課後に個別で見る。01 だけが「まだ」なら、環境の問題であって理解の問題ではない。

ふりかえり

触ってもらって、直した所と理由

一文でよい。まだ触ってもらえていない人は「誰に、いつ触ってもらうか」を書く

みんなの直した所と理由
教師用メモ

3 分。「直した所と理由」が書けていれば A の基準。ここを読み上げて単元を閉じる。教室コードは、この単元の記録として残しておく。