streamlitでのページ切替方法(st.sidebar)

streamlitのアーキテクチャは単一のページでコンテンツの切替を行うSPA(Single Page Application)が採用されています。Vue.jsやReactなどでもSPAが採用されており最近のトレンドになっています。

SPAで複数のページを切り替えながら表示させる方法は、サイドバーにセレクトボックスやラジオボックスなどを設置して切り替えるのが一般的です。Streamlitならst.sidebarで簡単にサイドバーを表示することができます。

当記事はStreamlitのサイドバーの機能を使って、ページを切り替え複数のページが表示できる方法を紹介したいと思います。

【2022/6/6 追記】
streamlit公式ページからマルチページの新機能が追加されました。これからStreamlitでマルチページを作りたいならこちらのほうがおすすめです。

ついにStreamlitがマルチページ(Multipage)に対応した模様

Streamlitがついに「マルチページ」(multipage)に対応しましたという案内でした。そこでさっそく試してみました。結論から言うと、マルチページを作るのがめちゃくちゃ簡単になりました。Streamlit使っている人は絶対にうれしい機能だと思います。

kajiblo.com

2022.06.06

サイドバー(st.sidebar)にセレクトボックスを配置

import streamlit as st
＃ワイド表示
st.set_page_config(layout="wide")
#セレクトボックスのリストを作成
pagelist = ["page1","page2"]
#サイドバーのセレクトボックスを配置
selector=st.sidebar.selectbox( "ページ選択",pagelist)
if selector=="page1":
    if st.button('ページ1ボタン'):
        st.title("ページ1のタイトル")
elif selector=="page2":
    if st.button('ページ2ボタン'):
        st.title("ページ2のタイトル")

補足

サイドバーにページ選択用セレクトボックスを配置

ページ1を選択

ページ２を選択

サイドバーにラジオボックスを配置

ページ選択数が多い場合は、セレクトボックスが一番有効だと思いますが、ページ選択数が固定かつ少ない場合はラジオボックスもおすすめです。

コードも5行目のselectboxをradioに変更するだけです。

import streamlit as st
st.set_page_config(layout="wide")
pagelist = ["page1","page2"]

selector=st.sidebar.radio( "ページ選択",pagelist)
if selector=="page1":
    if st.button('ページ1ボタン'):
        st.title("ページ1のタイトル")
elif selector=="page2":
    if st.button('ページ2ボタン'):
        st.title("ページ2のタイトル")

他にもサイドバーには、ボタンを配置したり、グラフや表を表示することも可能です。
条件などによってページを切り替えたい場合は簡単にページ切り替え画面を作れるので便利です。