前回の記事
4. 入力フォーム系
| 用途 | 関数 |
|---|---|
| テキスト入力 | st.text_input() |
| 複数行テキスト | st.text_area() |
| 数値入力 | st.number_input() |
| 単一選択 | st.selectbox() |
| 複数選択 | st.multiselect() |
| チェックボックス | st.checkbox() |
| ボタン | st.button() |
| ファイルアップロード | st.file_uploader() |
サンプル：問い合わせフォーム
import streamlit as st
st.title("お問い合わせフォーム")
name = st.text_input("お名前：st.text_input()")
message = st.text_area("お問い合わせ内容（できるだけ詳しく）：st.text_area()")
age = st.number_input("年齢：st.number_input()", min_value=0, max_value=120, step=1)
category = st.selectbox(
"問い合わせカテゴリ：st.selectbox()",
["UI改善の提案", "バグ報告", "機能要望", "アカウント関連", "その他"]
)
tags = st.multiselect(
"関連するタグ（複数選択可）：st.multiselect()",
["緊急", "要調査", "再現性あり", "再現性不明", "重要", "軽微"]
)
agree = st.checkbox("利用規約に同意します：st.checkbox()")
file = st.file_uploader(
"関連するスクリーンショットやログファイル（任意）：st.file_uploader()",
type=["png", "jpg", "jpeg", "txt", "log"]
)
submit = st.button("送信：st.button()")
# 追記：ステータス表示について
if submit:
if not agree:
st.warning("送信するには、利用規約への同意が必要です。")
elif not name or not message:
st.error("名前とお問い合わせ内容は必須項目です。")
else:
st.success("お問い合わせを受け付けました！")
st.write("### 入力内容の確認")
st.write(f"- **名前**: {name}")
st.write(f"- **年齢**: {age}")
st.write(f"- **カテゴリ**: {category}")
st.write(f"- **タグ**: {tags}")
st.write(f"- **お問い合わせ内容**:\n{message}")
if file:
st.write("### 添付ファイル")
st.write(f"- 名前: {file.name}")
st.write(f"- サイズ: {file.size} bytes")
st.download_button("ファイルをダウンロード", file.getvalue(), file.name)
テキストボックスを必須→エラー、とするようなrequiredを実装することはできない。
もし必須項目のような条件を付けたい場合は、制御と合わせて記述する必要がある。
5. メディア系出力
| 用途 | 関数 |
|---|---|
| 画像 | st.image() |
| 音声 | st.audio() |
| 動画 | st.video() |
サンプル：音声のファイル表示
st.subheader("画像の表示（st.image）")
image = Image.open("data/dog.png")
st.image(
image,
caption="犬（captionで表示を指定）",
use_container_width=True
)
キャプションとして表示することも可
サンプル：音声のファイル表示
st.subheader("音声の再生（st.audio）")
audio_file = st.file_uploader(
"音声ファイルをアップロードしてください",
type=["mp3", "wav", "ogg"]
)
if audio_file is not None:
st.write("ファイル名:", audio_file.name)
st.audio(audio_file.read(), format="audio/" + audio_file.type.split("/")[-1])
st.audio()の第1引数に、byte列を渡すことで再生が可能。
サンプル：動画ファイル表示
st.subheader("動画の再生（st.video）")
# ローカルのファイルロードを行う
with open("data/trim.mp4", "rb") as f:
st.video(f.read())
# 動画リンクを指定して表示することも可能。
st.video("https://www.youtube.com/watch?v=jNQXAC9IVRw")
ファイルサイズがものすごい大きい動画をローカルから読み込んで表示する場合、表示に時間がかかるので注意。
追記：入力と一緒に使うステータス表示
| 用途 | 関数 |
|---|---|
| 情報メッセージ | st.info() |
| 成功メッセージ | st.success() |
| 警告 | st.warning() |
| エラー | st.error() |
| KPI表示 | st.metric() |
| 進捗バー | st.progress() |
問い合わせフォームでも利用した通り、Bootstrapのalert alert-successのようなちょっと高級なステータス表示ができる。
サンプル：ステータス表示
st.header("メッセージ表示")
st.info("これは情報メッセージです（info）")
st.success("これは成功メッセージです（success）")
st.warning("これは警告メッセージです（warning）")
st.error("これはエラーメッセージです（error）")
4色まで使えるので、Bootstrap同様に1行で視覚的にステータスが表示できる。
(よく使うのはsuccessとerrorで、それ以外使ってしまうと色が多くなりすぎて可読性が落ちる)
サンプル：メトリクス表示
st.header("ボードゲーム進行のKPI")
col1, col2, col3 = st.columns(3)
col1.metric(
label="平均プレイ時間",
value="42分",
delta="-8分",
help="ルール簡略化でゲーム時間が短縮"
)
col2.metric(
label="勝率（プレイヤーA）",
value="58%",
delta="+12%",
help="新しい戦略導入後の改善"
)
col3.metric(
label="インタラクション回数",
value="74回",
delta="+9回",
help="交流要素（交渉・会話）が増えた"
)
現在は固定値を出力しているが、ファイル入力→分析→結果出力などと組み合わせれば数値的な変化の表示がきれいに作れる。
サンプル：進捗バー表示
st.header("進捗バーの例")
progress = st.progress(0, text="読み込み中...")
for i in range(1, 101):
time.sleep(0.01)
progress.progress(i, text=f"現在 {i}% ...")
st.success("処理が完了しました！")
コードが実行されている間は処理が終了しないのでst.scucess()の処理が走らないのでステータス表示されない。