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

JS2IIU

1年前

こんにちは、JS2IIUです。今回は、Expanderコンポーネントの紹介です。UIをすっきりさせるのには役立つ反面、余計なクリック操作をさせてしまうので、使い所は注意が必要なコンポーネントです。今回もよろしくお願いします。

はじめに
Expanderの特徴と用途
Expanderの基本的な使い方
注意点
まとめ

はじめに

今回のテーマは、StreamlitにおけるExpanderコンポーネントです。Expanderは、コンテンツを折りたたむことができるレイアウト要素で、コンパクトなUIを作成する際に役立ちます。詳細な情報やオプションをユーザーが必要に応じて展開して閲覧できるため、ダッシュボードやフォームでよく活用されています。

Expanderの特徴と用途

Expanderを使うことで、以下のようなメリットがあります：

長い説明文や詳細なオプションを、折りたたんだ状態で隠すことができる
必要な場合のみ展開して閲覧することができ、UIが整理されて見やすくなる
必要最低限の情報だけを初期表示することで、ユーザーの操作性が向上する

Expanderの基本的な使い方

1. 基本構文とパラメータ

Expanderはst.expanderを用いて作成できます。最も簡単な使い方は、以下のようにタイトルを指定して生成する方法です。

import streamlit as st

st.title("Expanderの基本例")

with st.expander("クリックして展開"):
    st.write("このコンテンツはクリックして展開できます。")

label（第1引数）: Expanderのタイトルとして表示されるテキストです。

Expanderをクリックすると内容が展開され、再度クリックすると折りたたまれます。

2. 詳細なパラメータ設定

Expanderには以下のパラメータが用意されています。

パラメータ	説明
`label`	Expanderのタイトルを指定します。ラベルには、オプションで以下のタイプのGitHub風のMarkdownを含めることができます：太字、斜体、取り消し線、インラインコード、リンク、画像。画像はアイコンのように表示され、最大高さはフォントの高さと同じです。
`expanded`	デフォルトで展開された状態かどうかを設定します（`True`または`False`）
`icon`	エキスパンダラベルの横に表示する絵文字またはアイコンをオプションで指定します。`icon`が`None`（デフォルト）の場合、アイコンは表示されません。`icon`が文字列の場合、以下のオプションが有効です： – 1文字の絵文字。絵文字ショートコードはサポートされていません。 – Material Symbolsライブラリのアイコン。 – 例えば、`icon=「:material/thumb_up: 」と`すると、サムアップアイコンが表示されます。その他のアイコンは、Material Symbols フォントライブラリからお探しください。

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

例えば、expanded=Trueを指定して初期状態で展開した状態に設定することができます。

import streamlit as st

st.title("Expanderの基本例")

with st.expander("クリックして展開", expanded=True, icon=':material/thumb_up:'):
    st.write("このコンテンツはクリックして展開できます。")

具体例：FAQセクションの作成

Expanderを利用して、FAQ（よくある質問）セクションを作成します。この例では、複数のExpanderを使い、それぞれに質問と回答を追加します。

import streamlit as st

st.title("FAQセクション")

with st.expander("Q1: Streamlitとは何ですか？"):
    st.write("StreamlitはPythonで作成できる簡単で強力なWebアプリケーションフレームワークです。")

with st.expander("Q2: Streamlitのレイアウト要素には何がありますか？"):
    st.write("StreamlitにはColumns, Container, Expander, Sidebarなどのレイアウト要素があります。")

with st.expander("Q3: StreamlitのExpanderをどのように使いますか？"):
    st.write("Expanderを使うことで、コンテンツを折りたたんで必要に応じて展開することができます。")

サンプルコード解説

上記のコードでは、各質問に対してExpanderを使用して回答を格納しています。ユーザーは興味のある質問をクリックすることで、回答を展開して確認できます。FAQセクションのように情報を整理する際に便利です。

実用例：フォームの一部に詳細設定を配置する

フォームの一部にExpanderを用いることで、通常は非表示にしつつ必要な場合にのみ詳細設定を表示させることができます。

import streamlit as st

st.title("ユーザー登録フォーム")

st.text_input("名前")
st.text_input("メールアドレス")

with st.expander("詳細設定"):
    st.slider("通知頻度", min_value=1, max_value=10)
    st.selectbox("言語選択", ["日本語", "英語", "フランス語"])

サンプルコード解説

上記のコードでは、Expander内に通知頻度のスライダーと言語選択のドロップダウンを配置しています。詳細設定は初期状態で折りたたまれているため、フォームの基本情報部分がすっきりと見えるようになっています。

注意点

Expanderを多用すると、ユーザーがクリックする回数が増えるため、重要な情報はできるだけ最初から表示するようにすることが望ましいです。
長すぎるExpanderの内容はスクロール操作が発生するため、短い要点をまとめるか、セクション分けを検討するとよいでしょう。

まとめ

StreamlitのExpanderは、コンテンツをコンパクトにまとめ、必要な時に展開できる便利なレイアウト要素です。特にFAQや詳細設定のように、初期表示を簡潔に保ちつつ情報を提供する場面で役立ちます。