こんにちは、JS2IIUです。今回はStreamlitのレイアウトで使えるmodal Dialogを紹介していきます。Modal Dialogで洗練されたUI制御が可能になります。今回もよろしくお願いします。
はじめに
この記事では、Streamlitのst.dialog機能を使って、Modal Dialog（モーダルダイアログ）を実装する方法を解説します。モーダルダイアログはユーザーに重要なメッセージを表示するのに適しており、アプリのインタラクティブ性を高めるために活用できます。以下の内容をもとに、st.dialogの使い方や注意点を詳しく見ていきましょう。
Modal Dialogとは？
モーダルダイアログとは、アプリの他の部分が操作できない状態で、ユーザーにメッセージやインターフェースを表示するためのポップアップウィンドウです。st.dialogを使うことで、確認メッセージや警告の表示、入力フォームの提供などが簡単に実現できます。
st.dialogの基本的な使い方
Streamlitのst.dialogは、指定したコンテンツをダイアログとして表示するために使用します。st.dialogを使うことで、短いコードでカスタムモーダルを作成できます。以下に基本的な使い方を示します。
コード例：基本的なModal Dialogの表示
import streamlit as st
@st.dialog('hello')
def greeting():
st.write('挨拶してください')
greet = st.text_input('挨拶文')
if st.button('Submit'):
st.session_state.yourgreet = {'greet': greet}
st.rerun()
if 'yourgreet' not in st.session_state:
st.write('こんにちは')
if st.button('挨拶する'):
greeting()
else:
f'あなたの挨拶の言葉： {st.session_state.yourgreet["greet"]}'
この例では、st.dialogを使ってシンプルなモーダルダイアログを表示しています。ユーザーがボタンをクリックすると、ダイアログが表示され、再び「閉じる」ボタンを押すとダイアログが閉じます。
コード説明
このコードは、Streamlitを使って「挨拶のメッセージ」をユーザーから入力させ、挨拶の内容をモーダルダイアログで表示するサンプルです。以下に、コードの構造と各部分の機能を解説します。
1. コードの概要
コードでは以下の2つの主要な要素が含まれています。
@st.dialogデコレーターで囲まれたgreeting()関数: モーダルダイアログを通じてユーザーに挨拶文を入力させる役割があります。st.session_stateの使用: 挨拶の内容を保持し、ページの再読み込み後もユーザーの入力が残るようにしています。
2. 各コードの部分の解説
インポート
import streamlit as st
Streamlitライブラリをインポートします。これにより、StreamlitのさまざまなUIコンポーネント（ボタン、テキスト入力など）が利用できるようになります。
モーダルダイアログ関数の定義
@st.dialog('hello')
def greeting():
st.write('挨拶してください')
greet = st.text_input('挨拶文')
if st.button('Submit'):
st.session_state.yourgreet = {'greet': greet}
st.rerun()
@st.dialog('hello')は、greeting関数をモーダルダイアログとしてラップします。このダイアログはタイトルをhelloとし、関数内の処理がダイアログ内で実行されます。st.write('挨拶してください')はモーダル内に「挨拶してください」というテキストを表示します。st.text_input('挨拶文')は、ユーザーに挨拶文を入力させるテキスト入力フィールドを表示します。if st.button('Submit')で「Submit」ボタンがクリックされると、入力された挨拶文がst.session_stateに保存され、st.rerun()が実行されます。st.rerun()によりページが再実行され、変更が反映されます。
st.session_stateの条件付きチェック
if 'yourgreet' not in st.session_state:
st.write('こんにちは')
if st.button('挨拶する'):
greeting()
else:
f'あなたの挨拶の言葉： {st.session_state.yourgreet["greet"]}'
if 'yourgreet' not in st.session_state: 初回のページ読み込み時に挨拶がまだ入力されていない場合に実行される処理です。st.write('こんにちは'): 「こんにちは」というデフォルトの挨拶を表示します。if st.button('挨拶する'): 「挨拶する」ボタンを表示します。このボタンが押されると、greeting()が呼ばれ、モーダルダイアログが表示されます。else部分:st.session_stateに挨拶文が既に保存されている場合の処理です。f'あなたの挨拶の言葉： {st.session_state.yourgreet["greet"]}': 保存された挨拶文が表示されます。これにより、ユーザーが入力した内容を再表示する形になっています。
3. 全体の流れ
- 初回のページ読み込み時には、
st.session_stateに挨拶文がないため、デフォルトの挨拶と「挨拶する」ボタンが表示されます。 - 「挨拶する」ボタンをクリックすると、
greeting()関数が呼ばれ、モーダルダイアログが開きます。 - ユーザーが挨拶文を入力し、「Submit」をクリックすると、挨拶文が
st.session_stateに保存され、ページが再実行されます。 - 再実行後は、
st.session_stateに挨拶文が存在するため、ユーザーの挨拶文が画面に表示されます。
このように、st.dialogとst.session_stateを活用して、モーダルダイアログを使ったユーザー入力の管理が行われています。
Modal Dialogのパラメータと詳細設定
st.dialogには、ダイアログの外観や挙動を調整するための様々なオプションを指定できます。たとえば、幅や背景色を変更したり、ボタンの配置を工夫したりすることで、ユーザーにとって見やすくわかりやすいモーダルを作成できます。
パラメータ
title(str)
モーダルダイアログの上部に表示するタイトル。空にはできません。
width (「small」, 「large」)
モーダルダイアログの幅。width が small（デフォルト）の場合、モーダルダイアログの幅は 500 ピクセルになります。width が large の場合、モーダルダイアログの幅は約 750 ピクセルになります。
Modal Dialogの実用例
次の例では、モーダルダイアログを使ってユーザーに確認を求めるインターフェースを構築します。たとえば、ユーザーが設定を変更しようとしたときに「本当に変更しますか？」という確認メッセージを表示する場合に役立ちます。
コード例 ：確認メッセージとしてのModal Dialogの利用
import streamlit as st
# モーダルダイアログの関数を定義
@st.dialog("確認")
def confirmation_dialog():
st.write("本当に設定を変更しますか？")
# 「はい」「いいえ」の選択肢を2つのカラムで表示
col1, col2 = st.columns(2)
with col1:
if st.button("はい"):
st.write("設定が変更されました。")
st.session_state.show_dialog = False # ダイアログを閉じる
with col2:
if st.button("いいえ"):
st.session_state.show_dialog = False # ダイアログを閉じる
# ダイアログ表示用のフラグをセッションステートで管理
if "show_dialog" not in st.session_state:
st.session_state.show_dialog = False
# 設定変更ボタン
if st.button("設定を変更する"):
st.session_state.show_dialog = True
# モーダルダイアログの表示
if st.session_state.show_dialog:
confirmation_dialog() # 関数を呼び出してダイアログを表示
この例では、st.session_stateを使用してダイアログの状態を管理しています。「設定を変更する」ボタンをクリックすると確認ダイアログが表示され、ユーザーが「はい」または「いいえ」をクリックすることで設定変更を確定またはキャンセルできます。
コード全体の流れ
- 設定変更ボタンのクリックで、ダイアログ表示のトリガーを管理
- モーダルダイアログの関数化による簡潔なコード
- ユーザーの選択によって、設定を変更するかどうかを判定し、適切にダイアログを閉じる
各コード部分の詳細な解説
ライブラリのインポート
import streamlit as st
streamlitライブラリをインポートし、Streamlitの機能を使えるようにします。
モーダルダイアログの関数を定義
@st.dialog("確認")
def confirmation_dialog():
st.write("本当に設定を変更しますか？")
# 「はい」「いいえ」の選択肢を2つのカラムで表示
col1, col2 = st.columns(2)
with col1:
if st.button("はい"):
st.write("設定が変更されました。")
st.session_state.show_dialog = False # ダイアログを閉じる
with col2:
if st.button("いいえ"):
st.session_state.show_dialog = False # ダイアログを閉じる
@st.dialog("確認")：このデコレーターを使うことで、関数confirmation_dialogがモーダルダイアログとして表示されます。”確認”というタイトルがダイアログに付き、簡潔にモーダルダイアログを定義できます。st.write("本当に設定を変更しますか？")：モーダルダイアログ内にメッセージを表示し、ユーザーに設定変更の確認を促します。col1, col2 = st.columns(2)：Streamlitのst.columnsを使用し、ダイアログ内に「はい」と「いいえ」の2つの選択肢ボタンを横並びで表示します。- 「はい」ボタンの動作：
st.button("はい")：ユーザーが「はい」をクリックした場合、st.write("設定が変更されました。")が実行され、設定変更を示すメッセージを表示します。st.session_state.show_dialog = False：show_dialogフラグをFalseに変更し、ダイアログを閉じます。- 「いいえ」ボタンの動作：
st.button("いいえ")：ユーザーが「いいえ」をクリックすると、ダイアログが閉じるように、st.session_state.show_dialogをFalseに設定します。
ダイアログ表示用のフラグをst.session_stateで管理
if "show_dialog" not in st.session_state:
st.session_state.show_dialog = False
初回のアプリ実行時に、st.session_stateにshow_dialogが存在しない場合、Falseとして初期化します。これにより、ページの再読み込みが行われてもモーダルの表示状態が保持されます。
設定変更ボタンの表示とクリック処理
if st.button("設定を変更する"):
st.session_state.show_dialog = True
「設定を変更する」ボタンがクリックされると、st.session_state.show_dialogがTrueになり、モーダルダイアログが表示されます。
モーダルダイアログの表示
if st.session_state.show_dialog:
confirmation_dialog() # 関数を呼び出してダイアログを表示
st.session_state.show_dialogがTrueのときにconfirmation_dialog()関数を呼び出すことで、モーダルダイアログが表示されます。この設計により、ダイアログの表示・非表示がshow_dialogフラグで管理されます。
このコードのポイント
@st.dialogデコレーターの活用：モーダルダイアログが簡潔に定義でき、関数化することで再利用が可能です。st.session_stateによる状態管理：ダイアログの表示状態を保持し、ページ再読み込みの際にも状態が持続します。- カラムを使ったボタンのレイアウト：ボタンを横並びに配置して、視覚的に選択肢をわかりやすくしています。
この構造により、ユーザーが設定を変更したい場合のみダイアログが表示され、操作の流れがシンプルでわかりやすいUIとなっています。
Modal Dialogを利用する際の注意点
モーダルダイアログは便利ですが、適切に利用することが重要です。多用するとユーザーが煩わしさを感じる可能性があるため、重要な場面でのみ利用しましょう。また、複雑なフォーム入力や長いメッセージ表示には向かない場合があります。
まとめ
今回は、Streamlitのst.dialogを使ってモーダルダイアログを実装する方法を紹介しました。モーダルダイアログは、確認メッセージや重要な情報の表示に適しており、アプリの操作性を高めるために役立ちます。次回は、Emptyレイアウトについて解説します。
コメント