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

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

JS2IIU

こんにちは、JS2IIUです。Streamlitでのレイアウトに関する連続シリーズです。よろしくお願いします。

はじめに

今回のテーマは「Container」です。st.containerを使うと、UIレイアウトに柔軟性を持たせ、コンテンツをグループ化して管理できます。今回は、Containerの基本的な使い方やパラメータ、具体的なコード例を解説し、境界線が視覚的にわかるように表示する方法も紹介します。

1. StreamlitのContainerとは？

StreamlitのContainerは、内部にウィジェットやデータの表示をまとめてグループ化できるレイアウトコンポーネントです。これにより、複数のフォームやグラフを整理して表示し、ユーザーに視覚的なまとまりを提供できます。

基本構文

Python
import streamlit as st

# Containerの使用例
with st.container():
    st.write("1 This is inside the container. Hello, Streamlit!")
    st.write("2 This is inside the container. Hello, Streamlit!")
st.write("This is outside the container.")

流石にこれではコンテナの内側なのか、外側なのかわからないですね。少し工夫してみます。CSSを追加して、境界線に点線を入れてみます。

Python
import streamlit as st

# Containerに点線の境界線を表示するためのCSS
st.markdown("""
    <style>
    .custom-container {
        border: 2px dashed #6c757d;
        padding: 10px;
        margin: 10px 0;
    }
    </style>
    """, unsafe_allow_html=True)

# Containerの使用例
with st.container():
    st.markdown('<div class="custom-container">', unsafe_allow_html=True)
    st.write("This is inside the container with a dotted border.")
    st.markdown('</div>', unsafe_allow_html=True)

st.write("This is outside the container.")

残念なことに、期待と異なる結果でした。なぜ、コンテナの境界に点線が描かれなかったのでしょうか。

このコードでは、st.containerとHTMLの<div class="custom-container">の使用方法の違いが原因で、文字列が意図した点線の枠内に表示されない問題が発生しています。Streamlitでst.container()を使用する場合、そのコンテナはPythonコード上での論理的なグループとして機能するだけであり、実際のHTML要素としては適用されません。

具体的には、st.markdownでCSSを適用する際、<div class="custom-container">の範囲内にst.writeを挿入しても、Streamlitが独自に要素を再構成するため、st.writeの内容が<div>の外側に表示されてしまうことがあるのです。

2. Containerの主なパラメータと使い方

パラメータ

height(int または None)

コンテナの高さをピクセル単位で指定します。None（デフォルト）の場合、コンテナはコンテンツに合わせて大きくなる。高さが固定されている場合、大きなコンテンツに対してスクロールが有効になり、コンテナの周囲に灰色の境界線が表示され、スクロールサーフェスとアプリの残りの部分が視覚的に分離されます。

注意

スクロール付きのコンテナは控えめに使用してください。使用する場合は、高さを小さく（500ピクセル以下）するようにしてください。そうしないと、モバイル・デバイスでは、コンテナのスクロール面が画面の大部分を覆ってしまい、アプリの残りの部分をスクロールするのが難しくなります。

border(bool または None)

コンテナの周囲にボーダーを表示するかどうか。None (デフォルト) の場合、コンテナの高さが固定されている場合に枠線が表示され、そうでない場合は表示されません。

key(str または None)

このコンテナに安定したアイデンティティを与えるためのオプションの文字列。

さらに、「key」 を指定すると、「st-key-」 をプレフィックスとする CSS クラス名として使用されます。

st.container - Streamlit Docs
st.container inserts a multi-element container that can arrange its contents vertically or horizontally.
docs.streamlit.io

あれ、ちょっと待って下さい。borderというパラメータがあります。これを使ってみます。

Python
import streamlit as st

# Containerの使用例
with st.container(border=True):
    st.write("1 This is inside the container. Hello, Streamlit!")
    st.write("2 This is inside the container. Hello, Streamlit!")
st.write("This is outside the container.")

簡単にContainerの境界線が引けてしまいました。

3. 使用例

Containerの具体的な使用方法を確認してみましょう。以下に、Container内に点線の枠を表示しながら、複数のウィジェットをグループ化する例を示します。

例1: フォーム入力をグループ化

Python
import streamlit as st

st.title("ユーザー情報入力")

# Containerを使用してフォームをまとめる
with st.container(border=True):
    st.header("基本情報")
    name = st.text_input("名前を入力してください")
    age = st.number_input("年齢を入力してください", min_value=0, max_value=100, step=1)

# 個別にウィジェットを配置する
st.write("追加の情報")
email = st.text_input("メールアドレスを入力してください")

# コンテナ内のウィジェットを表示する
if name and age:
    st.write(f"名前: {name}")
    st.write(f"年齢: {age}")
if email:
    st.write(f"メールアドレス: {email}")

この例では、名前と年齢の入力欄がContainerでグループ化され、点線の枠で囲まれています。メールアドレスは別のセクションに配置し、基本情報と追加情報を視覚的に区別しています。

例2: グラフと説明文をグループ化

Python
import streamlit as st
import pandas as pd
import numpy as np

# データの生成
data = pd.DataFrame(np.random.randn(10, 3), columns=["A", "B", "C"])

# Containerを使ってグラフと説明をまとめる
with st.container(border=True):
    st.write("## グラフ")
    st.line_chart(data)
    st.write("このグラフはランダムなデータをプロットしています。列A、B、Cそれぞれの変動を観察できます。")

こちらの例では、Container内にグラフと説明文を含め、枠で囲むことで視覚的なまとまりを強調しています。

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

4. Containerを使う際の注意点

Containerを使う際の注意点は以下のとおりです。

まとめ

StreamlitのContainerを使うことで、UIを整理しやすく、関連するコンテンツをまとめて表示することができます。今回のCSSを使った点線枠の追加によって、Containerの境界を視覚的に明確にし、ユーザーにとっても開発者にとってもわかりやすいレイアウトが実現できました。

最後に、書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。ぜひ手に取ってみてください。

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

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