前置き

こんにちは。データエンジニアの山口歩夢です！

この度、5/25〜の技術書典16に向けて、Streamlitの入門書を執筆しました！
Streamlitの基礎から実践的な内容まで、124ページにまとめて解説させていただきましたので、是非チェックいただけると嬉しいです。

早速本題ですが、こちらの記事ではStreamlitのマルチページ機能の実装方法について解説しようと思います！

マルチページ機能とは

Streamlitではアプリ内に別のページを作成して別のアプリケーションの配置を可能にする、マルチページ機能を実装できます。

実装方法としては、以下のようなpagesディレクトリを作成してPythonスクリプトを配置するだけです。

root/
├── streamlit_app.py
└── /pages
     └── multi_page1.py
     └── multi_page2.py

上記のような配置でPythonスクリプトを配置するだけで、以下のようにマルチページ機能を実装することができます。

サイドバーの「multi page1」と「multi page2」をクリックすれば、「multi_page1.py」と「multi_page2.py」のアプリケーションへ遷移することが可能です。

簡単に実装できますが、こちらの方法だとPythonスクリプトのファイル名と同じ文字列でサイドバー上にリンク先が表示されてしまうという、あまり嬉しくない点があります。
これはst-pagesモジュール、またはst.page_linkを使用することで改善することができます

「Streamlit データ可視化入門」では、st-pagesモジュールを使用してマルチページ機能を実装する方法を解説したため、本記事ではst.page_link関数を使用して実装してみようと思います。

※st-pagesモジュールを使った実装方法は以下です。

st.page_linkを使用した実装方法

まず、以下のようにサイドバーの中にst.page_linkを記入して、以下のようにマルチページのPythonスクリプトとアプリ上に表示したいページ名を記入していきます。

streamlit_app.py

import streamlit as st

with st.sidebar:
    st.page_link("streamlit_app.py", label="ホーム", icon="🏠")
    st.page_link("pages/multi_page1.py", label="マルチページ1", icon="1️⃣")
    st.page_link("pages/multi_page2.py", label="マルチページ2", icon="2️⃣")

st.title("multi page app")

するとこのように、日本語名がついたマルチページへのリンク先がサイドバー上に表示されます。
ですが、これだと元々のマルチページのリンク先も表示されてしまっていて見づらいです。

そのため、以下のように/.streamlitディレクトリの中にconfig.tomlを用意して以下のように記入します。

root/
├── streamlit_app.py
├── /pages
|   └── multi_page1.py
|   └── multi_page2.py
└── /.streamlit
    └── config.toml

config.toml

[client]
showSidebarNavigation = false

これで元々のマルチページのリンク先が消えて、日本語表記に指定したリンク先だけが表示されるようになりました！

まとめ

最近、EC2にデプロイしたStreamlitアプリケーションで、st-pagesモジュールを使用してマルチページ機能を実装していたのですが、指定したページ名で表示してくれないという不具合が発生しました。
こちらの方法が便利なので、実装し直してみようと思いました。
以上です！