こんにちは、JS2IIUです。
StreamltでDataFrameを表示する際に、画像を表示するためのst.column_config.ImageColumnを紹介します。今回もよろしくお願いします。
はじめに
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"に設定。
- データフレーム表示
- 各製品に対応する画像がクリック可能なサムネイル形式で表示されます。
サンプルで使った画像はこちらのサイトを活用しています。
注意点
- 画像データの形式
- 画像データは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パラメータで使用する必要があります。
まとめ
st.column_config.ImageColumnを使用することで、視覚的に魅力的なデータフレームを作成できます。商品リストや社員情報など、画像を使ったデータ表示に便利です。ぜひ活用して、使いやすいアプリケーションを構築してください。
次回は、エリアチャートデータを扱うst.column_config.AreaChartColumnについて解説します。お楽しみに！
公式ドキュメントはこちら：st.column_config.ImageColumn
最後まで読んでいただきありがとうございました。73
コメント