乙Py先生のプログラミング教室
初学者のためのプログラミング学習サイト

Streamlit

今回は最近注目度が上がってきている
簡単UI作成ツールStreamlitのお話です




解説動画はこちら




Streamlitについて


1. Streamlitとは?

一言で言うと…

Pythonコードだけでインタラクティブな
Webアプリを作れるツールです


何がすごいの?

以下のような特徴があります。


HTMLやJavaScriptの知識がほぼ不要で
めちゃくちゃ簡単にGUIが作れる



開発のホットリロード(即時反映)が可能で
主にデータ可視化や機械学習モデルのデモ
ダッシュボード作成に使われる

StreamlitはSnowflake傘下となり
クラウドデータ活用との親和性がより高くなっている
(Snowflakeはフルマネージドなデータウェアハウスサービス)


2. Streamlitの特徴

こんな特徴があります。

PythonだけでOK
WebフレームワークやHTML/CSS/JSを知らなくても作れる


インタラクティブUI
スライダー、チェックボックス
セレクトボックスなど簡単に追加できる


ライブ更新
コードを保存するだけで即座にアプリが更新される


グラフとの相性
matplotlib, plotly, seaborn, altairなどと簡単に連携


デプロイも簡単
streamlit.ioや他のクラウドでも簡単に公開できる


Snowflake統合
Snowflake上でStreamlitアプリをホスティング可能

最近ではSnowflake上で簡単に
Streamlitアプリを作って公開できるので
めちゃくちゃ便利で捗ります!!!!!!

これだけでも使う価値アリかなと思っています。





3. 基本的な使い方

インストール方法

ローカルで使用したい場合は以下のコマンドで
インストールできます。
pip install streamlit


インストールが終わったら
こんな簡単なコードを書いて
app.py で保存します。
import streamlit as st

st.title("こんにちは Streamlit!")
st.write("これは最初のアプリです")
x = st.slider("数字を選んでください", 0, 100, 25)
st.write("選んだ数字は", x)

アプリを起動するには
streamlit run app.py
で起動できます。
(ファイルが有るディレクトリで実行)

実行するとブラウザーが立ち上がり
そこにアプリが表示されます。

スクリーンショット 2025-04-19 15.42.00



4. 使えるウィジェットの例


ウィジェットの紹介
次のようなものが使えます。

    st.button()    ボタン    
    st.slider()    スライダー    
    st.selectbox()    プルダウン    
    st.checkbox()    チェックボックス    
    st.text_input()    テキスト入力    
    st.file_uploader()    ファイルアップロード    
    st.image()    画像表示    
    st.map()    地図表示(pandasの緯度・経度データ)    

以下のコードを書いて実行すると
サンプル的に試すことができます。

import streamlit as st
import pandas as pd
import numpy as np
from PIL import Image

st.title("Streamlit ウィジェットの紹介")

st.header("1. st.button() - ボタン")
if st.button("クリックしてね"):
    st.write("ボタンが押されました!")

st.header("2. st.slider() - スライダー")
slider_val = st.slider("数値を選んでください", 0, 100, 25)
st.write(f"現在の値: {slider_val}")

st.header("3. st.selectbox() - プルダウンメニュー")
option = st.selectbox("好きな果物を選んでください", ["りんご", "バナナ", "ぶどう"])
st.write(f"選択されたのは: {option}")

st.header("4. st.checkbox() - チェックボックス")
agree = st.checkbox("私は利用規約に同意します")
if agree:
    st.write("同意ありがとうございます!")

st.header("5. st.text_input() - テキスト入力")
name = st.text_input("あなたの名前は?")
if name:
    st.write(f"こんにちは、{name}さん!")

st.header("6. st.file_uploader() - ファイルアップロード")
uploaded_file = st.file_uploader("画像をアップロードしてください", type=["jpg", "png"])
if uploaded_file is not None:
    image = Image.open(uploaded_file)
    st.image(image, caption="アップロードされた画像", width=300)

st.header("7. st.image() - 画像表示(サンプル画像)")
st.image("https://cdn.pixabay.com/photo/2024/11/30/15/55/eiffel-tower-9235220_1280.jpg", caption="タワー", width=100)

st.header("8. st.map() - 地図表示")
st.write("ランダムな緯度・経度データを地図に表示します")
df_map = pd.DataFrame(
    np.random.randn(100, 2) / [50, 50] + [35.69, 139.70],  # 東京周辺
    columns=['lat', 'lon']
)
st.map(df_map)

st.markdown("---")
st.write("以上、Streamlitの基本ウィジェットの紹介でした ")


5. どんな人におすすめ?


以下のような悩みを持っている人ならオススメです!!

PythonでGUIを作りたい人
データ可視化を誰かにシェアしたい人
機械学習モデルを他人に使わせたい人
Snowflakeを使おうとしている人
簡単な社内ツールを作りたい人


6. よくある使い道

こんな使われ方が多いです。

データの可視化アプリ
機械学習モデルのデモ用UI
社内ツールや分析ダッシュボード
ちょっとしたプロトタイプ作成


7.社内ツールデモ

デモは動画をご覧ください。


今回は
最近のStreamlitの使われかた等について
解説させていただきました。

ユーザーが増えると
すんごく捗ると思うので
これからも大注目です

