こんにちは、JS2IIUです。Streamlitの機能紹介を続けてきました。今回は10日目、連続投稿中です。ゴールが少し見えてきました。
はじめに
今回は、Streamlitを使って複数ページを持つアプリを作成する方法を解説します。大規模なアプリケーションを構築する際には、単一ページにすべての機能を詰め込むよりも、機能を分割して複数ページに分ける方が管理しやすくなります。また、ページ間での状態管理も重要です。この記事では、st.session_stateを使ってページ間でデータやユーザーの選択を保持する方法についても詳しく説明します。
複数ページのアプリ構造
Streamlitでは、簡単に複数ページを持つアプリケーションを作成できます。以下の例では、シンプルなマルチページアプリを構築します。
マルチページアプリの構成
まず、アプリを複数のページに分割するために、ページごとに個別のPythonファイルを作成します。
ディレクトリ構成はこのようになっています。メインのページと同じ階層にpagesディレクトリを作り、その中に複数のソースコードを配置します。これだけでナビゲーション付きのマルチページができてしまいます。とても簡単です。
構成例:
.
├── my_app_main.py
└── pages
├── About.py
├── Contact.py
└── Home.py
各ページのコード例
my_app_main.py:
import streamlit as st
st.write("Hello World!")
Home.py:
import streamlit as st
st.title("Home Page")
st.write("Welcome to the home page!")
About.py:
import streamlit as st
st.title("About Page")
st.write("This is the about page.")
Contact.py:
import streamlit as st
st.title("Contact Page")
st.write("This is the contact page.")
マルチページアプリの実行
streamlit runコマンドを使用して、アプリケーションを実行します。ページ間のナビゲーションは、Streamlitが自動で生成してくれます。
$ streamlit run my_app_main.py
状態管理
マルチページアプリでは、ページ間でデータやユーザーの選択を共有するための状態管理が必要です。st.session_stateを使うことで、ユーザーが選択した情報や計算結果を保持し、次のページでもそのデータを利用することができます。ページを再読み込みするまでの間、変数を保存しています。
st.session_state の基本的な使い方
st.session_stateは辞書のように扱え、キーと値を設定することで、データを保存できます。以下に、簡単な例を示します。
import streamlit as st
if 'counter' not in st.session_state:
st.session_state.counter = 0
def increment_counter():
st.session_state.counter += 1
st.button("Increment", on_click=increment_counter)
st.write("Counter:", st.session_state.counter)
この例では、カウンターの値をst.session_stateに保存し、ボタンがクリックされるたびにカウンターの値が増加します。
ページ間で状態を共有する
複数ページのアプリでは、st.session_stateを使って、ページ間でデータを共有できます。例えば、ユーザーがホームページでフォームに入力したデータを、別のページで利用することができます。
Home.py:
import streamlit as st
st.title("Home Page")
name = st.text_input("Enter your name")
if st.button("Submit"):
st.session_state.name = name
st.write(f"Name '{name}' saved!")
About.py:
import streamlit as st
st.title("About Page")
if 'name' in st.session_state:
st.write(f"Hello, {st.session_state.name}!")
else:
st.write("Name not found.")
この例では、ホームページでユーザーが入力した名前をst.session_stateに保存し、別のページ（Aboutページ）でその名前を表示しています。
まとめ
第10回では、Streamlitでマルチページアプリを作成する方法と、st.session_stateを使った状態管理について解説しました。これにより、より複雑で機能的なアプリケーションを構築できるようになります。
次回の最終回では、RESTful APIの構築とStreamlitとFastAPIの統合について解説します。APIを通じてデータをやり取りすることで、より強力なWebアプリケーションを作成する方法を学びましょう。
最後まで読んでいただきありがとうございました。73
補足：Streamlit応用編 記事リスト
Streamlit応用編 第1回: キャッシュ機能の活用
https://js2iiu.com/2024/08/28/streamlit-01-cache/
Streamlit応用編 第2回: インタラクティブなウィジェットの応用
https://js2iiu.com/2024/08/29/streamlit-02-widget/
Streamlit応用編 第3回: データのアップロードとダウンロード
https://js2iiu.com/2024/08/29/streamlit-03-download/
Streamlit応用編 第4回: レイアウトのカスタマイズ
https://js2iiu.com/2024/08/30/streamlit-04-layout/
Streamlit応用編 第5回: テーマのカスタマイズ
https://js2iiu.com/2024/08/31/streamlit-05-theme-custom/
Streamlit応用編 第6回: デプロイと共有
https://js2iiu.com/2024/09/01/streamlit-06-deploy/
Streamlit応用編 第7回: 認証とセキュリティ
https://js2iiu.com/2024/09/02/streamlit-07-security/
Streamlit応用編 第8回: データベースとの連携
https://js2iiu.com/2024/09/02/streamlit-08-database/
Streamlit応用編 第9回: 複雑なデータビジュアライゼーション
https://js2iiu.com/2024/09/05/streamlit-09-visualization/
Streamlit応用編 第10回: マルチページアプリの作成
https://js2iiu.com/2024/09/06/streamlit-10-multipage/
Streamlit応用編 第11回: StreamlitでAPIを作成する方法
https://js2iiu.com/2024/09/07/streamlit-11-api/