サイトアイコン アマチュア無線局JS2IIU

Streamlit カスタムレイアウト応用編：第3回 Modal Dialog

JS2IIU

こんにちは、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を使ってシンプルなモーダルダイアログを表示しています。ユーザーがボタンをクリックすると、ダイアログが表示され、再び「閉じる」ボタンを押すとダイアログが閉じます。

https://js2iiu.com/wp-content/uploads/2024/11/sl_03_01.mov

コード説明

このコードは、Streamlitを使って「挨拶のメッセージ」をユーザーから入力させ、挨拶の内容をモーダルダイアログで表示するサンプルです。以下に、コードの構造と各部分の機能を解説します。

1. コードの概要

コードでは以下の2つの主要な要素が含まれています。

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.session_stateの条件付きチェック
if 'yourgreet' not in st.session_state:
    st.write('こんにちは')
    if st.button('挨拶する'):
        greeting()
else:
    f'あなたの挨拶の言葉： {st.session_state.yourgreet["greet"]}'

3. 全体の流れ

  1. 初回のページ読み込み時には、st.session_stateに挨拶文がないため、デフォルトの挨拶と「挨拶する」ボタンが表示されます。
  2. 「挨拶する」ボタンをクリックすると、greeting()関数が呼ばれ、モーダルダイアログが開きます。
  3. ユーザーが挨拶文を入力し、「Submit」をクリックすると、挨拶文がst.session_stateに保存され、ページが再実行されます。
  4. 再実行後は、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を使用してダイアログの状態を管理しています。「設定を変更する」ボタンをクリックすると確認ダイアログが表示され、ユーザーが「はい」または「いいえ」をクリックすることで設定変更を確定またはキャンセルできます。

https://js2iiu.com/wp-content/uploads/2024/11/sl_03_02.mov

コード全体の流れ

  1. 設定変更ボタンのクリックで、ダイアログ表示のトリガーを管理
  2. モーダルダイアログの関数化による簡潔なコード
  3. ユーザーの選択によって、設定を変更するかどうかを判定し、適切にダイアログを閉じる

各コード部分の詳細な解説

ライブラリのインポート

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.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フラグで管理されます。

このコードのポイント

  1. @st.dialogデコレーターの活用：モーダルダイアログが簡潔に定義でき、関数化することで再利用が可能です。
  2. st.session_stateによる状態管理：ダイアログの表示状態を保持し、ページ再読み込みの際にも状態が持続します。
  3. カラムを使ったボタンのレイアウト：ボタンを横並びに配置して、視覚的に選択肢をわかりやすくしています。

この構造により、ユーザーが設定を変更したい場合のみダイアログが表示され、操作の流れがシンプルでわかりやすいUIとなっています。

Modal Dialogを利用する際の注意点

モーダルダイアログは便利ですが、適切に利用することが重要です。多用するとユーザーが煩わしさを感じる可能性があるため、重要な場面でのみ利用しましょう。また、複雑なフォーム入力や長いメッセージ表示には向かない場合があります。

まとめ

今回は、Streamlitのst.dialogを使ってモーダルダイアログを実装する方法を紹介しました。モーダルダイアログは、確認メッセージや重要な情報の表示に適しており、アプリの操作性を高めるために役立ちます。次回は、Emptyレイアウトについて解説します。

モバイルバージョンを終了