【Streamlit】st.column_config.TimeColumnの基本と使い方

JS2IIU

1年前

こんにちは、JS2IIUです。

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

はじめに
st.column_config.TimeColumnとは
1. 主な用途
主なオプションと説明
実用例：カフェの営業時間管理
1. サンプルコード
2. サンプルコードの解説
応用例：営業時間内の店舗をフィルタリング
1. サンプルコード
2. サンプルコードの解説
注意点
まとめ

はじめに

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"] &lt;= current_time) &amp; (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