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

こんにちは、JS2IIUです。

StreamlitでDataFrameを表示する際にハイパーリンクを表示する機能を提供するst.column_config.DateColumnについて紹介します。今回もよろしくお願いします。

はじめに

Streamlitのst.column_config.LinkColumnは、データフレーム内のリンクやURLデータをクリック可能な形式で表示するために用いられるクラスです。この機能を活用することで、外部リソースやウェブページへのアクセスをスムーズに提供でき、インタラクティブなデータビジュアライゼーションの構築が可能になります。

この記事では、LinkColumnの基本的な使い方、応用例、そして注意点を具体的なコード例とともに解説します。

st.column_config.LinkColumnとは

LinkColumnは、データフレームの特定列に含まれるURLをハイパーリンクとして表示するためのStreamlitクラスです。これにより、リンクを単なるテキストではなく、視覚的にわかりやすくクリック可能な形式に変換できます。

主な用途

• ウェブリンクの管理：ユーザーが直接外部リソースや関連情報にアクセス可能。
• データの整理：リンク表示を統一フォーマットで整える。
• インタラクティブなリスト：動的に生成されるリンクや外部サイトを含むデータテーブルの提供。

使用可能なオプション

実際の使用例

以下に、LinkColumnを使用した製品情報管理の例を示します。

製品リストと詳細リンクの管理

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

# データフレームを作成
data = {
    "Product": ["Laptop", "Smartphone", "Headphones"],
    "Details": [
        "https://example.com/laptop",
        "https://example.com/smartphone",
        "https://example.com/headphones"
    ]
}
df = pd.DataFrame(data)

# LinkColumnで列をカスタマイズ
column_config = {
    "Details": LinkColumn(
        label="製品詳細リンク",
        help="各製品の詳細情報へのリンクです。",
        display_text="詳細を見る"  # リンクの表示テキストを指定
    )
}

# カスタム列設定でデータフレームを表示
st.dataframe(df, column_config=column_config)

サンプルコードの解説

• データフレーム作成
  • 製品名とその詳細ページのリンクを2つの列に分けて構成。

• LinkColumnの設定
  • label：列名を「製品詳細リンク」に設定。
  • help：リンクの用途を説明する補足テキストを設定。
  • display_text：クリック可能なリンクに「詳細を見る」というテキストを表示。

• 表示結果
  • Details列にクリック可能な「詳細を見る」リンクが表示され、ユーザーはリンク先ページに直接アクセス可能。

注意点

• データの検証
  • 無効なURLがリンクに含まれないように、事前にバリデーションを実行することが重要です。
• 表示テキスト
  • 必要に応じてdisplay_textを設定し、ユーザーが意味を理解しやすい表示を心がけます。
• セキュリティリスク
  • 外部リンクを扱う場合は、信頼できるサイトのみを設定し、不適切なリンクを防ぎましょう。

まとめ

st.column_config.LinkColumnは、URLをインタラクティブなリンク形式で表示するStreamlitアプリケーションにおける強力なツールです。製品情報やレポート、リソースリンクを整理して表示したい場合に非常に便利です。

次回の記事では、画像データを扱うst.column_config.ImageColumnについて解説します。お楽しみに！

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

こんにちは、JS2IIUです。StreamltでDataFrameを表示する際に、画像を表示するためのst.column_config.ImageColumnを紹介します。今回もよろしくお願いします。はじめにst.column_config.ImageColumnは、Streamlitアプリ内のデー...

js2iiu.com

2024/11/27

公式ドキュメントはこちら：st.column_config.LinkColumn

最後まで読んでいただきありがとうございます。73