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

JS2IIU

1年前

こんにちは、JS2IIUです。

StreamltでDataFrameを表示する際に、画像を表示するためのst.column_config.ImageColumnを紹介します。今回もよろしくお願いします。

はじめに
st.column_config.ImageColumnとは
1. 主な用途
2. 主なパラメータ
使用例
1. 例：商品一覧に画像を表示
2. コード解説
注意点
まとめ

はじめに

st.column_config.ImageColumnは、Streamlitアプリ内のデータフレームに画像データを直接表示するための便利なクラスです。これを使うことで、製品や人物の画像など、視覚情報をデータと連携させたインタラクティブなUIを構築できます。

本記事では、ImageColumnの基本的な使い方、具体例、そして応用例を詳しく解説します。

st.column_config.ImageColumnとは

ImageColumnは、データフレームのセル内に画像を表示するためのStreamlitのカスタム列クラスです。この機能により、データに関連付けられた画像を直感的に確認できるインターフェイスを提供します。

主な用途

商品画像の表示：オンラインカタログや商品リストの作成に最適です。
人物情報の管理：社員リストやチームメンバーの顔写真付きデータ。
データと画像の連携：分析結果や可視化データを画像としてデータフレームに組み込みます。

主なパラメータ

label：列名を指定します。
help：列の用途や補足情報を記載する説明文を指定します。
width：画像の幅を“small”, “medium”, “large”, or Noneで指定します。

使用例

以下では、製品リストとそのサムネイル画像を表示する方法を示します。

例：商品一覧に画像を表示

import streamlit as st
import pandas as pd
from streamlit.column_config import ImageColumn

# データフレームを作成
data = {
    "Product": ["Laptop", "Smartphone", "Headphones"],
    "Thumbnail": [
        "https://placehold.jp/24/0000ff/ffffff/180x80.png?text=Laptop",
        "https://placehold.jp/24/0000ff/ffffff/180x80.png?text=Smartphone",
        "https://placehold.jp/24/0000ff/ffffff/180x80.png?text=Headphones"
    ]
}
df = pd.DataFrame(data)

# ImageColumnで列をカスタマイズ
column_config = {
    "Thumbnail": ImageColumn(
        label="製品サムネイル",
        help="各製品のサムネイル画像を表示します。",
        width="medium"
    )
}

# データフレームを表示
st.dataframe(df, column_config=column_config)

コード解説

データ作成
- 製品名（Product）とそのサムネイル画像URL（Thumbnail）をデータフレームに格納。

ImageColumnの設定
- label：列名として「製品サムネイル」を指定。
- help：ツールチップとして「各製品のサムネイル画像を表示します」を追加。
- width：画像の表示幅を"medium"に設定。

データフレーム表示
- 各製品に対応する画像がクリック可能なサムネイル形式で表示されます。

サンプルで使った画像はこちらのサイトを活用しています。

placehold.jp | 簡単！ダミー画像作成

簡単！ダミー画像生成、モックアップ用画像作成ツール。文字やサイズ、メモを入れた仮の画像を簡単に作成できます。

注意点

画像データの形式
- 画像データはURL形式または画像バイナリ形式が必要です。不適切な形式では正しく表示されません。
画像サイズの最適化
- 必要に応じてwidthパラメータを調整し、画像の見やすさを向上させましょう。
リンクの有効性
- 外部URLを使用する場合はリンクが有効であることを事前に確認してください。
Streamlitの公式ウェブサイトには以下のようにかかれています。

セルの値は以下のいずれかである必要があります：

画像を取得するURL。これは、静的ファイルサービングによって配置された画像の相対URLでもかまいません。公開URLから利用できない場合は、任意のローカル画像を使うことはできないことに注意してください。
data:image/svg+xml;utf8,のようなSVG XMLを含むデータURL。
data:image/png;base64,iVBO…のようにBase64エンコードされた画像を含むデータURL。
画像カラムは今のところ編集できない。このコマンドはst.dataframeまたはst.data_editorのcolumn_configパラメータで使用する必要があります。