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

Streamlit応用編 第2回: インタラクティブなウィジェットの応用

JS2IIU

こんにちは、JS2IIUです。

11日連続投稿チャレンジの2日目です。今のところまだチャレンジ継続できています。今回もよろしくお願いします。

はじめに

第2回目の今回は、Streamlitのインタラクティブなウィジェット機能をさらに活用し、フォームの作成と管理、および動的なUI要素の生成について解説します。これらの機能を駆使することで、ユーザーにとってより直感的で応答性の高いアプリケーションを構築できます。

フォームの作成と管理

Streamlitでは、st.formを使用して複数の入力をまとめて処理することが可能です。フォームを作成することで、複数の入力を一括で送信し、データの整合性を保ちながら処理できます。

こちらに示す以外のウィジェットについてはStreamlit本家のドキュメントを参照してください。

Input widgets - Streamlit Docs
docs.streamlit.io

基本的なフォームの例

次の例では、ユーザーから名前と年齢を入力してもらい、それを一度に送信するシンプルなフォームを作成します。

import streamlit as st

# フォームの作成
with st.form("my_form"):
    name = st.text_input("名前を入力してください")
    age = st.number_input("年齢を入力してください", min_value=0, max_value=120)

    # 送信ボタン
    submitted = st.form_submit_button("送信")

# フォームが送信された後の処理
if submitted:
    st.write(f"こんにちは、{name}さん。あなたは{age}歳です。")

このコードでは、st.formブロック内に複数のウィジェットを定義し、st.form_submit_buttonを押すことで一度にデータを送信します。これにより、ユーザーは必要な情報をまとめて入力し、処理を効率的に行うことができます。

フォームの応用: 複数のセクションを持つフォーム

もう少し複雑な例として、複数のセクションを持つフォームを作成してみましょう。

import streamlit as st

# 複数セクションを持つフォーム
with st.form("detailed_form"):
    # 基本情報セクション
    st.header("基本情報")
    name = st.text_input("名前を入力してください")
    age = st.number_input("年齢を入力してください", min_value=0, max_value=120)

    # 連絡先情報セクション
    st.header("連絡先情報")
    email = st.text_input("メールアドレスを入力してください")
    phone = st.text_input("電話番号を入力してください")

    # 送信ボタン
    submitted = st.form_submit_button("送信")

if submitted:
    st.write(f"こんにちは、{name}さん。あなたは{age}歳です。")
    st.write(f"連絡先情報: {email}, {phone}")

この例では、フォーム内にセクションを設け、異なる種類の情報を整理して入力できるようにしています。このようにフォームをセクション化することで、ユーザーはより直感的にデータを入力できます。

動的なUI要素の生成

次に、Streamlitの強力な機能である動的なUI要素の生成について解説します。動的なUI要素を利用することで、ユーザーの入力に応じて画面のコンテンツを変化させることができます。

基本的な動的UIの例

次の例では、ユーザーが選択したオプションに応じて、表示されるコンテンツが変化します。

import streamlit as st

# 選択オプション
option = st.selectbox(
    "表示する内容を選んでください",
    ("テキスト", "画像", "データフレーム")
)

# 動的にコンテンツを表示
if option == "テキスト":
    st.write("これはテキストです。")
elif option == "画像":
    st.image("https://example.com/sample.jpg")
elif option == "データフレーム":
    import pandas as pd
    df = pd.DataFrame({
        "列1": [1, 2, 3],
        "列2": ["A", "B", "C"]
    })
    st.write(df)

このコードでは、ユーザーがドロップダウンメニューでオプションを選択すると、その選択に応じたコンテンツが動的に表示されます。st.imageのリンクを適宜書き換えて試してみてください！こちらの例はデータフレームを表示させた時の様子です。

条件に応じたコンテンツ表示

次に、条件に応じてコンテンツを表示する方法を紹介します。例えば、ユーザーが特定の条件を満たした場合にのみ、追加の入力フィールドを表示するケースです。

import streamlit as st

# 年齢の入力
age = st.number_input("年齢を入力してください", min_value=0, max_value=120)

# 条件に応じた動的UI
if age >= 18:
    st.write("あなたは成人です。")
    st.text_input("運転免許証の番号を入力してください")
else:
    st.write("未成年のため、追加情報は必要ありません。")

この例では、ユーザーが18歳以上の場合にのみ、運転免許証の入力フィールドが表示されます。こうした動的なUI要素を利用することで、ユーザーに応じたカスタマイズされた体験を提供できます。

まとめ

第2回目では、Streamlitのインタラクティブなウィジェットを活用し、フォームの作成と管理、動的なUI要素の生成について学びました。これにより、ユーザーの入力に対して柔軟に対応するアプリケーションを構築することが可能です。

次回は、データのアップロードとダウンロードについて解説します。ファイルのアップロード、処理結果のダウンロード方法について、具体的な例を交えて説明しますので、ぜひご期待ください。

最後まで読んでいただきありがとうございました。73

補足：Streamlit応用編　記事リスト

Streamlit応用編 第1回: キャッシュ機能の活用
https://js2iiu.com/2024/08/28/streamlit-01-cache/

Streamlit応用編 第2回: インタラクティブなウィジェットの応用
https://js2iiu.com/2024/08/29/streamlit-02-widget/

Streamlit応用編 第3回: データのアップロードとダウンロード
https://js2iiu.com/2024/08/29/streamlit-03-download/

Streamlit応用編 第4回: レイアウトのカスタマイズ
https://js2iiu.com/2024/08/30/streamlit-04-layout/

Streamlit応用編 第5回: テーマのカスタマイズ
https://js2iiu.com/2024/08/31/streamlit-05-theme-custom/

Streamlit応用編 第6回: デプロイと共有
https://js2iiu.com/2024/09/01/streamlit-06-deploy/

Streamlit応用編 第7回: 認証とセキュリティ
https://js2iiu.com/2024/09/02/streamlit-07-security/

Streamlit応用編 第8回: データベースとの連携
https://js2iiu.com/2024/09/02/streamlit-08-database/

Streamlit応用編 第9回: 複雑なデータビジュアライゼーション
https://js2iiu.com/2024/09/05/streamlit-09-visualization/

Streamlit応用編 第10回: マルチページアプリの作成
https://js2iiu.com/2024/09/06/streamlit-10-multipage/

Streamlit応用編 第11回: StreamlitでAPIを作成する方法
https://js2iiu.com/2024/09/07/streamlit-11-api/

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