【Streamlit】表にリンク・URLや画像を埋め込む【st.dataframe】

# はじめに
業務でStreamlitを使用したデモアプリの開発しています。
dataframeにURLや画像を埋め込む方法を調べてる最中に、Streamlitの表機能が2023年夏ごろから大きく進化していたことに気づき、個人的に役立った機能をまとめておこうと思います。

# 環境
Streamlit 1.31.0
Python 3.9.6

# st.column_config
`st.column_config`は、Streamlitの表機能である`st.dataframe`（または`st.data_editor`）を柔軟にカスタマイズするためのクラスです。

使い方は簡単で、`st.dataframe`のパラメータとして設定するだけです。（後述）
`st.column_config`には様々な種類があり、今回は以下の二つを紹介します。

## LinkColumn
各セルにクリック可能なURLを設定したり、URLを埋め込む事ができます。

```python
import pandas as pd
import streamlit as st

data_df = pd.DataFrame(
    {
        # サンプルデータ（URL）
        "apps": [
            "https://roadmap.streamlit.app",
            "https://extras.streamlit.app",
            "https://issues.streamlit.app",
            "https://30days.streamlit.app",
        ],
    }
)

st.dataframe(
    data_df,
    column_config={
        "apps": st.column_config.LinkColumn(
            # 表示するカラム名
            "アプリ",
            # 表示データのテキスト
             display_text="https://(.*?)\.streamlit\.app"
        )
    },
)
```
実行したもの
![スクリーンショット 2024-02-12 18.02.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676792/3e439d19-ea30-6c06-44a6-9d0c338a934c.png)

`st.column_config.LinkColumn`の各パラメータについて説明します。
* 文字列（上記の例では`"アプリ"`）
    * 表示するカラム名を設定します。元々のデータのカラム名は`apps`ですが、これを設定することで表示名を自由に設定できます。
    データ名は英語だけど、表示名は日本語にしたい時などに便利です。
* `display_text`
    * データの表示名を変更できます。
    URLの基本形式が同じ場合は、正規表現を使用してURLの一部を抽出する事が可能です。
    上記の例では、各データが
    ```
    "https://xxx.streamlit.app"
    ```
    の形式なので、`xxx`の部分を抽出して表示名としています。
    このパラメータを設定しない場合は、URLが直接表示されます。

## ImageColumn
各セルに画像を埋め込み、表示する事ができます。
要領は先ほどのLinkColumnと同様です。
```python
import pandas as pd
import streamlit as st

data_df = pd.DataFrame(
    {
        # サンプルデータ（画像URL）
        "apps": [
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/5435b8cb-6c6c-490b-9608-799b543655d3/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/ef9a7627-13f2-47e5-8f65-3f69bb38a5c2/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/31b99099-8eae-4ff8-aa89-042895ed3843/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/6a399b09-241e-4ae7-a31f-7640dc1d181e/Home_Page.png",
        ],
    }
)

st.data_editor(
    data_df,
    column_config={
        "apps": st.column_config.ImageColumn(
            # 表示するカラム名
            "Preview Image"
        )
    },
)
```
実行したもの
![スクリーンショット 2024-02-12 18.14.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676792/c596344d-1c2d-49ab-c66a-56468aff64cd.png)
たったこれだけのコードで、簡単に画像のプレビューが表示できました。

# （おまけ） 組み合わせて使ってみる
コード量は少ないとはいえ、`st.column_config`のパラメータは階層構造になっており、ややこしいです。
今回紹介したパラメータを組み合わせて少し長めのコードを書いてみたので、「あれ？ここってどんな書き方だっけ」と迷った時に参考にしていただければ幸いです。

```python
import pandas as pd
import streamlit as st

data_df = pd.DataFrame(
    {
        "apps": [
            "https://roadmap.streamlit.app",
            "https://extras.streamlit.app",
            "https://issues.streamlit.app",
            "https://30days.streamlit.app",
        ],
        "creator": [
            "https://github.com/streamlit",
            "https://github.com/arnaudmiribel",
            "https://github.com/streamlit",
            "https://github.com/streamlit",
        ],
       "apps_image": [
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/5435b8cb-6c6c-490b-9608-799b543655d3/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/ef9a7627-13f2-47e5-8f65-3f69bb38a5c2/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/31b99099-8eae-4ff8-aa89-042895ed3843/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/6a399b09-241e-4ae7-a31f-7640dc1d181e/Home_Page.png",
        ]
    }
)

st.dataframe(
    data_df,
    column_config={
        "apps": st.column_config.LinkColumn(
            "アプリ",
            display_text="https://(.*?)\.streamlit\.app"
        ),
        "creator": st.column_config.LinkColumn(
            "作者", 
            display_text="Open profile"
        ),
        "apps_image": st.column_config.ImageColumn(
            "プレビュー", 
            help="Streamlit app のプレビュー画像"
        )
    },
    hide_index=True,
)
```
実行結果
![スクリーンショット 2024-02-12 18.34.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676792/090d07d1-3d4f-676b-e056-7301279cb4d9.png)

# 終わりに
今回紹介したパラメータ以外にも、`st.column_config`には沢山の種類があります。
詳細は[公式ドキュメント](https://docs.streamlit.io/library/api-reference/data/st.column_config)をお読みください。

# 参考文献
[Strealit - Column configuration
](https://docs.streamlit.io/library/api-reference/data/st.column_config)
[Strealit - st.column_config.LinkColumn
](https://docs.streamlit.io/library/api-reference/data/st.column_config/st.column_config.linkcolumn)
[Strealit - st.column_config.ImageColumn
](https://docs.streamlit.io/library/api-reference/data/st.column_config/st.column_config.imagecolumn)