Python入門トップページ


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

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

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

CSV ファイルのアップロード機能を実装する

次に,CSVファイルのアップロード機能を実現します.次の通り,2行目では pandas をインポートし,8行目のように,サイドバーにファイルのアップローダーを設置します.さらに,1番目のタブでは CSV ファイルをデータフレームに読み込んで表形式で表示するためのコードを入力します.

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('### 予算の設定')

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

次に,CSVファイルを準備します.ここからダウンロードするか,次の内容のCSVファイルを準備します.

gochi-menu.csv
no,menu,size,price
0,あわびのオイスターソース煮込み,,928
1,かに肉と青梗菜のクリーム煮込み,,598
2,タチウオ四川風炒め,(小),880
3,タチウオ四川風炒め,(大),1180
4,にんにくの芽と蜂の巣の四川風炒め,,598
5,フカヒレスープ,,1280
6,ふかひれ姿煮込み,(小),1860
7,ふかひれ姿煮込み,(大),2580
8,むしホタテにんにく風味,,788
9,伊勢海老チリ or マヨ,,2588
10,海鮮いため,,898
11,海鮮入りおこげ,,898
12,海老サラダ,,598
13,海老チリソース,,698
14,海老マヨネーズ,,698
15,活アゲマキ貝とニンニクの芽炒め,(小),980
16,活アゲマキ貝とニンニクの芽炒め,(大),1280
17,活カキ入りチヂミ,(小),880
18,活カキ入りチヂミ,(大),1000
19,干し海老白菜芯炒め,,498
20,牛肉と生椎茸オイスタソース炒め,,698
21,黒胡椒入り鳥唐揚げ,,498
22,黒酢いり広東風キムチ,,398
23,蒸し豚肉の辛ソース,,598
24,赤酒粕入り豚バラ煮込みと花巻挟み,(小),680
25,赤酒粕入り豚バラ煮込みと花巻挟み,(大),980
26,ジャージャーメン,,550
27,ビーフン五目炒め,(小),880
28,ビーフン五目炒め,(大),1180
29,豚スペアリブ唐揚げ特製ソースかけ,(小),880
30,豚スペアリブ唐揚げ特製ソースかけ,(大),1180
31,豚足とろけるほど醤油煮込み,,398
32,軟らかい豚バラ煮込み,,598
33,北京ダック,,625

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

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

サイドバーにファイルをアップロードするための要素が表示されました.ボタンを押してファイルを選択するか,CSVファイルをその要素にドラッグ&ドロップします.

streamlit-2025-04

ファイルをアップロードすると,読み込まれた内容が「メニュー情報」のタブに表形式で表示されました.

streamlit-2025-05

目次に戻る