概要

• Streamlitを使うとデータ閲覧用のWebアプリが簡単に作れる(参考１, 参考２)
• しかし、１ページにたくさんの情報が並ぶと読みにくい
• なので、複数ページのWebアプリにした
• ということで、できたもの → Chocolate Ball Viewer

Streamlit

StreamlitはWebアプリを作るためのPythonフレームワークです。細かい調整はできないけど、めちゃめちゃ簡単にWebアプリを構築することができます。
公式ドキュメントでチュートリアルを眺めれば雰囲気が掴めるかなと思います。

例えば, single_app.pyとして以下のPythonファイルを作ったとします。

import streamlit as st

def greeting1():
    st.header('こんにちは, 世界！')
    st.write('ねこはかわいい')

def greeting2():
    st.header('またまたこんにちは, 世界！！')
    st.write('ねこはとてもかわいい')

greeting1()
greeting2()

あとは以下のコマンドでデフォルト8063ポートでローカルにWebサーバが立ち上がります。

$ streamlit run single_app.py

これだと一つのページに全ての情報が記載されてしまいます。種類の違う情報は別ページに分けたいですね。
ということで、複数ページのWebアプリを作ります。

Streamlitで複数ページを作る

こちらの記事をほぼ丸々コピーしただけなので、こっちを読んでください。

Streamlitで複数ページのWebアプリを作るためには、アプリを一つの関数で呼び出せるように書いておきます。例えば、上記の例では、greeting1やgreeting2のことです。
そして、サイドバーにアプリを選択するためのウィジットを設置し、対応する関数を呼び出します。(上記の参考ページを見てください)

これでも実装は簡単なのですが、便利なクラスが公開されています（streamlit-multiapps）。
この、「streamlit-multiapps」を使ってMultiPageのWebアプリを作るには以下の4つのステップを踏みます。

1. MultiAppクラスをimportしてインスタンスを生成
2. 別ファイルなどで、表示するコンテンツを定義（例えばgreeting1やgreeting2）
3. MultiAppクラスのインスタンスにadd_app(title, func)でコンテンツを登録
4. runする

これで、サイドバーにラジオボタンが設置され、表示するコンテンツを選択できるようになります。

例えば、

import streamlit as st
from multiapp import MultiApp

def greeting1():
    st.title('こんにちは, 世界！')
    st.write('ねこはかわいい')

def greeting2():
    st.title('またまたこんにちは, 世界！！')
    st.write('ねこはとてもかわいい')


app = MultiApp()
app.add_app("page1", greeting1)
app.add_app("page2", greeting2)
app.run()

こんなページができます。

できた

前回公開したチョコボールデータを閲覧するためのWebアプリを複数ページにしました。
Chocolate Ball Viewer

内容量の閲覧と、エンゼル出現確率のシミュレーションは内容が結構異なるので、別ページに分けたということです。

おわり

参考

1. Building Multi Page Web App Using Streamlit
2. streamlit-multiapps
3. Streamlitでデータを可視化する