お疲れ様です。
今日は「Streamlitのコンポーネントとマルチページ機能」について部分いたします。
基本的なコンポーネント
StreamlitでWebアプリを作成する際に使用するコンポーネントを紹介します。
詳細が知りたい場合はAPI referenceを参照してください。
テキスト表示
文字を表示する際に使用するコンポーネントです。
import streamlit as st
st.title("title") # タイトル
st.header("header") # ヘッダー
st.write("write") # 表示
st.markdown("# markdown") # マークダウンで表示
st.text("text") # テキスト表示
実行結果は以下のようになります。
ウィジェット
Steramlitではさまざまなウィジェットが簡単に作成できます。
import streamlit as st
st.button("button") # ボタン
st.selectbox("selectbox", ("select1", "select2")) # セレクトボックス
st.multiselect("multiselectbox", ("select1", "select2")) # 複数選択可能なセレクトボックス
st.radio("radiobutton", ("radio1", "radio2")) # ラジオボタン
st.text_input("text input") # 文字入力(1行)
st.text_area("text area") # 文字入力(複数行)
st.slider("slider", 0, 100, 50) # スライダー
st.file_uploader("Choose file") # ファイルアップロード
実行結果は以下のようになります。
各ウィジェットにその他引数を渡すことでカスタマイズが可能です。
さらにウィジェットの戻り値を変数に入れることで表示制御も簡単にできます。
import streamlit as st
check = st.checkbox("check button") # チェックボタン
if check:
st.button("button")
st.selectbox("selectbox", ("select1", "select2"))
st.multiselect("multiselectbox", ("select1", "select2"))
st.radio("radiobutton", ("radio1", "radio2"))
st.text_input("text input")
st.text_area("text area")
st.slider("slider", 0, 100, 50)
st.file_uploader("Choose file")
実行結果は以下のようになります。
チェックボックスをクリックすると他のウィジェットが表示されます。
サイドバー
Streamlitではサイドバーを表示できます。
import streamlit as st
st.button("button")
st.selectbox("selectbox", ("select1", "select2"))
st.multiselect("multiselectbox", ("select1", "select2"))
st.radio("radiobutton", ("radio1", "radio2"))
# 以下をサイドバーに表示
st.sidebar.text_input("text input")
st.sidebar.text_area("text area")
st.sidebar.slider("slider", 0, 100, 50)
st.sidebar.file_uploader("Choose file")
実行結果は以下のようになります。
表
表を表示するためのコンポーネントです。
st.dataframeは、列をクリックすると並び替えができるようなインタラクティブな表を作成できます。
st.tableは静的な表を作成できます。
st.metricは指標を表示できます。
import streamlit as st
import pandas as pd
import numpy as np
dataframe = pd.DataFrame(np.random.randn(5,20))
st.dataframe(dataframe) # pandasのデータフレーム
st.table(dataframe) # 静的な表
st.metric(label="Temperature", value="70 °F", delta="1.2 °F") # 指標
実行結果は以下のようになります。
グラフ
グラフを表示するためのコンポーネントです。
拡大・縮小、マウスオーバーでグラフ上の値の表示などインタラクティブなグラフを作成できます。
import streamlit as st
import pandas as pd
import numpy as np
dataframe = pd.DataFrame(np.random.randn(20,3), columns=["a", "b", "c"])
st.line_chart(dataframe) # 線グラフ
st.area_chart(dataframe) # チャート
st.bar_chart(dataframe) # 棒グラフ
実行結果は以下のようになります。
マップ
マップを表示するためのコンポーネントです。
import streamlit as st
import pandas as pd
import numpy as np
df = pd.DataFrame(
np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
columns=['lat', 'lon'])
st.map(df)
実行結果は以下のようになります。
マルチページ
マルチページ機能とは、複数のページを用意できる機能です。
Streamlitは通常1ページの構成であり、そのページ上ですべての動作が完結します。
今までは機能ごとにページを分けたい場合、サイドバーにst.selectboxやst.radioを配置、if文で分岐するなど工夫してマルチページを実現していました。
しかし、Ver1.10.0からStreamlitにマルチページ機能が実装され、手軽に実現できるようになったので紹介します。
基本的な使い方
- 任意のフォルダを作成（ここではapp）
- 1で作成したフォルダに任意のPythonファイルを作成（ここではapp.py）
- 1で作成したフォルダにpagesというフォルダを作成します
必ずpagesという名前で作成すること - pagesフォルダにPythonファイルを作成する
上記の手順で作成すると以下のようなフォルダ構成になります。
app
├ app.py
├ pages
├ page2.py
├ page3.py
各ファイルの中身は以下のようにします。
# app.py
import streamlit as st
st.title("app")
# page2.py
import streamlit as st
st.title("page2")
# page3.py
import streamlit as st
st.title("page3")
実行結果は以下のようになります。
pagesフォルダに配置されたファイルが自動でサイドバーに追加されます。
サイドバーにあるページをクリックするとページ遷移できます。
ページの順番
pagesフォルダ内のファイルに関しては、サイドバーに表示される順番を変更できます。
ファイル名に、01_、02_のように表示したい順番に接頭語を付けることでページの順番を操作できます。
接頭語はサイドバー上で省略されて表示されます。
app
├ app.py
├ pages
├ 02_page2.py
├ 01_page3.py
実行結果は以下のようになります
まとめ
Streamlitのコンポーネントの使い方やマルチページ機能について記載しました。
Streamlitは他のフレームワークと違い、直感的なコードを書くだけでWebアプリを開発できます。フロントエンドの知識がなくても、デザイン性のある画面を自動で表示してくれるのも魅力的です。
また、データのアップロードやデータの解析、結果を表やグラフで表示など、データサイエンス分野でよく行われる処理を、Webアプリとして簡単に多数の人に共有できるのも便利です。
今日は以上です。
ありがとうございました。
よろしくお願いいたします。