Streamlit カスタムレイアウト応用編：第7回 Sidebar

こんにちは、JS2IIUです。Streamlitのレイアウト要素について紹介してきました、残り第7回、第8回の2回となりました。今回もよろしくお願いします。

はじめに

Streamlitのレイアウト機能の一つ、Sidebarについて解説します。Sidebarは、画面の左側にサイドバーを設置し、インタラクティブなUIパーツを配置することで、ユーザーがデータやオプションを直感的に選択できるエリアを提供します。ダッシュボードやアプリケーションの操作性を高め、データのフィルタリングや設定オプションの選択などに活用されています。

Sidebarの基本的な使い方

StreamlitでSidebarを使用するには、st.sidebarを利用します。このエリアには、ボタン、テキスト入力、スライダーなどのウィジェットを配置することができ、st.sidebarを使うことでメインコンテンツとは別に配置されます。

Sidebarの基本構文

import streamlit as st

# サイドバーにウィジェットを配置
st.sidebar.title("サイドバータイトル")
st.sidebar.write("サイドバーに配置されたテキスト")

# サイドバー内にボタンやスライダーなどのウィジェットを配置
button_clicked = st.sidebar.button("サイドバーのボタン")
slider_value = st.sidebar.slider("サイドバースライダー", 0, 100, 50)

上記のコードでは、st.sidebar.title()およびst.sidebar.write()を使ってサイドバーにテキストを表示し、st.sidebar.button()とst.sidebar.slider()でボタンとスライダーを追加しています。

Streamlitのdocumentationには次のように説明されています。

Not only can you add interactivity to your app with widgets, you can organize them into a sidebar. Elements can be passed to st.sidebar using object notation and with notation.

ウィジェットでアプリにインタラクティブ性を追加できるだけでなく、それらをサイドバーに整理することもできます。st.sidebarには、オブジェクト記法と記法を使って要素を渡すことができます。

st.sidebar - Streamlit Docs

st.sidebar displays items in a sidebar.

docs.streamlit.io

Sidebarで使えるウィジェット

Sidebarには、以下のようなさまざまなウィジェットを配置できます：

• ボタン: st.sidebar.button(“ボタン名”)
• スライダー: st.sidebar.slider(“スライダー名”, min_value, max_value, default_value)
• テキスト入力: st.sidebar.text_input(“入力フィールド名”, “デフォルト値”)
• セレクトボックス: st.sidebar.selectbox(“選択肢”, [“オプション1”, “オプション2”])
• マルチセレクト: st.sidebar.multiselect(“選択肢”, [“オプション1”, “オプション2”])

サイドバーの実用例

以下に、サイドバーでデータフィルタリングやインタラクティブなデータの可視化を行う例を示します。

import streamlit as st
import pandas as pd
import numpy as np

# サンプルデータ生成
data = pd.DataFrame({
    'カテゴリ': ['A', 'B', 'C', 'D'],
    '値': np.random.randint(1, 100, 4)
})

# サイドバーにフィルターオプションを追加
st.sidebar.title("フィルター設定")
selected_category = st.sidebar.selectbox("カテゴリを選択してください", data['カテゴリ'].unique())
value_range = st.sidebar.slider("値の範囲を選択してください", int(data['値'].min()), int(data['値'].max()), (10, 90))

# サイドバーの選択に基づいてデータをフィルタリング
filtered_data = data[(data['カテゴリ'] == selected_category) & (data['値'].between(*value_range))]

# フィルタリング後のデータ表示
st.write("選択されたカテゴリと範囲でのデータ")
st.write(filtered_data)

コードの解説

1. サイドバーの設定:

• st.sidebar.selectbox()とst.sidebar.slider()を使用して、フィルタリングのためのオプションをサイドバーに配置しています。
• selectboxではカテゴリの選択肢を提供し、sliderではデータの範囲を設定できるようにしています。

1. データのフィルタリング:

• ユーザーがサイドバーで選択したカテゴリおよび値の範囲に基づき、filtered_dataでデータをフィルタリングします。
• between()関数で値の範囲フィルタを適用し、該当するデータだけを表示します。

Sidebar使用時の注意点

• スペース制約: サイドバーはスペースが限られているため、配置するウィジェット数や長さに注意が必要です。要素が多すぎるとスクロールが必要になり、ユーザーが使いにくくなる可能性があります。
• UIの一貫性: サイドバーには操作に関する重要な要素を配置し、データ表示や操作結果の出力はメインエリアで行うようにすると、ユーザーが迷わずに使えるUIになります。

このように、SidebarはUIの操作性やインタラクティブ性を高めるために便利な要素です。