こんにちは、JS2IIUです。Streamlitを使いこなせるようになるため、Streamlit Documenationsを探索しています。Streamlitのいいところは、簡単にビジュアルを用意できることにあると思います。ビジュアルを工夫するためのレイアウト方法について詳しくみていきたいと思います。今回は、Column、カラムです。よろしくお願いします。
はじめに
StreamlitはPythonで簡単にWebアプリケーションを構築できるフレームワークであり、特にデータサイエンスや機械学習モデルの可視化に役立ちます。この「Streamlit カスタムレイアウト応用編」シリーズでは、Streamlitが提供するレイアウトコンポーネントについて、各機能の応用的な使い方や注意点を解説していきます。今回は、Columns コンポーネントに焦点を当て、複数の要素を横に並べて表示する方法を紹介します。
なお、サンプルコードでは、各カラムの位置がわかりやすいように、点線の外枠を追加しています。この点線は読みやすさを目的とした視覚補助ですので、実際のアプリには不要です。
Columnsとは？
st.columns を使用すると、複数の列（カラム）を横に並べて表示できます。これにより、画面のスペースを効率的に使うことができ、見やすいレイアウトが簡単に実現できます。
基本的な使い方
以下のコードで、3つの均等なカラムを作成し、それぞれに異なる内容を配置しています。カラムの外枠は点線で表示され、レイアウトを視覚的にわかりやすくしています。
import streamlit as st
# 3つのカラムを作成
col1, col2, col3 = st.columns(3)
# 各カラムに点線の外枠を追加して内容を配置
with col1:
st.markdown('<div style="border:1px dashed black; padding: 10px;">カラム1の内容</div>', unsafe_allow_html=True)
with col2:
st.markdown('<div style="border:1px dashed black; padding: 10px;">カラム2の内容</div>', unsafe_allow_html=True)
with col3:
st.markdown('<div style="border:1px dashed black; padding: 10px;">カラム3の内容</div>', unsafe_allow_html=True)
Columnsのパラメータについて
パラメータ
spec(int または数値のイテレート可能値)
挿入する列の数と幅を制御する。以下のいずれか：
- 列数を指定する整数。この場合、すべての列の幅は等しくなります。
- 各列の相対的な幅を指定する数値（intまたはfloat）のイテラブル。例えば、
[0.7, 0.3]: 2つのカラムを作成し、最初のカラムが使用可能なカラムの70%を占め、2番目のカラムが30%を占めます。あるいは、[1, 2, 3]: 3つのカラムを作成し、2つ目のカラムの幅を1つ目のカラムの2倍、3つ目のカラムの幅をその3倍とする。
gap (「small」、「medium」、「large」)
カラム間のギャップの大きさ。デフォルトは"small".
vertical_alignment(「top」、「center」、または 「bottom」)
カラム内のコンテンツの垂直アライメント。デフォルトは"top" .
カスタム幅のカラムを作成する例
次の例では、カラム1を一番広く、カラム2を最も狭く設定しています。
import streamlit as st
# カスタム幅のカラムを作成
col1, col2, col3 = st.columns([3, 1, 2])
# 各カラムに点線の外枠を追加して内容を配置
with col1:
st.markdown('<div style="border:1px dashed black; padding: 10px;">幅3のカラム</div>', unsafe_allow_html=True)
with col2:
st.markdown('<div style="border:1px dashed black; padding: 10px;">幅1のカラム</div>', unsafe_allow_html=True)
with col3:
st.markdown('<div style="border:1px dashed black; padding: 10px;">幅2のカラム</div>', unsafe_allow_html=True)
カラムの幅はリストで指定することで、柔軟に調整できます。合計が12に近い設定が一般的ですが、他の値も使用可能です。
カラム間のギャップ
gap パラメータでカラム間のスペースを調整できます。以下の例では、カラム間に広めのスペースを設定しています。
import streamlit as st
# カラム間のギャップを大きくする
col1, col2 = st.columns(2, gap="large")
# 各カラムに点線の外枠を追加して内容を配置
with col1:
st.markdown('<div style="border:1px dashed black; padding: 10px;">カラム1の内容</div>', unsafe_allow_html=True)
with col2:
st.markdown('<div style="border:1px dashed black; padding: 10px;">カラム2の内容</div>', unsafe_allow_html=True)
gap="small"やgap="large"の設定で、カラム間のスペースが調整され、視覚的な余白が確保されます。
実践例：ユーザーフォームの作成
Columnsを活用して、ユーザーデータ入力フォームを作成する例です。名前、メールアドレス、年齢を入力できるフォームを、3つのカラムに分けて作成しています。
import streamlit as st
# 3つのカラムを作成
col1, col2, col3 = st.columns(3)
# 各カラムに入力ウィジェットを配置し、点線の外枠を追加
with col1:
name = st.text_input("名前")
with col2:
email = st.text_input("メールアドレス")
with col3:
age = st.number_input("年齢", min_value=0, max_value=120)
# 入力内容の表示
st.write(f"名前: {name}, メール: {email}, 年齢: {age}")
このフォームは、ユーザーが一度に全ての項目にアクセスしやすく、情報を効率的に入力できるレイアウトです。
Columnsを使う上での注意点
- レスポンシブデザインの制約
Columnsはデスクトップ向けのレイアウトを前提としており、スマートフォンやタブレットではカラムが縦に並ぶことがあります。モバイルでの見え方を考慮する場合、カラム数を少なくするか、重要な情報が左から順に表示されるように工夫しましょう。 - カラム幅の調整
幅をリストで指定する際、合計が 12 に近づくよう設定するのが一般的です。幅が極端に偏ると、UIの見え方が不均衡になることがあります。 - ウィジェットの更新
Columnsで使用するウィジェットは、単一のカラムに配置するのが推奨です。複数のカラム間で同一のデータを使用する場合、意図しない挙動が起こることがあるため、データの更新方法に注意が必要です。
まとめ
今回は、StreamlitのColumnsを使って複数の要素を横に並べる方法と、その具体例や注意点について解説しました。Columnsを活用することで、ユーザーにとって見やすく、直感的なUIが構築できます。次回は、Container コンポーネントについて深掘りし、複数のウィジェットをグループ化する方法を解説していきます。
Columnsを使って効率的にスペースを活用し、視覚的にわかりやすいレイアウトを実現しましょう。
コメント