こんにちは、JS2IIUです。Streamlitでツールチップのような表示ができるPopoverについて説明していきます。よろしくお願いします。
はじめに
今回は、StreamlitのPopover機能について紹介します。Popoverは一時的にユーザーに追加情報や詳細を提示するのに役立ちます。これを使用すると、ユーザーが特定の情報に興味を持ったときだけその内容を表示し、ページ全体をすっきりと保つことができます。
Popoverとは？
Popoverは、通常は非表示ですが、ユーザーが特定の操作を行うと（ボタンのクリックなど）ポップアップの形で詳細情報が表示されるUIコンポーネントです。StreamlitにおけるPopoverは、ツールチップや追加の説明を一時的に表示するために活用されます。
Popoverの基本的な使い方
StreamlitでPopoverを実現するためには、カスタムのモーダルやポップアップを作成する方法が必要になります。Popoverのような動作は標準ではないため、st.expanderやst.button、st.markdownを組み合わせて作成します。
st.popoverのパラメータ
label(str)
ポップオーバーコンテナを開くボタンのラベル。ラベルにはオプションで以下のタイプのGitHub風味のMarkdownを含めることができます： 太字、斜体、取り消し線、インラインコード、リンク、画像。画像はアイコンのように表示され、最大高さはフォントの高さと同じです。
サポートされていないMarkdown要素はアンラップされ、子要素（テキスト・コンテンツ）のみが表示されます。サポートされていない要素をバックスラッシュ・エスケープすることで、リテラル文字として表示します。例: `”1. Not an ordered list”`.
サポートされているその他のMarkdownディレクティブについては `st.markdown` の `body` パラメータを参照すること。
help(str)
ポップオーバーボタンがマウスオーバーされたときに表示されるオプションのツールチップ。
icon(str)
ボタンラベルの隣に表示される絵文字またはアイコンを指定します。もし `None` (デフォルト) なら、アイコンは表示されません。icon` が文字列の場合、以下のオプションが有効である：
- 一文字の絵文字。例えば、
icon="😄"またはicon="😱"とすることができる。絵文字のショートコードはサポートされていません。 - Material Symbolsライブラリ(丸みを帯びたスタイル)のアイコンで、
":material/icon_name:"の形式で指定します。「icon_name」はスネークケースのアイコンの名前です。 - 例えば、
icon=":material/thumb_up:"はサムアップアイコンを表示します。Material Symbols フォントライブラリからその他のアイコンを検索できます。
disabled(bool)
オプションのブール値で、Trueに設定するとポップオーバーボタンを無効にします。デフォルトは False です。
use_container_width(bool)
ボタンの幅を親コンテナいっぱいに拡大するかどうか。use_container_width が False (デフォルト) の場合、Streamlit はボタンの内容に合わせてサイズを調整する。use_container_width が True の場合、ボタンの幅は親コンテナと同じになる。
どちらの場合も、ボタンの内容が親コンテナより広い場合、内容は折り返されます。
ポップオーバーコンテナの最小幅はボタンの幅と一致します。ポップオーバーコンテナの幅は、コンテナの内容に合わせてボタンよりも広くすることができます。
Popoverのコード例
以下は、特定のボタンをクリックした際にポップアップのように説明が表示されるシンプルな例です。
import streamlit as st
with st.popover("詳しい質問なこちらです"):
st.markdown("出身地を教えて下さい")
org = st.text_input("Where are you from?")
st.write("あなたの出身地は：", org)
コード解説
with st.popover("詳しい質問はこちらです")：ここで st.popover は、実際にはまだStreamlitに実装されていない関数ですが、このコードでは仮想的にポップオーバーの動作をシミュレートしています。”詳しい質問はこちらです” は、ポップオーバーのトリガーテキストとして設定される想定です。st.markdown("出身地を教えて下さい")：ポップオーバー内に表示される質問のメッセージです。org = st.text_input("Where are you from?")：ユーザーが出身地を入力するテキスト入力フィールドです。入力された値は org という変数に格納されます。st.write("あなたの出身地は：", org)：最後に、入力された出身地を「あなたの出身地は：」というテキストと共に画面に表示します。
Popoverの応用例
さらに実用的なPopoverのような動作を実現するには、st.expanderやst.dialogを活用できます。ここでは、st.expanderを使って、詳細を表示したいときだけ内容が展開されるようにしてみましょう。
import streamlit as st
st.title("Streamlit Popover応用例")
# ExpanderによるPopoverの代替
with st.expander("詳細情報を見る"):
st.write("ここに詳細情報が表示されます。ユーザーが必要なときだけ展開されます。")
st.image("https://js2iiu.com/wp-content/uploads/2024/11/M9Zl6tgb_400x400.jpg", caption="サンプル画像")
st.write("""
この機能はPopoverの代替として使用でき、ユーザーの画面に煩雑さを与えません。
必要に応じて詳細情報や画像、他の要素を追加できます。
""")
コード解説
st.expander("詳細情報を見る")：エクスパンダーを利用することで、クリック時に詳細が展開される動作を作成しています。st.write()およびst.image()：展開後のコンテンツに文字情報や画像を含めることで、ユーザーにさらに充実した情報を提供できます。
st.expanderについて詳しくはこちらの記事を参照して下さい。
注意点
- 表示の過度な分散：PopoverやExpanderを多用すると、画面が散漫になり、ユーザーが必要な情報をすぐに見つけられなくなる可能性があります。
- パフォーマンス：表示要素が多いと、パフォーマンスに影響を与える可能性があるため、必要な場面のみで使用するよう心がけましょう。
Popoverのようなインターフェースはユーザー体験を向上させるために重要な要素です。上記のようにst.expanderやst.buttonを駆使することで、StreamlitのUIを柔軟にカスタマイズできます。