前置き
こんにちは。データエンジニアの山口歩夢です!
この度、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スクリプトとアプリ上に表示したいページ名を記入していきます。
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
[client]
showSidebarNavigation = false
これで元々のマルチページのリンク先が消えて、日本語表記に指定したリンク先だけが表示されるようになりました!
まとめ
最近、EC2にデプロイしたStreamlitアプリケーションで、st-pages
モジュールを使用してマルチページ機能を実装していたのですが、指定したページ名で表示してくれないという不具合が発生しました。
こちらの方法が便利なので、実装し直してみようと思いました。
以上です!