Streamlit入門 – ウィジェットの使い方(前編)

streamlit入門
PexelsによるPixabayからの画像

前回は以下の記事でテキストやグラフの表示など、Streamlitの基本的な使い方について解説しました。

今回はチェックボックス、ラジオボタン、セレクトボックスといったウィジェットの使い方について解説していきたいと思います。

普通に作るとHTML、CSS、JavaScriptやサーバーサイドの処理に何行も書かないといけない処理も、Streamlitを使うとほんの数行で書くことができて非常に便利です

それにより、プロトタイプ・MVP(Minimum Viable Product)を作成し、ユーザに使ってもらい仮説を検証、フィードバックを受けて修正する、というのを高速で回すことができます。

是非、使い方を覚えて、素早くダッシュボードなどのWebを作成していただければと思います。

今回は前編ということで、以下のウィジェットについて紹介し、残りは次の記事でご紹介する予定です。

  • ボタン
  • データ・ダウンロードボタン
  • チェックボックス
  • ラジオボタン
  • セレクトボックス
  • マルチ・セレクトボックス

Streamlitのドキュメントはこちらにありますので、もっと詳細が知りたい方はこちらをご参照ください。

Input widgets - Streamlit Docs
Twitterで新規記事などについて発信し始めたのでフォローしていただけると励みになります!!↓
フォローする

ウィジェットの使い方

まず、必要なモジュールをインポートしておきます。

メインはstreamlitですが、データはPandasを使うのでpandasもインポートしておきます。

import streamlit as st
import pandas as pd

ボタン: st.button

まず、ボタンですが、st.button()でボタンを作成することができます。

labelプロパティlにボタンに表示するラベルを指定します。

すると、ボタンを押されたときにTrueが返ってくるのでそこに処理を書きます。

if st.button(label='click me!'):
    st.write('Thank you')

これでclick me!と書かれたボタンが作成され、そのボタンを押すことで処理をすることができます。

非常に簡単ですね!

Callback関数なども不要です。

他にも以下のように、ボタンを複数の列として並べ、押された方を表示するというやり方です(これはPlotlyの知識もいるので、詳細は読み飛ばしていただいて大丈夫です)。

import plotly.graph_objects as go 
st.header('2021年の株価推移')
col = st.columns(2)
show_default = col[0].button('デフォルト表示')
show_plotly = col[1].button('Plotlyで表示')

if show_default:
    st.subheader('デフォルト表示')
    st.line_chart(df[['スノーピーク', '楽天', 'トヨタ']])
elif show_plotly:
    fig = go.Figure()
    fig.add_traces(go.Scatter(x=df.index,
                            y=df['スノーピーク'],
                            marker_color='royalblue',
                            line_width=3,
                            name='スノーピーク')
                    )
    fig.add_traces(go.Scatter(x=df.index,
                            y=df['楽天'],
                            line_width=3,
                            marker_color='lightgrey',
                            name='楽天')
                    )
    fig.add_traces(go.Scatter(x=df.index,
                            y=df['トヨタ'],
                            line_width=3,
                            marker_color='tan',
                            name='トヨタ')
                    )
    fig.update_layout(plot_bgcolor='white',
                    margin=dict(t=10, l=10),
                    legend=dict(x=0.02, y=0.9, 
                                orientation='h'),
                    xaxis=dict(tickfont_color='grey',
                                showline=True,
                                linewidth=1,
                                linecolor='lightgrey'),
                    yaxis=dict(tickfont_color='grey',
                                showline=True,
                                linewidth=1,
                                linecolor='lightgrey'),
    )
    st.subheader('Plotlyで表示')
    st.plotly_chart(fig)

引数on_clickに関数を指定し、引数argsに指定した関数の引数を指定することで関数を呼び出すことも可能ですが、こういったCallback機能についてはまた別途解説したいと思います。

ちなみに、keyという引数の使い方も別途紹介したいと思いますが、もし引数もすべて全く同じウィジェットを2つ作成するとStreamlitではどっちがどっちか区別できませんので、そのときは違うkeyを指定して一意にしないといけません。

データ・ダウンロードボタン:st.dowのnload_button

ボタンを押すことでデータをダウンロードすることができます。

ダッシュボードを作成すると、元になったデータをダウンロードしたいというニーズは非常に高いです。

その機能をJavaScriptなしでたったの1行で実現することが可能というのは驚きですね。

前準備としてDataFrameをCSVにしておきます。

csv = df.to_csv().encode('SHIFT-JIS')

基本的な設定は以下です。

  • label
    ボタンに表示するラベルを設定
  • data
    ダウンロードするデータを設定
  • file_name
    ファイルをダウンロードしたときのファイル名を設定します。
  • mime
    ファイルの形式を設定します。ここでは”text/csv”としています。プレーンなテキストファイルであれば”text/plain”、画像であれば”image/png”を指定します。

st.title('Data Download Button')
st.header('2021年の株価推移')
st.download_button(label='Data Download', 
                   data=csv, 
                   file_name='stock_price.csv',
                   mime='text/csv',
                   )
st.line_chart(df[['スノーピーク', '楽天', 'トヨタ']])

すると、以下のようにグラフのデータをダウンロードすることができます。

チェックボックス:st.checkbox

続いてチェックボックスです。

