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

こんにちは、JS2IIUです。Streamlitでのコンテンツレイアウトについてシリーズ記事を投稿してきました。今回で折り返しです。よろしくお願いします。

はじめに

本記事では、StreamlitのEmptyコンポーネントについて解説します。Emptyは動的にコンテンツを更新したり、一時的にコンテンツを削除してから再表示したりするために使用できるコンポーネントです。特に、リアルタイムのフィードバックやインタラクティブなUIを作成する際に役立ちます。

Emptyの概要

st.empty()は「プレースホルダー」を作成します。これは、位置だけが指定されたコンテンツのないコンテナです。後から内容を設定でき、動的に表示内容を変える場合に使用します。

Emptyの基本的な使い方

以下に、Emptyを使った動的な表示のサンプルコードを示します。ユーザーがボタンをクリックすると、Emptyの中身が順番に更新され、メッセージが表示される仕組みです。

import streamlit as st
import time

# 空のプレースホルダーを作成
placeholder = st.empty()

# ボタンを表示
if st.button("メッセージを表示"):
    # プレースホルダーにメッセージを順に表示
    placeholder.write("こんにちは！最初のメッセージです。")
    time.sleep(2)
    placeholder.write("これは2番目のメッセージです。")
    time.sleep(2)
    placeholder.write("最後のメッセージです。")

コードの説明

1. placeholder = st.empty()：空のプレースホルダーを作成し、変数placeholderに代入します。
2. if st.button("メッセージを表示")：ボタンがクリックされると、if文の中が実行されます。
3. placeholder.write(...)：プレースホルダーの内容を変更します。writeメソッドを使って、順に異なるメッセージを表示します。
4. time.sleep(2)：2秒待機してから次のメッセージに進むためのタイマーです。このおかげで、各メッセージが順番に表示されます。

Emptyの活用例：カウントダウンタイマー

次に、カウントダウンタイマーを作成する例を示します。Emptyを使ってカウントダウンの数字を動的に更新することで、ユーザーにリアルタイムのインタラクションを提供します。

import streamlit as st
import time

# タイマーの長さ（秒数）
countdown_time = 10

# 空のプレースホルダーを作成
placeholder = st.empty()

# カウントダウンタイマー
for i in range(countdown_time, 0, -1):
    # プレースホルダーに現在のカウントを表示
    placeholder.write(f"残り時間: {i}秒")
    time.sleep(1)

# カウントダウン終了後にメッセージを表示
placeholder.write("タイマー終了！")

コードの説明

1. countdown_time = 10：カウントダウンの時間を設定します。
2. placeholder = st.empty()：Emptyコンポーネントをプレースホルダーとして作成します。
3. for i in range(countdown_time, 0, -1)：カウントダウンのループを構築し、countdown_timeから0まで1秒ごとに減少させます。
4. placeholder.write(f"残り時間: {i}秒")：プレースホルダーに残りの時間を表示します。毎回異なる値で更新され、動的に変化する表示が実現します。
5. time.sleep(1)：1秒間待機してから次の数字に進みます。
6. 最後にplaceholder.write("タイマー終了！")で、カウントダウンが終了したことを示します。

Empty使用上の注意点

• Emptyはリアルタイム更新や順次変更に向いていますが、過度に使用するとページのレンダリングが遅くなる可能性があります。
• セッションステートと組み合わせて使うと、複雑なUIフローを制御しやすくなります。

まとめ

Emptyコンポーネントは、動的な要素やリアルタイムで変化するUIを作成するための有効なツールです。Emptyの特性を理解し、インタラクティブで動きのあるアプリケーションを効率的に開発しましょう。