HAGAKUREプログラミング塾
第2回では、各自が作りたいアプリを相談しながら作ります！
画面共有は見えていますか？
音声ははっきりと聞こえていますか？
チャットはSlackの方でお願いします。
佐賀県産業スマート化センターさまのコミュニティ支援にて、
ZOOMの有料プランを提供いただき、利用させていただいております。
https://www.saga-smart.jp/
Streamlitで簡単なWebアプリを作り、
CSVファイルでデータを保存・読み込みできるようになる
自分の手でWebアプリを作る楽しさを体験！
👉 Pythonコードだけで、インタラクティブなアプリが作れる！
必要なパッケージをインストール
# bash pip install streamlit pandas
インストール後、動作確認：
# bash streamlit hello
ブラウザが開いて、デモアプリが表示されればOK！
app01.py - 最初のStreamlitアプリ
import streamlit as st
st.title("📝 私の最初のStreamlitアプリ")
st.header("見出し")
st.write("こんにちは、Streamlit！")
st.text("普通のテキスト")
実行方法：
# bash streamlit run app01.py
app02.py - インタラクティブな要素
import streamlit as st
st.title("📝 ユーザー入力のテスト")
name = st.text_input("お名前を入力してください")
age = st.number_input("年齢を入力してください", min_value=0, max_value=120)
if st.button("送信"):
st.write(f"こんにちは、{name}さん！")
st.write(f"年齢は{age}歳ですね。")
app03.py - データの読み書き
import streamlit as st
import pandas as pd
import os
CSV_FILE = "data.csv"
# CSVファイルの読み込み（なければ空のDataFrame）
if os.path.exists(CSV_FILE):
df = pd.read_csv(CSV_FILE)
else:
df = pd.DataFrame(columns=["名前", "年齢"])
st.title("📊 CSVデータの表示")
st.dataframe(df)
app04.py - データをCSVに保存
import streamlit as st
import pandas as pd
import os
CSV_FILE = "data.csv"
# データ読み込み
if os.path.exists(CSV_FILE):
df = pd.read_csv(CSV_FILE)
else:
df = pd.DataFrame(columns=["名前", "年齢"])
st.title("📝 データ登録アプリ")
# 入力フォーム
name = st.text_input("名前")
age = st.number_input("年齢", min_value=0, max_value=120)
if st.button("登録"):
new_data = pd.DataFrame([{"名前": name, "年齢": age}])
df = pd.concat([df, new_data], ignore_index=True)
df.to_csv(CSV_FILE, index=False)
st.success("登録しました！")
st.dataframe(df)
app05.py - お買い物リストアプリ
import streamlit as st
import pandas as pd
import os
CSV_FILE = "shopping.csv"
# データ読み込み
if os.path.exists(CSV_FILE):
df = pd.read_csv(CSV_FILE)
else:
df = pd.DataFrame(columns=["商品名", "数量", "購入済み"])
st.title("🛒 お買い物リストアプリ")
# 商品追加フォーム
st.subheader("📝 商品を追加")
col1, col2 = st.columns([3, 1])
with col1:
item = st.text_input("商品名")
with col2:
quantity = st.number_input("数量", min_value=1, value=1)
if st.button("追加"):
if item:
new_item = pd.DataFrame([{
"商品名": item, "数量": quantity, "購入済み": False
}])
df = pd.concat([df, new_item], ignore_index=True)
df.to_csv(CSV_FILE, index=False)
st.success(f"{item} を追加しました！")
st.rerun() # 画面を再読み込み
購入済みチェック機能
# 買い物リストの表示と購入済みチェック
st.subheader("📋 買い物リスト")
if len(df) > 0:
for idx, row in df.iterrows():
col1, col2, col3 = st.columns([3, 1, 1])
with col1:
st.write(f"**{row['商品名']}**")
with col2:
st.write(f"数量: {row['数量']}")
with col3:
checked = st.checkbox(
"購入済み",
value=bool(row['購入済み']),
key=f"check_{idx}"
)
if checked != bool(row['購入済み']):
df.loc[idx, '購入済み'] = checked
df.to_csv(CSV_FILE, index=False)
st.rerun()
# 統計情報
total = len(df)
completed = len(df[df['購入済み'] == True])
st.write(f"進捗: {completed}/{total} 完了")
else:
st.info("まだ商品が登録されていません")
この後は少しだけ発展的なテクニック
最小限の実装
import streamlit as st
st.title("🧩 タブ切り替えの例")
tab_input, tab_result = st.tabs(["入力", "結果"])
with tab_input:
name = st.text_input("名前")
if st.button("保存"):
st.session_state["name"] = name
with tab_result:
st.write("入力結果")
st.write(st.session_state.get("name", "まだ入力されていません"))
タブごとに with tab: ブロックでUIを分けます。
?name=太郎 のように指定して状態を共有
import streamlit as st
st.title("クエリパラメータの例")
# 単独パラメータ: ?name=太郎
name = st.query_params.get("name", "")
st.write(f"私の名前は{name}です。")
# 複数パラメータ: ?city=Tokyo&tag=sushi
city = st.query_params.get("city", "")
tag = st.query_params.get("tag", "")
st.write(f"出身は{city}、好きなものは{tag}です。")
URLを共有すれば、開いた時点で同じ値が反映されます。
アプリ全体の見た目を設定ファイルで管理
# .streamlit/config.toml [theme] primaryColor = "#FF6B6B" # ボタンや選択項目の色（赤系） backgroundColor = "#FFF9E6" # 背景色（薄い黄色） secondaryBackgroundColor = "#E3F2FD" # サイドバー背景色（薄い青） textColor = "#1A1A1A" # テキスト色（濃い黒） font = "sans serif" # フォント
.streamlit フォルダを作成配色以外（タイトル・レイアウト等）はコードで設定します。
st.set_page_config でタイトルやレイアウトを設定
import streamlit as st
# 必ず最初の行で呼び出す（他のst.〇〇より前）
st.set_page_config(
page_title="私のアプリ",
page_icon="📝",
layout="wide" # 画面幅いっぱい（デフォルトは"centered"）
)
# ここから通常のコード
# .streamlit/config.toml の配色が自動で反映される
st.title("📝 私のアプリ")
st.write("ブラウザタブのタイトルとアイコンが設定されています")
st.button("ボタンの色は config.toml の primaryColor")
config.toml（配色）と set_page_config（ページ設定）を両方使えば完璧！
今日作ったアプリでできること
👉 これをベースに、いろいろなアプリが作れます！
Streamlit Community Cloudでデプロイ（無料）
手順：
requirements.txt を作成
# requirements.txt streamlit pandas
リポジトリに含めるファイル：
注意：CSVファイルはデプロイ時に初期化されます。
本格的なアプリにはデータベース（SQLite等）を検討しましょう。
次回は、各自が作りたいアプリを一緒に作っていきます！
各自のアプリ制作ワークショップ
👉 第2回までに作りたいアプリを考えておきましょう！
ご参加ありがとうございました
ご質問・フィードバックはSlackまでお願いします。
次回は各自のアプリ作りを楽しみましょう！🎉