こんにちは、JS2IIUです。
StreamlitでDataFrameを表示する際に時刻を入力しやすくするst.column_config.DateColumnについて紹介します。今回もよろしくお願いします。

はじめに
st.column_config.TimeColumnは、Streamlitのst.dataframe, st.data_editorで「時刻」データを効率的に表示・操作するためのクラスです。これを使うと、データフレーム内の時刻情報を統一されたフォーマットで簡単に扱うことができ、視覚的にもわかりやすい表現が可能になります。
本記事では、st.column_config.TimeColumnの基本的な使い方、主なオプション、実用例を詳しく解説します。
st.column_config.TimeColumnとは
st.column_config.TimeColumnは、データフレーム内の特定の列を時刻データとして表示・操作するためのカスタム列設定クラスです。このクラスを利用することで、フォーマットの統一やツールチップの追加など、柔軟なカスタマイズが可能になります。
主な用途
- 時刻データの表示: スケジュールや営業時間の管理。
- データのフィルタリング: 指定した時間帯のデータを抽出。
- フォーマットの統一: 見やすい時刻表示を提供。
主なオプションと説明
| パラメータ | 説明 |
|---|---|
label | 列名(データフレーム表示時に使用される名前)。 |
help | 列に関する説明文(ツールチップとして表示)。 |
format | 時刻の表示フォーマット。Moment.jsのフォーマットに従って下さい。 |
disabled | この列を編集不可にするかどうか(デフォルトはFalse)。 |
required | 入力必須かどうか(デフォルトはFalse)。 |
default | デフォルト値として表示される時刻。 |
min_value | 設定可能な最小時刻。 |
max_value | 設定可能な最大時刻。 |
step | 時刻の増分を指定(例: step=30で30分単位の操作が可能)。 |
Moment.js | Docs
実用例:カフェの営業時間管理
以下の例では、カフェの各店舗の営業時間をTimeColumnを使って表示します。
サンプルコード
import streamlit as st
import pandas as pd
from streamlit.column_config import TimeColumn
# データフレームを作成
data = {
"Branch": ["Central", "West", "East"],
"Opening Time": ["08:30:00", "09:00:00", "07:45:00"],
"Closing Time": ["20:00:00", "18:30:00", "21:15:00"]
}
df = pd.DataFrame(data)
# 時刻データを変換
df["Opening Time"] = pd.to_datetime(df["Opening Time"]).dt.time
df["Closing Time"] = pd.to_datetime(df["Closing Time"]).dt.time
# TimeColumnで列をカスタマイズ
column_config = {
"Opening Time": TimeColumn(
label="開店時間",
help="店舗の開店時刻",
format="%H:%M" # 時刻フォーマット
),
"Closing Time": TimeColumn(
label="閉店時間",
help="店舗の閉店時刻",
format="%H:%M" # 時刻フォーマット
)
}
# データフレームを表示
st.dataframe(df, column_config=column_config)
サンプルコードの解説
- データフレーム作成:
- 各店舗の「開店時間」と「閉店時間」を含む辞書データをもとにデータフレームを作成。
pd.to_datetimeで文字列を時刻型に変換し、.dt.timeを使用してdatetime.timeオブジェクトに変換。
- TimeColumnの設定:
label:列名を分かりやすく設定。help:各列にツールチップを追加。format:24時間表記で「時:分」のフォーマットを指定。
- データフレーム表示:
column_configを使用してカスタマイズしたデータフレームを表示。
応用例:営業時間内の店舗をフィルタリング
以下は、現在営業中の店舗をフィルタリングして表示する例です。
サンプルコード
from datetime import time
import streamlit as st
import pandas as pd
from streamlit.column_config import TimeColumn
# データフレームを作成
data = {
"Branch": ["Central", "West", "East"],
"Opening Time": ["08:30:00", "09:00:00", "07:45:00"],
"Closing Time": ["20:00:00", "18:30:00", "21:15:00"]
}
df = pd.DataFrame(data)
# 時刻データを変換
df["Opening Time"] = pd.to_datetime(df["Opening Time"]).dt.time
df["Closing Time"] = pd.to_datetime(df["Closing Time"]).dt.time
# TimeColumnで列をカスタマイズ
column_config = {
"Opening Time": TimeColumn(
label="開店時間",
help="店舗の開店時刻",
format="HH:mm" # 時刻フォーマット
),
"Closing Time": TimeColumn(
label="閉店時間",
help="店舗の閉店時刻",
format="HH:mm" # 時刻フォーマット
)
}
# データフレームを表示
st.data_editor(df, column_config=column_config)
# 現在時刻を指定
current_time = time(19, 0)
# 営業中の店舗をフィルタリング
open_stores = df[
(df["Opening Time"] <= current_time) & (df["Closing Time"] > current_time)
]
# 営業中の店舗を表示
st.write("現在営業中の店舗:")
st.dataframe(open_stores)

サンプルコードの解説
- 現在時刻の設定:
datetime.timeを使って現在時刻を指定(例では19:00を指定)。
- 条件付きフィルタリング:
- 開店時刻が現在時刻以下、かつ閉店時刻が現在時刻より後の店舗を抽出。
- 結果の表示:
- 営業中の店舗をデータフレーム形式で表示。
注意点
- 時刻データ型の確認:
- 列のデータ型が
datetime.timeである必要があります。 - 文字列データは事前に
pd.to_datetimeと.dt.timeで変換してください。
- 列のデータ型が
- フォーマット指定の正確性:
formatオプションでは、Pythonのstrftime形式を使用してください。形式が間違っているとエラーになります。
まとめ
st.column_config.TimeColumnは、時刻データを扱うデータフレームを直感的にカスタマイズする強力なツールです。スケジュール管理や営業時間の確認に役立ちます。次回の記事では、st.column_config.ListColumnについて詳しく解説します。どうぞお楽しみに!
公式ドキュメント: st.column_config.TimeColumn
最後まで読んでいただきありがとうございます。73



コメント