予習 ｜ 高校の情報学探究 Streamlit で Web アプリを作る ｜ 第5回
状態の保持と画面の構成
授業の前に 10 分。読んで、少しやって、予想を一つ選ぶ。書いたものはこの端末に残る
10分 ｜ ひとりで、端末で01授業に持っていく問い
ここまで作ってきたアプリは、入れてもらった値をその場で計算して、その場で返すだけだった。1 回ぶんの計算なら、それで足りる。 では、こういうものは作れるだろうか。ボタンを押すたびに数が 1 ずつ増えていく、数取り器のようなページ。あるいは、試した結果を下に積んでいく記録帳のようなページ。どちらも、前の値を覚えていないと作れない。 Python の書き方としては難しくない。変数を 0 にしておいて、押されたら 1 足して、画面に出す。3 行で書ける。ところが、この 3 行をそのまま Streamlit で書くと、思ったとおりには動かない。なぜ動かないのかが、今回の山場になる。
02見ておく言葉
- やり直される
- 相手が何か操作するたび、プログラムが 1 行目から全部実行し直されること
st.button- ボタンの部品。押されたそのときだけ
Trueになる st.session_state- やり直されても消えない置き場所。ここに入れた値は残る
st.sidebar- 画面の左に寄せる書き方。
st.の代わりにst.sidebar.と書くだけ st.tabs- 画面をタブに分ける命令。長くなった画面を短く見せられる
03やってみる
自分が使っているページやアプリの中から、前の値を覚えているものを 2 つ探す。何を覚えているのかを書き出す。
- 例: 買い物かごに入れたものが、別のページに移っても残っている
- 例: 前に選んだ並べ替えの順が、次に開いたときも同じになっている
- 覚えていないものも 1 つ探す。「戻るとやり直しになる」ものがそれにあたる
- 覚えているものと覚えていないもので、使いやすさがどう違ったかを書く
04予想
書いたものの残り方
このページに書いたものは、いま使っているこの端末の、このブラウザの中にだけ残ります。サーバには送られません。次に同じ端末で開けば、書いたものはそのまま出ます。
別の端末で開くと見えません。学校の端末と家の端末は別ものとして扱われます。ブラウザの履歴やサイトデータを消したときも、一緒に消えます。残しておきたいものは、下の「書いたものをコピー」で自分のノートや提出先に貼ってください。