今日はここまでです
それでは。




今回はWEBUI付きのアプリケーションを
サクサク作ることの出来るフレームワークである
Streamlitについてご紹介します。

解説動画はこちら



さてStreamlitはWEBUI付きのアプリケーションを
サクサク開発することができる
Python言語のフレームワークになっています。


Python言語でWEBUIを作るフレームワークは
次のようなものがありますが

streamlitについて.003
Flask
FAST API
Djangoに比べて
Streamlitはめちゃくちゃお手軽です。

主な特徴としてUI側をPythonのコードで
作成することができるという点があります。

これだけでも開発コストが
ガツンと下がりますね!!!!!

導入方法も至って簡単です。
pipなどでインストールするだけです。
pip install streamlit

インストールしたら
streamlit用のpythonファイルを作ります。

ここではsample1.pyというファイルを作ります。
どんな感じになるかコードを見てみましょう。

sample1.py
import streamlit as st

def main():
    # タイトル表示
    st.title('タイトル表示')
    # ヘッダー表示
    st.header('ヘッダー表示')
    # テキスト表示
    st.text('テキスト表示')
    # サブレベルヘッダー表示
    st.subheader('ブレベルヘッダー表示')
    # マークダウンテキスト表示
    st.markdown('**マークダウンテキスト表示 **')
    # LaTeX テキスト表示
    st.latex(r'\bar{X} = \frac{1}{N} \sum_{n=10}^{N} x_i')
    # コードスニペット表示
    st.code('print(\'code snippets ! \')')
    # エラーメッセージ表示
    st.error('エラーメッセージ表示')
    # 警告メッセージ表示
    st.warning('警告メッセージ表示')
    # インフォメッセージ表示
    st.info('インフォメッセージ表示')
    # 成功メッセージ表示
    st.success('成功メッセージ表示')
    # 例外表示
    st.exception(Exception('例外表示'))
    # 辞書の出力
    data = {'アプリ名': 'streamlitサンプル',
           'ユーザー': ['otupy','okkun',],}
    st.json(data)

if __name__ == '__main__':
    main()


これが出来たらファイルの有るディレクトリで
コマンドを実行します。
streamlit run --server.address localhost sample1.py

そうするとWEBブラウザーに画面が表示されます。

スクリーンショット 2021-12-18 17.25.38

ここら辺のテキストはstreamlitの機能で
表示させている物です。

コードに書いたものを上から順番に
UIに表示させているようです。

次にもう少し複雑なアプリケーションを
見てみましょう。

株価を取得して
UIにローソク足を表示させるというものです。

少し他のライブラリが必要なので
必要に応じてインストールしましょう。

pandas_datareader
plotly


コードはこんな感じです。

sample2.py
import streamlit as st
import pandas as pd
import numpy as np

import pandas_datareader as web

from datetime import datetime, date, timedelta
import plotly.graph_objects as go

from plotly.subplots import make_subplots

data_dict = {9432:'NTT日本',9433:'KDDI',9434:'ソフトバンク',
9613:'NTTデータ',9984:'ソフトバンクグループ'}
data_list = [k for k in data_dict.keys()]
ticker = st.sidebar.selectbox('銘柄コードを選択してください',data_list)
st.text('コード : {0} , 銘柄{1}'.format(ticker,data_dict[ticker]))

stock_code = '{0}.JP'.format(ticker)
data_source = 'stooq'

today = datetime.today()
end_date   = datetime.strftime(today, '%Y-%m-%d')

y30day = today - timedelta(days=30)
start_date =datetime.strftime(y30day, '%Y-%m-%d')

df = web.DataReader(stock_code, data_source=data_source, start=start_date, end=end_date)
df = df.sort_index()
x = np.arange(df.shape[0])
interval = 1
vals = np.arange(df.shape[0],step=interval)
labels = list(df[::interval].index.astype(str))
    
fig = go.Figure(
    data=[go.Candlestick(
        x=x,
        open=df['Open'],
        high=df['High'],
                    low=df['Low'],
                    close=df['Close']),
                 ],
            layout = go.Layout(
                    xaxis = dict(
                        tickvals = vals,
                        ticktext = labels,
                        tickangle=-45 
                    ),
            )
    )

config={'modeBarButtonsToAdd': ['drawline']}
st.plotly_chart(fig, use_container_width=True, config=config)

出来たら実行です。
streamlit run --server.address localhost sample2.py

画面の左側にはコード選択の
セレクトボックスが置かれます。

スクリーンショット 2021-12-18 17.14.47

これで選択するとそのコードに該当する
銘柄の株価が取得され、右側に表示されます。
スクリーンショット 2021-12-18 17.14.34

plotlyで表示しているので
非常にインタラクティブに操作できます。

今回は1ヶ月分だけを取得して表示させるような内容なので
これを改変すればもう少し凝ったアプリが作れます。

試したい方はここら辺のコードを参考にしてみてください。

今回はStreamlitをご紹介しました。

WEBのUIをPythonのコードだけで
自動的に生成してくれるので
簡単なアプリであれば開発がすぐにできます。

デザインなどを凝る場合は
他のフレームワークを使うことになると思いますが
スピード重視であればこちらのフレームワークが
かなり使えると思います。

いろいろ試してみてください。
それでは。


このページのトップヘ