🐼

【Streamlitコンポーネント開発】アコーディオンメニューを作った話

に公開
Python
React
Streamlit
Snowflake
dashboard
tech

前置き

こんにちは、データエンジニアの山口歩夢です。

Streamlitは、Pythonでデータサイエンスや機械学習向けのWebアプリケーションを素早く構築できるフレームワークです。シンプルなPythonコードだけでWebアプリが作れる手軽さが魅力で、開発者にとって非常に便利なツールです。

一方でその手軽さゆえに、複雑なUI構築や細かなデザイン調整が難しいという課題もあります。標準ウィジェットだけでは、痒いところに手が届かないことも少なくありません。

そんなときに活躍するのが、Streamlitカスタムコンポーネントです。HTML、CSS、JavaScriptを組み合わせて独自の要素を作成し、Streamlitアプリに組み込むことができます。これにより、Streamlitの手軽さを維持しつつ、より複雑なUIの実装などを実現できます。
また、Streamlit Components Galleryには、世界中の開発者が公開した数多くのカスタムコンポーネントが集まっており、誰でも自由に色々なコンポーネントを利用することができます。

本題： アコーディオンメニューを作った話

そこで今回は、streamlit-sidebar-accordion-menuというライブラリを自作してみました。
このライブラリを活用することで、Streamlitのサイドバーにアコーディオンメニューを実装できるようになります。

https://github.com/gussan-me/streamlit_sidebar_accordion_menu

特徴

通常、Streamlitではサイドバーにアコーディオンメニューを設置することはできませんが、本コンポーネントを使えばそれが実現可能になります。
ページ数が増えてきた場合でも、サイドバーをスッキリ整理できるのが利点です。

インストールと使い方

1.インストール

まずは、pip installでライブラリのインストールを行います。

$ pip install streamlit-sidebar-accordion-menu

2.ディレクトリ・ファイルの準備

Streamlitでは、メインとなるPythonスクリプトのファイルの他にpagesディレクトリ配下にPythonスクリプトを用意することで、マルチページ機能を実装することができますが、本ライブラリも同じようにディレクトリを用意します。

例えば、以下のようにメインとなるapp.pyやpagesディレクトリ配下にPythonスクリプトを用意します。

root/
├── app.py
├── pages/
│   ├── sales_dashboard.py
│   ├── user_analytics.py
│   ├── general_settings.py
│   └── advanced_settings.py
└── .streamlit/
    └── config.toml

app.pyの部分やpagesディレクトリに配置するPythonスクリプトのファイル名は、語尾にpyが付いていれば、任意の名前で問題ありません。

3.メインアプリファイルの作成

次に、アプリのメインとなるスクリプトを作成します。
辞書形式でアコーディオンメニューの構成を定義し、sidebar_accordion_menu関数を呼び出します。

import streamlit as st
from sidebar_accordion_menu import sidebar_accordion_menu

st.set_page_config(page_title="My App", layout="wide")

# シンプルな辞書形式 - 新機能！ 🎉
menu = {
    "🏠 Home": None,  # メインページ
    "📊 Analytics": {
        "Sales Dashboard": "sales_dashboard",
        "User Analytics": "user_analytics",
    },
    "⚙️ Settings": {
        "General": "general_settings",
        "Advanced": "advanced_settings",
    }
}

# アコーディオンメニューをレンダリング
sidebar_accordion_menu(menu)

# メインページのコンテンツ
st.title("Welcome to My App")
st.write("Select a page from the sidebar menu.")

4. ページファイルの作成

pagesディレクトリ配下に、各ページ用のファイルを追加します。
以下のようなスクリプトを必要なページ分作成します。

import streamlit as st
from sidebar_accordion_menu import sidebar_accordion_menu

# 同じメニュー構造を使用
menu = {
    "🏠 Home": None,
    "📊 Analytics": {
        "Sales Dashboard": "sales_dashboard",
        "User Analytics": "user_analytics",
    },
    "⚙️ Settings": {
        "General": "general_settings",
        "Advanced": "advanced_settings",
    }
}

sidebar_accordion_menu(menu)

# ページコンテンツ
st.title("Sales Dashboard")
st.metric("Total Sales", "$10,234", "+12%")

5.デフォルトのStreamlitページを非表示にする

Streamlitのデフォルトページナビゲーションを非表示にする場合は、
.streamlit配下のconfig.tomlファイルに以下の設定を追加します。
こちらを設定しないと、アコーディオンメニューの上部に、デフォルトのページナビゲーションが表示されてしまいます。

[client]
showSidebarNavigation = false

以上で設定完了です。これで、最初にお見せしたgifファイルのようにアコーディオンメニューがサイドバーで使用できます！

まとめ

今回は、Streamlitカスタムコンポーネント開発に挑戦し、サイドバーにアコーディオンメニューを追加できるライブラリを作成しました。
Streamlitの裏側の仕組みについて学ぶ良い機会となり、非常に勉強になりました。今後も引き続き、他のコンポーネント開発にも挑戦していきたいと思っています。

その他、Streamlitについては、私が執筆した以下の書籍でも詳しく解説しています。
ぜひご覧ください！

https://nextpublishing.jp/book/18323.html

Discussion