【Streamlit】クエリパラメータを扱うst.query_params

Streamlit Python Webアプリ

お疲れ様です。

Streamlitでクエリパラメータを扱うことができるということを知ったので試してみました。
これを使って、これまでに作成したガントチャートアプリに閲覧専用のモードを実装するところまでやってみます。

クエリパラメータについて

クエリパラメータを使うことでWebアプリのURLに変数を付与してその情報をアプリに与えることができます。

アプリのURLの後ろに「?」＋「変数名＝値」を付与することでクエリパラメータを設定できます。 - 例

http://hogehoge.jp/?name=hiroji

複数設定することも可能。その場合「変数名＝値」の部分を「&」で繋げます。 - 例

http://hogehoge.jp/?name=hiroji&job=musician

取得方法はWebアプリのフレームワークによって異なります。 例えば、JavaScript/TypeScriptのWebフレームワークのNext.jsならuseSearchParams()を使います。

Streamlitのクエリパラメータ操作

Streamlitでクエリパラメータを取得する場合はst.query_paramsを使います。

コードはこれだけでOK。
st.query_paramsだけだとQueryParamsProxyというオブジェクトで格納されますが、辞書型と同じようにキー指定で値を取り出すことができます。 .to_dict()を使うとPython標準の辞書型に変換されて格納されます。

# クエリパラメータの読み込み
params = st.query_params.to_dict()

例えば、URLを「http://localhost:8501/?name=hiroji&job=musician」とすると、変数paramsは以下のようになります。

{'job': 'musician', 'name': 'hiroji'}

ガントチャートアプリに組み込んでみる

最後にガントチャートアプリにst.query_paramsを組み込んで、クエリパラメータを使って閲覧のみの表示を作成してみます。

ソースコードはこちらにあります。 github.com

やることとしてはシンプルで、アプリの下部にある「登録」「更新」「削除」のボタンを非表示にするのみです。 現状はこれだけ無効にすれば、アプリ側からのタスクリスト編集ができなくなります。

編集モード

コードはこんな感じ。modeという名前のクエリパラメータがない場合と、mode=view_onlyでないときに編集用の3つのボタンを表示する形になっています。

  • コード
# クエリパラメータの読み込み
params = st.query_params.to_dict()

if ("mode" not in params.keys()) or (params["mode"] != "view_only"):
    _, col1, _, col2, _, col3, _ = st.columns([1, 4, 2, 4, 2, 4, 1])
    with col1:
        # タスクを登録するボタン
        add_task_button(DATA_PATH)
    with col2:
        # タスクを編集するボタン
        update_task_button(DATA_PATH)
    with col3:
        # タスクを削除するボタン
        delete_task_button(DATA_PATH)

「http://localhost:8501/?mode=view_only」と設定することによりボタンを非表示に変更できます。
URL

閲覧のみモード