アプリの実行と編集｜復習｜高校の情報学探究 Streamlit で Web アプリを作る第1回

予習で選んだ予想

授業で確かめた答えと比べる

01今日の要点

動かすまでの命令は 2 つ。pip install streamlit で一度だけ入れ、streamlit run app.py で動かす。打つ場所は、app.py を保存した所。ブラウザが自動で開かなければ、画面に出た住所を自分で開く
st. で始まる 1 行が、画面の 1 かたまりになる。書いた順に上から積まれる。import の行だけは、画面に何も出さない
st.title は大きな見出し、st.write は何でも出す、st.caption は小さい字。ことわり書きや数の出どころは st.caption に書く
引用符で囲むと文字、囲まないと計算される。st.write(3 + 4) は 7 と出て、st.write("3 + 4") は 3 + 4 と出る
直すときは app.py を書き換えて保存し、ブラウザの「Rerun」を押す。エラーが出たら、画面に出た行番号のところを見る。字下げ・コロン・引用符・全角の記号が定番の原因
HTML も CSS も出てこない。Python が少し書ければ、その日のうちに人が触れるものになる。これがこの単元の値打ちになる

02確認問題

1一度だけ打てばよい命令はどれか streamlit run app.py pip install streamlit st.title("こんにちは")

pip install streamlit は道具を端末に入れる命令なので、入れたあとは打たなくてよい。streamlit run app.py は動かすたびに打つ。st.title は app.py の中に書く命令で、命令の打ち込み欄に打つものではない。

2st.write(3 + 4) を動かすと、画面に出るものはどれか 3 + 4 7 st.write(3 + 4)

引用符で囲まれていないので、計算されてから出る。囲んで st.write("3 + 4") と書けば、3 + 4 という文字がそのまま出る。この境目が、授業で予想が割れたところ。

3app.py の 1 行目に書く import streamlit as st は、画面に何を出すか「streamlit」という文字を出す何も出さないページの題を出す

import は「この道具を使います」という宣言なので、画面には何も出ない。st. で始まる行だけが画面のかたまりになる。授業でコードと画面を指で結んだとき、この行だけ結ぶ相手がいなかった。

4st.title の行と st.write の行を入れかえると、画面はどうなるか変わらない。Streamlit が正しい順に並べ直す上下が入れかわる。書いた順が、そのまま見え方の順になるエラーになって、何も出ない

5app.py を書き換えたのに、ブラウザの画面が古いままだった。まずすることはどれか端末を再起動する保存してから、ブラウザの「Rerun」を押す pip install streamlit をもう一度打つ

6実行したらエラーが赤く出た。授業で勧められた見方はどれかエラーは失敗なので、全部消して最初から書き直す画面に出た行番号のところを見る。字下げ・コロン・引用符・全角の記号を疑うエラーを無視して、次の行を足していく

7この単元の 6 回の最後に行き着くところは、次のどれか見た目のきれいなページを HTML と CSS で作る作ったものを公開して、他の人の端末から開ける URL を渡す Python の文法を全部おぼえる

03書いて確かめる

自分が作りたいアプリについて、st.title に入れる題と、st.caption に入れることわり書きを、それぞれ 1 行で書く。題は、開いた人が何のページか分かる言葉にする。ことわり書きには、返す数の出どころか、言えない範囲を書く。

答えの例を見る

例: st.title に入れる題: 昼の売店の待ち時間を予想する／ st.caption に入れることわり書き: 本校の 2 週間ぶんの記録から作った目安です。行事のある日は当てはまりません

04探究へ

探究で分かったことは、たいてい紙かスライドの形で終わる。読んでもらえるのは発表のその場だけで、相手が自分の条件を入れて試すことはできない。入れると返る形にすると、相手は自分の数字で確かめられる。予測の式を作ったなら数を入れると予測が返る形に、分類の基準を作ったなら選ぶとどれに当てはまるか返る形に置き換えられる。まずは 5 行から始めて、自分の探究のどの部分が「入れると返る」形になるかを探す。

自分の探究の中で、相手に数や条件を入れてもらえそうな部分はどこか
それを入れてもらったら、何を返せるか。返すものは 1 つに絞れるか

ここに書いたメモは探究ノートに集まる。総合的な探究の時間のテーマ決めや、調べ方を考えるときに開く。まだテーマが決まっていなくても書ける。いま気になっていることを一つ思い浮かべて、そこに当てはめてみる

05次回へ

次回は「入力の部品」。今回のページは、誰が開いても同じ画面だった。次回は、スライダや選ぶ欄やチェックを置いて、開いた人が入れた値で結果が変わるようにする。入力・処理・出力が 1 つの画面に載る。今回のふりかえりで書いた「〇〇を入れると△△が返る」を、次回そのまま使うので残しておく。教室コードは第6回まで同じものを使う。

次回「入力の部品」の予習へ ›

書いたものの残り方

このページに書いたものは、いま使っているこの端末の、このブラウザの中にだけ残ります。サーバには送られません。次に同じ端末で開けば、書いたものはそのまま出ます。

別の端末で開くと見えません。学校の端末と家の端末は別ものとして扱われます。ブラウザの履歴やサイトデータを消したときも、一緒に消えます。残しておきたいものは、下の「書いたものをコピー」で自分のノートや提出先に貼ってください。