アプリの実行と編集
Python を 5 行書いて保存すると、そのまま人が開けるページになる。まず動かすところまで進む
20〜50分教師用メモ
準備（授業前） 動かし方を 3 通りから先に一つ選ぶ。①各自の端末に pip install streamlit を入れて動かす（事前に 1 台で通るか確かめる） ②クラウドの実行環境で動かす（学校の規定とアカウントの扱いを先に確認する） ③教師の 1 台で投影し、設計だけ各自が書く。選んだやり方を最初に board に書く。教室コードは新しいものにし、第6回まで同じものを使うので板書して残す。「教師」を押す。
投影 04 の 5 行と 06 の画面の対応を、投影しながら指で結ぶ。体験 01 の予想は分布を出してから 06 へ進む。
時間配分
- 50分版 01〜14 全部。環境の用意 10分 ／ 02 目標 3分 ／ 03〜07 予想して動かす 17分 ／ 08〜10 書き換える 12分 ／ 12 道具 4分 ／ 11・13・14 まとめ 4分
- 30分版 01・02・04・05・07・09・11・13・14。環境の用意 8分 ／ 04〜07 動かす 12分 ／ 09 書き換える 6分 ／ 11・13・14 まとめ 4分
- 20分版 01・04・05・07・09・11。教師の 1 台で投影し、生徒は 05 の予想と 09 の「どこが変わったか」だけを書く
この回の評価（評価規準と B・A の基準は 単元設計のページ。詳しいコードは 情報学探究マニュアル 第9節）
- 知識・技能
app.pyを保存して動かし、画面に出せている（体験02）。環境が無い場合は、5 行と画面の対応を図で書けている - 思考・判断・表現 5 行のコードが画面のどこに何を出すかを、動かす前に予想できている（体験01）
- 態度 1 か所書き換えて、変わったところを自分で確かめている（体験02・ふりかえり）
指導要領 高等学校 情報Ⅰ (3)「コンピュータとプログラミング」ア(イ)・イ(イ)、情報Ⅱ (4)「情報システムとプログラミング」ア(ウ)。設計指針（第2版）はこの単元で Ｆ２Ｌ４（抽象階層をもつプログラムを設計/構築できる）・Ｆ４Ｌ３（テストケースに基づき不備を確認し修正できる）・Ｊ３Ｌ１（システム開発が単なるプログラム作成と違う点）・Ｂ５Ｌ４（統一された UX をグループで設計/制作）に対応する。この回はその入口で、書いたものがそのまま人の触れる形になることを見せる。
前にやった回 情報Ⅰ (3) 第11回「目的・手順・プログラムの順で作った」。あのとき書いたプログラムは、自分の画面の中だけで終わっていた。今日からそれを、人が開ける形にしていく。
環境が整わない場合の進め方 第1〜5回は、実機がなくても設計として進められる。この回は「5 行が画面のどこに出るか」を紙に描く。教師の 1 台で 1 回だけ動かして投影すれば、対応は十分に伝わる。第6回だけは実機が要る。
授業の終わりにできるようになること
※ Web アプリ ＝ ブラウザ（インターネットのページを見る画面）で開いて探究で使う道具のこと。値を入れると結果が返り、相手は何も用意せずに開ける
予想してから確かめる
1 か所だけ変える
人の端末から開ける所まで
教師用メモ
2 分。「6 回の最後は、自分の作ったページの URL を人に渡す」ところまで先に言う。今日はその 1 歩目。
動かすまで
入れて、走らせる。命令は 2 つだけ
2 つの命令と、1 つのファイル
① 一度だけ入れる。② 動かす。app.py を置いた場所で打つ
pip install streamlit
streamlit run app.py※ ブラウザが自動で開く。開かなければ、画面に出た http://localhost:8501 を自分で開く。止めるときは Ctrl と C
app.py という名前で保存する、この 5 行
import streamlit as st
st.title("こんにちは")
st.write("これは、わたしの最初のアプリです")
st.write(3 + 4)
st.caption("いちばん下に、小さい字で出る")1 行目は「Streamlit という道具を使います」の宣言。2 行目から下が、上から順に画面に積まれていく
教師用メモ
4 分 打ち込ませる前に、まず読む。st. で始まる行が「画面に出す命令」だと気づかせる。import の行だけは画面に何も出さない。
つまずきどころ ファイル名が app.py.txt になっている／ app.py と違う場所で streamlit run を打っている／全角の引用符と括弧。第11回（情報Ⅰ (3)）で扱った定番の原因と同じ。
③ の進め方をとる場合 教師の 1 台でここまで動かして投影する。生徒は 5 行を紙に写し、次の枚の予想へ進む。
動かす前に、画面に何が出るかを当てる
前の枚の 5 行を streamlit run したとき、画面に出るものはどれか。当たっていなくてよい。予想を置いておくと、違ったときに気づける
選んだ人数が右に出る。分かれているところを読み上げてから、次の枚で確かめる
教師用メモ
進め方（4分） 選ぶ 2 分、分布を見る 2 分。先に動かさない。動かしてから見ると「そういうものか」で終わる。
割れるところ 「3 + 4」。文字として出るか、計算されて 7 と出るかで必ず割れる。引用符が付いていないので計算される。第11回（情報Ⅰ (3)）の「文字と数の足し算」と同じ境目。目標 02。
1 行が、画面の 1 かたまりになる
import streamlit as st
st.title("こんにちは")
st.write("これは、わたしの最初のアプリです")
st.write(3 + 4)
st.caption("いちばん下に、小さい字で出る")st.title | 大きな見出し。ページの題に使う |
st.write | 何でも出す。文字はそのまま、式は計算してから出す（だから 7） |
st.caption | 小さい字。ことわり書きや出どころに使う |
教師用メモ
3 分 投影しながら、コードの行と画面のかたまりを指で結ぶ。import の行には結ぶ相手がいないことも言う。
前の枚の予想と見比べ、「3 + 4」を選んだ生徒に「引用符を付けたらどうなるか」を聞く。次の節の書き換えに直結する。
書いた順に、上から積まれる
HTML も CSS も出てこない。Python の 1 行が、画面の 1 かたまりになる。書く順番が、そのまま見え方の順番になる
※ HTML ＝ ふつうのウェブページの骨組みを書く言語。CSS ＝ その見た目（色・大きさ・並び）を決める言語。ふつうはこの 2 つを覚えないとページが作れないが、Streamlit ではその 2 つが要らない
教師用メモ
2 分。「Web ページを作る勉強ではない」とはっきり言う。Python が少し書ければ、その日のうちに人が触れるものになる、というのがこの単元の値打ち。
書き換えると、変わる
1 か所だけ変えて、保存して、画面を見る
1 か所だけ変えて、どこが変わったかを書く
下から 1 つ選んで、1 か所だけ変える。保存すると、ブラウザの右上に「Rerun」が出る。押せば新しい画面になる
st.titleの中の文字を、自分のアプリの題に変える3 + 4を3 * 4に変える（*がかけ算）3 + 4を"3 + 4"に変える（引用符で囲む）st.titleの行とst.writeの行を入れかえる
全員の「変えた所 → どう変わったか」が右に並ぶ。同じ所を変えても書き方が違うものを 2 つ読み上げる
教師用メモ
進め方（12分） 変えて確かめる 8 分、読み上げ 4 分。2 か所以上を一度に変えさせない。変えた所と変わった所が結べなくなる。
いちばん効く 1 つ "3 + 4" の引用符。引用符があると計算されず、文字としてそのまま出る。ここで「計算されるもの」と「そのまま出るもの」の境目が体で分かる。
環境が無い場合 4 つのうち 1 つを選び、画面がどう変わるかを言葉で書かせる。教師の 1 台で答え合わせをする。書く欄は同じものを使う。
早く終わった生徒へ st.write の行を増やしてみる。行を増やせば画面が下に伸びることを確かめる。目標 03。
保存して、もう一度出すだけ
| 直し方 | app.py を書き換えて保存する。ブラウザの「Rerun」を押すと、新しい画面になる |
| 引用符の有無 | 囲むと文字としてそのまま出る。囲まないと計算されてから出る |
| 行の順番 | 入れかえると、画面の上下も入れかわる。書く順番が見え方の順番 |
| エラーが出たら | 画面に行番号が出る。そこを見る。字下げ・コロン・引用符・全角の記号が定番 |
教師用メモ
2 分。「エラーが画面に赤く出る」ことを、悪いことではなくどこが悪いかを教えてくれるものとして扱う。第12回（情報Ⅰ (3)）の「プログラムの評価と改善」と同じ構え。
5 行で、人が開けるページになった
pip install streamlit で入れ、streamlit run app.py で動かすst. で始まる 1 行が、画面の 1 かたまりになる。書いた順に上から積まれる次回は、相手に入れてもらう。スライダや選ぶ欄を置くと、入れた値で結果が変わる
入れると返る形を、先に触ってみる
道具を触って、「何を入れると、何が返るか」を一文で書き出す。入力を 1 つだけ変えるのがこつ
- 「この枚で開く」を押す
- 入力を 1 つだけ変えて、返るものを見る
- 何を入れると何が返るかを、一文で書き出す
教師用メモ
進め方 見つけた人から出す。全員に同じ答えを求めない。出てきたものを 2〜3 個読み上げ、共通点を言葉にする。
5分。触る前に「何を入れると、何が返るか」を一組で言わせる。今日書いた 5 行の先にあるものとして置く。
道具は外で公開されている Web アプリ。この授業のページの中で開くので、別のページへは移らない。閉じれば、そのままこの枚に戻る。ブラウザの中で動き、入力はこの授業のサーバーには送られない。
今日の目標、自分はどこまで
3 つの目標それぞれに、できた／だいたい／まだ、を 1 つ選ぶ。右の帯にクラス全体の分布が出る
教師用メモ
1 分。「まだ」が多い項目は、次回の冒頭に時間を回す。01 が「まだ」の生徒が多い場合は、動かし方の選び方そのものを見直す。
自分は、何を入れると何が返るものを作りたいか
一文でよい。「〇〇を入れると、△△が返る」の形で書く。次回、この入力を実際に置く
教師用メモ
3 分。ここに書いたものが、この 6 回を通してずっと自分の題材になる。小さくてよいと繰り返す。「時刻を入れると待ち時間が返る」で十分。教室コードを板書して残す。