「サイドバーの作り方が分からない」
「サイドバーで何が出来るのか分からない」
とお悩みではないでしょうか。
サイドバーを作成できると、ページの遷移やグラフをリアルタイムで変化させられます。
本記事では、Streamlitのサイドバーの作成方法から使用できる場面まで、網羅的に解説していきます。
最後まで読めば、Streamlitでのサイドバーの利用は完璧になるでしょう。
本記事の信頼性
以下でお悩みの方に読んで欲しい
Pythonでアプリ開発！
PythonでWebアプリを開発したいと考えている方は、Udemyの講座の『爆速で5つのPython Webアプリを開発』を受講しましょう。
おすすめしている講座では、Pythonだけで5つのアプリを開発でき、APIなどのアプリ開発の周辺知識、公開する方法まで網羅的に解説されています。
クリックしてもセールになっていない時は、「Streamlit」で検索し直してみましょう！
＼時々セール中！／
それでは本編です！
1. Streamlitでサイドバー（sidebar）を作る方法
まず、「Streamlitでサイドバー（sidebar）を作る方法」について見ていきましょう。
以下のような順で解説していきます。
- Streamlitのサイドバー（sidebar）とは
- サンプルコードでサイドバーを作成してみよう
サイドバーを実装するためのサンプルコードまで解説するので、ぜひ参考にしてください。
Streamlitのサイドバーとは
Streamlitのサイドバーは、Webアプリの左側に配置される領域で、ユーザーがアプリを操作できるように設置します。
サイドバーでは、テキスト入力ボックスやボタン、スライダーなど、様々なウィジェットを配置できるため、データの選択やフィルタリングに用いられることが多いです。
例えば、グラフのデータ数を減らすようにサイドバーのウィジェットを操作すれば、その入力に応じてグラフが更新されます。
次に、サンプルコードを通じて、サイドバーの基本的な作成方法を見ていきましょう。
サンプルコードでサイドバーを作成してみよう
Streamlitのサイドバーを使用して、複数選択ボックスを作成する基本的なサンプルコードを以下に示します。
Streamlitのサイドバーはst.sidebarで配置でき、st.sidebar.sliderやst.sidebar.buttonのようにすると、サイドバーにスライダーやボタンを追加できます。
以下のコードは、サイドバーに複数選択ボックスを表示するサンプルコードです。
import streamlit as st
# サイドバーに複数選択ボックスを作成
selected_items = st.sidebar.multiselect(
'好きなフルーツを選んでください',
['りんご', 'みかん', 'ぶどう', 'もも'],
default=['りんご']
)
# メインエリアに選択結果を表示
st.write(f'選んだフルーツ: {", ".join(selected_items)}')
上記のサンプルコードでは、st.sidebar.multiselectを使用してサイドバーに複数選択ボックスを作成しています。
選択ボックスには4つのフルーツの名前がオプションとして表示され、ユーザーは複数のフルーツを選択可能です。
複数選択ボックス（multiselect）のカスタマイズ方法を詳しく知りたい方は、『【完全網羅】Streamlitのmultiselectの扱い方を解説』の記事をご参照ください。
上記のサンプルコードを実行すると、以下のような画面になります。
このように、Streamlitではさまざまなウィジェットを簡単にサイドバーに追加できます。
サンプルコードを参考に、サイドバーを作成してみましょう。
2. Streamlitのサイドバーでできること
作成方法について解説した所で、「Streamlitのサイドバーでできること」に焦点を当てて解説していきます。
サイドバーが使える場面は、以下の2つです。
- ページの表示を切り替えたい時
- ウィジェットを用いてグラフを動かしたい時
サイドバーを用いる理由は、画面をスクロールしても操作できるためです。
それぞれ解説していきます。
ページの表示を切り替えたい時
Streamlitのサイドバーを用いることで、ページの表示を切り替える機能を実装できます。
サイドバーにセレクトボックスなどを実装し、その値を場合分けで分けることでページを切り替えられるのです。
Streamlitのセレクトボックスについて詳しく知りたい方は、『【完全網羅】Streamlitでセレクトボックスを作成する方法』の記事をご参照ください。
例えば、セレクトボックスを使用してユーザーが表示するページを選択できるようにするコードが以下になります。
import streamlit as st
import plotly.express as px
# サイドバーにページ選択のセレクトボックスを作成
page = st.sidebar.selectbox('ページを選択してください', ['ホーム', 'データ分析', 'お問い合わせ'])
# 選択されたページに応じてコンテンツを表示
if page == 'ホーム':
st.title('ホームページ')
elif page == 'データ分析':
st.title('データ分析の結果を表示')
# データの作成
df = px.data.iris()
# Plotlyでグラフを作成
fig = px.scatter(df, x='sepal_width', y='sepal_length', color='species')
# Streamlitで表示
st.plotly_chart(fig)
else:
st.title('お問い合わせはこちら')上記のコードは、以下の3つのページを行き来できるような仕様です。
- ホームページ
- データ分析ページ
- お問い合わせページ
また、実際にデータ分析ページでは、Plotlyというライブラリを用いてグラフを表示できるようにしています。
Streamlitでグラフを作成する方法について詳しく知りたい方は、『Streamlitでグラフを作成する方法｜ライブラリとの併用も紹介』の記事をご参照ください。
コードを実行すると、以下の様に複数ページを実装できます。
左側のセレクトボックスをクリックし、ページを選択することで、ページ切り替えを実装しています。
このように、サイドバーを用いることで、複数ページを実装できるため、ページで表示を変えたいと考えている方はぜひ参考にしてみてください。
ウィジェットを用いてグラフを動かしたい時
Streamlitのサイドバーは、ウィジェットを使用してグラフを動的に変更するのにも利用できます。
例えば、スライダーや入力ボックスを用いて、表示されるグラフのパラメータを調整可能です。
以下のサンプルコードでは、サイドバーに配置されたスライダーを使用して、表示される折れ線グラフの周期を変更しています。
import streamlit as st
import numpy as np
import matplotlib.pyplot as plt
# サイドバーに周期を調整するスライダーを作成
frequency = st.sidebar.slider('グラフの周期を選択してください', 1, 10, 2)
# グラフのデータを生成
x = np.linspace(0, 10, 100)
y = np.sin(frequency * x)
# グラフを描画
plt.plot(x, y)
plt.title('graph')
st.pyplot(plt)上記のコードを実行すると、以下のような表示になり、動的にグラフを変化させられます。
このように、グラフを動的に変化させられるため、ダッシュボードの作成などにもサイドバーが有効です。
まとめ
この記事では、Streamlitを使用してサイドバーを作成し、その機能を最大限に活用する方法まで詳しく解説しました。
サイドバーはダッシュボードの作成やアプリの開発には必須であり、応用まで詳しく知っておくと良いでしょう。
サイドバーの基本的な作成方法とサンプルコードを通じて、基本的なウィジェットの作成方法を学びました。
サイドバーの利用場面は主に2つです。
- ページの表示を切り替えたい時
- ウィジェットを用いてグラフを動かしたい時
サイドバーでは様々なウィジェット（選択ボックス、スライダーなど）を追加することができ、アプリの操作をユーザーが直感的に行えます。
サイドバーなどの機能を簡単に追加できるシンプルさと拡張性から、Streamlitは多くの分野で広く利用されています。
データサイエンスを学び始めた方にとっては、手軽にデータを視覚化し、シェアする手段として非常に有用です。
もし、「アプリを開発してみたい...」「簡単なデータの可視化を行いたい...」と考えている方は、Streamlitを活用しましょう！
Pythonでアプリ開発！
PythonでWebアプリを開発したいと考えている方は、Udemyの講座の『爆速で5つのPython Webアプリを開発』を受講しましょう。
おすすめしている講座では、Pythonだけで5つのアプリを開発でき、APIなどのアプリ開発の周辺知識、公開する方法まで網羅的に解説されています。
クリックしてもセールになっていない時は、「Streamlit」で検索し直してみましょう！
＼時々セール中！／
