Python入門トップページ

« 戻る 次へ »

Streamlit で Web アプリを作成しよう：目次

  1. 仮想環境を構築して Streamlit をインストールする
  2. ソルバーのクラスを準備する
  3. Streamlit アプリのひな形を作成して実行する
  4. CSV ファイルのアップロード機能を実装する
  5. 予算設定のスライドバーを実装する
  6. ソルバーを呼び出してアプリを完成させる
  7. GitHub でリポジトリを公開する
  8. Streamlit Community Cloud でアプリを公開する

Streamlit で Web アプリを作成しよう

予算設定のスライドバーを実装する

ここでは「予算設定」のタブにスライドバーを実装して，設定金額となる値を指定できるようにします．このとき，スライドバーに設定できる値の下限と上限を指定する必要があります．下限には最も単価の安い商品の値段を設定し，上限には全ての商品を注文した場合の合計金額を設定することにします． 

GochiApp.py
import streamlit as st
import pandas as pd

st.title("ゴチバトルソルバー")

# サイドバー
st.sidebar.header("CSVファイルのアップロード")
weight_file = st.sidebar.file_uploader("メニューデータ", ["csv"])

# タブ
tab1, tab2, tab3 = st.tabs(
    [
        "メニュー情報",
        "予算の設定",
        "注文の作成"
    ]
)

with tab1:
    if weight_file is None:
        st.markdown("- メニューデータをアップロードしてください")
    else:
        st.markdown('### メニュー情報')
        weight_file = pd.read_csv(weight_file)
        st.table(weight_file)

with tab2:
    st.markdown('### 予算の設定')
    st.markdown('- 下限は最も安い料理だけを注文する場合')
    st.markdown('- 上限はすべての料理を注文する場合')
    if weight_file is None:
        st.markdown("- メニューデータをアップロードしてください")
    else:
        min_weight = weight_file['price'].min()
        sum_weight = weight_file['price'].sum()
        st.slider('スライドさせて予算を設定してください', min_value=min_weight, max_value=sum_weight)  # スライダー

with tab3:
  st.markdown('### 注文の作成')

次のコマンドでアプリを起動します． 

(py312stream) C:\Users\UserName\Documents\streamlit>streamlit run GochiApp.py ⏎

起動後に「予算の設定」タブを開くと，まだ CSV ファイルを読み込んでいないので次のような画面になります．

streamlit-2025-06

画面左のサイドバーから CSV ファイルをアップロードすると，下限と上限が設定されたスライドバーが表示されました．スライドバーをマウスを使って調整できると共に，キーボードのカーソルキー（ ←，→ ）でも操作できることを確認してください．

streamlit-2025-07

目次に戻る

« 戻る 次へ »