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

Streamlit
2024/11/27
この記事は約4分で読めます。

こんにちは、JS2IIUです。

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

はじめに

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

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

st.column_config.LinkColumnとは

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

主な用途

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

使用可能なオプション

引数説明
label列名を指定します。
width列幅を指定します（ピクセル単位）。
help列の用途や補足情報を示すツールチップを表示します。
disabledTrueの場合、リンクを無効化します。
requiredTrueの場合、この列が必須項目であることを示します。
default列のデフォルト値を設定します。
max_chars表示するリンク文字数の最大値を指定します。
validate入力されたデータが有効なリンクであるかを検証する関数を指定できます。
display_textリンクの表示テキストを指定します。指定がない場合、URLそのものが表示されます。

実際の使用例

以下に、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

コメント

タイトルとURLをコピーしました