Streamlit を用いたWEBアプリ

1. 前準備

Python 3.12 のインストール

Python の開発環境 Visual Studio Code のインストールと Python 用の設定

Python プログラム実行手順

2. Streamlit のインストール

管理者権限でコマンドプロンプトを起動する （手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。

システム全体の Python 環境に書き込むため、管理者権限が必要である。

使用する Python のバージョンを確認する。

python --version

pip と setuptools を更新する。

python -m pip install -U --no-user pip setuptools

Streamlit をインストールする。

python -m pip install -U --no-user streamlit

3. 演習1：文字の表示（動作確認）

テーマ名：Streamlit のインストール確認と、ブラウザに文字を表示する

手順：次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）。保存したファイルを、コマンドプロンプトで streamlit run に続けてファイル名を指定して起動する。ブラウザが自動で開き、ページに「Hello, Streamlit」と表示されれば、インストールは正常に完了している。終了するにはコマンドプロンプトで Ctrl+C を押す。

import streamlit as st

st.title("Hello, Streamlit")
st.write("これは Streamlit で作った Web アプリです。")

ヒント：streamlit run で起動すると、Streamlit が Web サーバを立ち上げ、ブラウザにページが開く。st.title() で見出し、st.write() で本文が表示される。

考察ポイント：独立したウィンドウではなくブラウザのページとして開くこと、ブラウザのアドレス欄が localhost（自分のPC）を指していることを確認する。これが Web アプリである証拠である。

4. 演習2：ボタンとイベント処理

テーマ名：ボタンの配置と、押したときの処理（イベント処理）

手順：次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）。保存したファイルを、コマンドプロンプトで streamlit run に続けてファイル名を指定して起動する。ブラウザにボタンが表示され、押すと下にメッセージが表示される。終了するにはコマンドプロンプトで Ctrl+C を押す。

import streamlit as st

st.title("ボタンの演習")

if st.button("押してください"):
    st.write("ボタンが押されました。")
else:
    st.write("ボタンはまだ押されていません。")

ヒント：st.button() は、ボタンが押された瞬間の再実行でのみ True を返す。Streamlit は操作のたびにスクリプトを先頭から再実行するので、if st.button(...) の中に、押されたときの処理を書く。

考察ポイント：ボタンを押したときだけメッセージが変わること、操作のたびにスクリプト全体が再実行されることを観察する。

5. 演習3：フォーム（テキスト入力）

テーマ名：テキスト入力欄とボタンによるフォーム

手順：次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）。保存したファイルを、コマンドプロンプトで streamlit run に続けてファイル名を指定して起動する。ブラウザにテキスト入力欄とボタンが表示される。入力欄に文字を打ってボタンを押すと、入力した文字がページに表示される。終了するにはコマンドプロンプトで Ctrl+C を押す。

import streamlit as st

st.title("フォームの演習")

name = st.text_input("名前を入力してください")

if st.button("送信"):
    st.write("入力された文字:", name)

ヒント：st.text_input() は、入力欄に打たれた文字を文字列として返す。返り値を変数で受け取り、ボタンが押されたときにその変数を表示する。

考察ポイント：入力した文字が変数から取り出せるか、入力欄を書き換えるとスクリプトが再実行されて画面が更新されることを観察する。

6. 演習4：ファイル選択（アップロード）

テーマ名：ファイル選択部品（ファイルアップローダ）でファイルを選ぶ

手順：次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）。保存したファイルを、コマンドプロンプトで streamlit run に続けてファイル名を指定して起動する。ブラウザにファイル選択部品が表示される。ファイルを選ぶと、選んだファイルの名前とサイズがページに表示される。終了するにはコマンドプロンプトで Ctrl+C を押す。

import streamlit as st

st.title("ファイル選択の演習")

uploaded_file = st.file_uploader("ファイルを選んでください")

if uploaded_file is not None:
    st.write("ファイル名:", uploaded_file.name)
    st.write("サイズ（バイト）:", uploaded_file.size)

ヒント：st.file_uploader() は、ファイルが選ばれていないときは None を、選ばれているときはファイルを表すオブジェクトを返す。そのため if uploaded_file is not None: で、選ばれているときだけ処理する。返り値の .name でファイル名、.size でサイズが得られる。

考察ポイント：ファイルを選ぶ前と後で表示がどう変わるか、ブラウザの部品からPC上のファイルを選べることを観察する。

7. 演習5：画像の表示

テーマ名：選んだ画像ファイルをブラウザに表示する

手順：次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）。保存したファイルを、コマンドプロンプトで streamlit run に続けてファイル名を指定して起動する。ブラウザに画像選択部品が表示される。画像ファイル（png や jpg）を選ぶと、その画像がページに表示される。終了するにはコマンドプロンプトで Ctrl+C を押す。

import streamlit as st

st.title("画像表示の演習")

uploaded_file = st.file_uploader("画像ファイルを選んでください", type=["png", "jpg", "jpeg"])

if uploaded_file is not None:
    st.image(uploaded_file, caption="選んだ画像")

ヒント：st.file_uploader() の type に拡張子のリストを渡すと、選べるファイルを画像だけに絞れる。返り値のファイルオブジェクトを st.image() に渡すと、その画像がブラウザに表示される。caption で画像に説明文を付けられる。

考察ポイント：選んだ画像がブラウザにそのまま表示されること、type で指定した拡張子以外が選びにくくなることを観察する。

8. まとめ

• Streamlit は、Python だけで Web アプリのユーザインタフェースを作るためのパッケージである。作ったプログラムはブラウザ上で動く Web アプリになり、操作のたびにスクリプトが先頭から再実行されて画面が更新される。
• インストールと起動：管理者権限のコマンドプロンプトから python -m pip install -U --no-user streamlit を実行してインストールする。事前に pip と setuptools の更新が必要である。アプリは streamlit run に続けてファイル名を指定して起動し、ブラウザにページが開く。終了するにはコマンドプロンプトで Ctrl+C を押す。
• 典型的なユーザインタフェース部品：文字表示（st.title、st.write）、ボタン（st.button）、テキスト入力（st.text_input）、ファイル選択（st.file_uploader）、画像表示（st.image）が代表的な部品である。いずれも一行ずつ書くだけで UI が組み上がる。
• 動作確認：各演習のプログラムを streamlit run で起動し、ブラウザに部品が表示・動作することを確認する。