Python入門トップページ

« 戻る 次へ »

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

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

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

Streamlit アプリのひな形を作成して実行する

Streamlit アプリのひな形を作成して実行してみます．まず，streamlit フォルダ内に GochiApp.py というファイルを生成し，次の内容を入力し，保存します． 

GochiApp.py
import streamlit as st

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

st.sidebar.header("CSVファイルのアップロード")

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

with tab1:
  st.markdown('### メニュー情報')

with tab2:
  st.markdown('### 予算の設定')

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

ファイルを保存できたら，次のコマンドで streamlit アプリを実行します．初めて実行するときには，Emailの入力が求められますが，入力せずに Enter キーを押すだけでも構いません．コマンドを実行すると自動的に Web ブラウザが起動するはずです． 

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

      Welcome to Streamlit!

      If you'd like to receive helpful onboarding emails, news, offers, promotions,
      and the occasional swag, please enter your email address below. Otherwise,
      leave this field blank.

      Email:  ⏎

  You can find our privacy policy at https://streamlit.io/privacy-policy

  Summary:
  - This open source library collects usage statistics.
  - We cannot see and do not store information contained inside Streamlit apps,
    such as text, charts, images, etc.
  - Telemetry data is stored in servers in the United States.
  - If you'd like to opt out, add the following to %userprofile%/.streamlit/config.toml,
    creating that file if necessary:

    [browser]
    gatherUsageStats = false


  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://10.132.194.41:8501

Web ブラウザが起動して次のような画面が表示されました．タイトルに「ゴチバトルソルバー」と表示され，左側のサイドバーには「CSVファイルのアップロード」と表示されます．さらに3つのタブが表示され「メニュー情報」のタブにはマークダウン形式で入力した見出し「メニュー情報」が表示されています．なお，マークダウン形式に関する情報はこちらを参照してください．

streamlit-2025-01

「予算の設定」タブに移動しました．

streamlit-2025-02

さらに，「注文の作成」タブに移動すると次のように表示されます．

streamlit-2025-03

アプリの動作を終了するには Anaconda Prompt で Ctrl + C を数回押します． 

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

      Welcome to Streamlit!

      If you'd like to receive helpful onboarding emails, news, offers, promotions,
      and the occasional swag, please enter your email address below. Otherwise,
      leave this field blank.

      Email:

  You can find our privacy policy at https://streamlit.io/privacy-policy

  Summary:
  - This open source library collects usage statistics.
  - We cannot see and do not store information contained inside Streamlit apps,
    such as text, charts, images, etc.
  - Telemetry data is stored in servers in the United States.
  - If you'd like to opt out, add the following to %userprofile%/.streamlit/config.toml,
    creating that file if necessary:

    [browser]
    gatherUsageStats = false


  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://10.132.194.41:8501

   Ctrl + C を数回押す 

(py312stream) C:\Users\UserName\Documents\streamlit>

目次に戻る

« 戻る 次へ »