3つのcolumnを用意して、st.checkboxを呼び出しますが、labelにそれぞれスノーピーク、楽天、トヨタを指定します。

戻り値は選択されていればTrue、選択されていなければFalseになります。

st.title('Check Box')
st.header('2021年の株価推移')
col = st.columns(3)
snowpeak = col[0].checkbox(label='スノーピーク')
rakuten = col[1].checkbox(label='楽天')
toyota = col[2].checkbox(label='トヨタ')

stocks = []
if snowpeak:
    stocks.append('スノーピーク')
if rakuten:
    stocks.append('楽天')
if toyota:
    stocks.append('トヨタ')
st.line_chart(df[stocks])

すると以下のように、選択された項目にしたがってグラフを表示することができます。

ラジオボタン:st.radio

ラジオボタンは複数の選択肢の中から一つ選ぶ場合に利用されます。

st.radioの基本的な設定は以下です。

  • label
    ラジオボタンの上に表示するテキストを指定します。
  • options
    選択するリストを設定します。
  • index
    デフォルトで選択されている項目をインデックスで指定します。
    例えば、index=1とすると2番目の楽天がデフォルトで選択された状態になります。
    指定しなければデフォルトの0が設定されます。
  • horizontal
    Trueにすると横に並べて表示されます。
st.title('Radio')
st.header('2021年の株価推移')

stock = st.radio(label='銘柄を選択してください',
                 options=('スノーピーク', '楽天', 'トヨタ'),
                 index=0,
                 horizontal=True,
)

st.line_chart(df[[stock]]

戻り値は、optionsで指定されたラベルが返ってきます。

ですので、スノーピークが選択されていれば”スノーピーク”が返ってきます。

セレクトボックス:st.selectbox

選択肢が多い場合には、ラジオボタンでは見にくくなる場合がありますので、その場合はセレクトボックスを使うのもよいですね。

基本的な設定はこちらです。

  • label
    セレクトボックスの上部に表示するテキスト情報を設定
    options
    選択項目を設定します。
    リスト形式でもnumpyの配列でも、pandasのSeriesやindexでも大丈夫です。

st.title('セレクトボックス')
st.header('2021年の株価推移')

stock = st.selectbox(label="銘柄を選んでください",
             options=df.columns)


st.line_chart(df[[stock]])

以下のようにドロップダウンで選択できるようになります。

ちなみに、format_funcという引数を使うとリストをうまく変換してくれます。

例えば、以下の場合はformat_funcにformat_funcを設定した場合です。

def my_format_func(original_label):
    return original_label + 'を選ぶ'

stock = st.selectbox(label="銘柄を選んでください",
             options=df.columns,
             format_func=my_format_func,
)


st.line_chart(df[[stock]])

マルチ・セレクトボックス:st.multiselect

セレクトボックスでリストから複数選択できるようにしたのがマルチ・セレクトボックスです。

設定の方法はセレクトボックスと同じです。

labelにテキスト情報、optionsに選択項目を指定します。

st.title('マルチ・セレクトボックス')
st.header('2021年の株価推移')

stocks = st.multiselect(label="銘柄を選んでください",
             options=df.columns,
)

st.line_chart(df[stocks])

以下のようにdefaultにラベルを指定すると、指定したラベルが最初から選択された状態になります。

stocks = st.multiselect(label="銘柄を選んでください",
             options=df.columns,
             default=["スノーピーク", "楽天"]
)

(ご参考) Streamlitを学ぶことができるUdemy講座

最後にStreamlitを学ぶことができる講座を2つご紹介しておきます。

『爆速で5つのPython Webアプリを開発』

軽快なテンポで、非常にわかりやすく、楽しく学ぶことができると思います。

APIを使うことにより、テキストから音声生成をしたり、Youtubeのデータを使用したりと色々な応用例を学ぶことができます。


『Streamlit, Pandas, Pythonで学ぶ!データ分析の基礎とインタラクティブダッシュボード作成入門』

オープンデータである一人あたり賃金データを使って、集計やStreamlitを使った可視化を行います。

データサイエンティストを目指している人、実際にデータ分析をしたい人にはオススメです。

まとめ

今回はStreamlitの重要ないくつかのウィジェットの使い方について見てきました。

本当に簡単に動的なグラフを作成したりすることができることがご理解いただけたかと思います。

もちろんダッシュボードだけでなく、Webアプリケーションを作成することも同じような感じで可能です。

もう少し複雑なダッシュボード、Webアプリはこれから作成していきたいと思います。

次回は各ウィジェットの使い方後編ということで、などのスライダーなどの使い方について解説していきたいと思います。

では!!

mm_0824

システム開発会社や銀行・証券会社で統計や金融工学を使ったクオンツ・分析業務を長く担当してきました。

現在はコンサルティング会社のデータ・サイエンティストとして機械学習、自然言語処理技術を使ったモデル構築・データ分析を担当しています。

このサイトでは論文や本、Udemyなどの学習ツールについての情報発信をしていきます。

皆様の業務や勉強のお役に立てれば嬉しいです。

Twitterでも新規記事についての発信をし始めたので是非フォローしていただけると嬉しいです!↓

フォローする
streamlit入門 データ可視化
フォローする
楽しみながら理解するAI・機械学習入門

コメント

タイトルとURLをコピーしました