Streamlitで手軽にWebアプリ開発

カバー

Streamlitとは

Streamlit[1]とは、PythonでWebアプリを簡単に作成できるフレームワークです。
データサイエンス分野の開発でよく利用されています。
直感的なコードで学習コストが少なく、フロントエンドの開発経験がなくてもWebアプリとして簡単に開発できます。
また手軽に開発できるため、WebUIのプロトタイプ開発にも適しています。

他のWebフレームワークとの比較・特徴

Pythonで有名なWebフレームワークの比較です。

フレームワーク名特徴適しているアプリ
Django機能が豊富、学習コストは高い多機能のアプリ
Flaskシンプルで軽量、学習コストは比較的低め、大規模なアプリ向けに拡張性も高い小規模なアプリ
Streamlit開発が簡単、コードが直感的、学習コストは低いデータサイエンス分野のアプリ

Streamlitの一番の特徴は手軽に開発ができることです。
最短1行でWebアプリを開発でき、WebUIを簡単に作成できます。

Streamlitが適している場面

Streamlitは以下のような場面で利用するのに適しています。

  • データサイエンス分野でWebUI付きのアプリを作成する
  • データの可視化や分析結果を複数人で共有する
  • とりあえず動くものを見せたい
  • プロトタイプのWebアプリを作成する

Streamlitの使い方

Streamlitのインストール

Pythonで動作するので、事前にPythonをインストールしてください。
この記事の開発環境は以下の通りです。

バージョン
OSWindows 10 Pro
Python3.9.5

以下のコマンドを実行して、Streamlitをインストールします。

> pip install streamlit

この記事で使用するStreamlitのバージョンは1.20.0です。

Steramlitの実行

ファイル（app.py）を作成して、Pythonファイル内で以下のモジュールをインポートします。

#app.py
import streamlit as st

以下のコマンドを実行します。

> streamlit run app.py

以下のように表示されていれば、http://localhost:8555にアクセスすることでWebアプリを表示できます。

You can now view your Streamlit app in your browser.

Local URL: http://localhost:8555

基本的なコンポーネント

StreamlitでWebアプリを作成する際に使用するコンポーネントを紹介します。
詳細が知りたい場合はAPI reference[2]を参照してください。

テキスト表示

文字を表示する際に使用するコンポーネントです。

import streamlit as st

st.title("title") # タイトル
st.header("header") # ヘッダー
st.write("write") # 表示
st.markdown("# markdown") # マークダウンで表示
st.text("text") # テキスト表示

実行結果は以下のようになります。

image1

ウィジェット

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") # ファイルアップロード

実行結果は以下のようになります。

image2

各ウィジェットにその他引数を渡すことでカスタマイズが可能です。
さらにウィジェットの戻り値を変数に入れることで表示制御も簡単にできます。

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")

実行結果は以下のようになります。

image3

チェックボックスをクリックすると他のウィジェットが表示されます。

image4

サイドバー

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")

実行結果は以下のようになります。

image5

表

表を表示するためのコンポーネントです。
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") # 指標

実行結果は以下のようになります。

image6

グラフ

グラフを表示するためのコンポーネントです。
拡大・縮小、マウスオーバーでグラフ上の値の表示などインタラクティブなグラフを作成できます。

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) # 棒グラフ

実行結果は以下のようになります。

image7

マップ

マップを表示するためのコンポーネントです。

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)

実行結果は以下のようになります。

image8

マルチページ

マルチページ機能とは、複数のページを用意できる機能です。[3]
Streamlitは通常1ページの構成であり、そのページ上ですべての動作が完結します。
今までは機能ごとにページを分けたい場合、サイドバーにst.selectboxやst.radioを配置、if文で分岐するなど工夫してマルチページを実現していました。
しかし、Ver1.10.0からStreamlitにマルチページ機能が実装され、手軽に実現できるようになったので紹介します。

基本的な使い方

  1. 任意のフォルダを作成（ここではapp）
  2. 1で作成したフォルダに任意のPythonファイルを作成（ここではapp.py）
  3. 1で作成したフォルダにpagesというフォルダを作成します
    • 必ずpagesという名前で作成すること
  4. 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")

実行結果は以下のようになります。

image9

pagesフォルダに配置されたファイルが自動でサイドバーに追加されます。
サイドバーにあるページをクリックするとページ遷移できます。

ページの順番

pagesフォルダ内のファイルに関しては、サイドバーに表示される順番を変更できます。
ファイル名に、01_、02_のように表示したい順番に接頭語を付けることでページの順番を操作できます。
接頭語はサイドバー上で省略されて表示されます。

app
 ├ app.py
 ├ pages
    ├ 02_page2.py
    ├ 01_page3.py

実行結果は以下のようになります

image10

まとめ

Streamlitの紹介として、コンポーネントの使い方やマルチページ機能について記載しました。
Streamlitは他のフレームワークと違い、直感的なコードを書くだけでWebアプリを開発できます。フロントエンドの知識がなくても、デザイン性のある画面を自動で表示してくれるのも魅力的です。
また、データのアップロードやデータの解析、結果を表やグラフで表示など、データサイエンス分野でよく行われる処理を、Webアプリとして簡単に多数の人に共有できるのも便利です。

ぜひ一度使用してみてはどうでしょうか？

参考文献

▲
TOP
アルファロゴ 株式会社アルファシステムズは、ITサービス事業を展開しています。このブログでは、技術的な取り組みを紹介しています。X（旧Twitter）で更新通知をしています。
X @techblogalpha