こんにちは、JS2IIUです。
StreamlitでのUIを充実させていくと要素が増えて見づらくなってくることがあります。表示をすっきりさせるための入力ウィジェットや設定項目を整理するためのサイドバーの作成の方法について見ていきます。今回もよろしくお願いします。
1. はじめに
Streamlitを使ってアプリを作っていると、「設定項目が増えてきて画面がごちゃごちゃしてしまう…」と感じることはありませんか？
そんなときに便利なのが、st.sidebar を使ったサイドバーの活用です。
この記事では、Streamlit初心者の方向けに、st.sidebar の基本的な使い方から、実際のアプリにどう応用できるかまでを、ステップバイステップでわかりやすく解説していきます。
2. サイドバーとは？
サイドバーとは、Streamlitアプリの画面の左側に表示される、縦長のエリアのことです。
このサイドバーに入力フォームや設定項目を配置することで、アプリ本体の表示領域をすっきり保ちながら、機能性を高めることができます。
サイドバーのメリット：
- 設定項目をひとまとめにできる
- 画面のメイン表示と分けることで視認性がアップ
- データ分析やグラフ表示アプリなどで特に便利
3. 基本的な使い方：st.sidebar の書き方
✅ ステップ1：st.sidebar の基本
サイドバーに何かを表示したいときは、通常の st.text_input() や st.slider() などのウィジェットの前に st.sidebar. をつけるだけです。
✏️ 例：名前と年齢を入力する
import streamlit as st
# アプリのタイトル
st.title("サイドバーの基本例")
# サイドバーに入力ウィジェットを配置
name = st.sidebar.text_input("お名前を入力してください")
age = st.sidebar.slider("年齢", 0, 100, 25)
# メイン画面に結果を表示
st.write(f"こんにちは、{name}さん！年齢は{age}歳ですね。")
🔍 解説
st.sidebar.text_input(...)：名前の入力欄がサイドバーに表示されます。st.sidebar.slider(...)：年齢を選ぶスライダーもサイドバーに配置。- 入力に応じて、メイン画面に結果が反映されます。
4. よく使われるウィジェットをサイドバーに配置する
✅ ステップ2：複数のウィジェットを組み合わせる
以下は、選択肢を選んだり、チェックボックスを使ったりする例です。
import streamlit as st
st.title("ウィジェットの組み合わせ例")
# サイドバーにウィジェットを並べる
color = st.sidebar.selectbox("好きな色を選んでください", ["赤", "青", "緑"])
animal = st.sidebar.radio("好きな動物を選んでください", ["犬", "猫", "鳥"])
subscribe = st.sidebar.checkbox("メルマガを購読する")
# 結果を表示
st.write(f"選んだ色：{color}")
st.write(f"好きな動物：{animal}")
if subscribe:
st.write("メルマガを購読しています。")
else:
st.write("メルマガは購読していません。")
🔍 解説
selectbox：プルダウン式の選択radio：ラジオボタンで1つを選択checkbox：チェックオン/オフを切り替える
5. サイドバーの応用例：設定パネルとして使う
より実用的な例として、グラフの表示設定をサイドバーで変更できるアプリを作ってみましょう。
✅ ステップ3：グラフ表示設定をサイドバーで切り替える
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
st.title("グラフ表示アプリ")
# ダミーデータ
data = pd.DataFrame({
"月": ["1月", "2月", "3月", "4月", "5月"],
"売上": [120, 180, 150, 200, 170]
})
# サイドバーで設定を選ぶ
chart_type = st.sidebar.radio("グラフの種類を選択", ["折れ線グラフ", "棒グラフ"])
show_grid = st.sidebar.checkbox("グリッドを表示", value=True)
# グラフ描画
fig, ax = plt.subplots()
if chart_type == "折れ線グラフ":
ax.plot(data["月"], data["売上"])
else:
ax.bar(data["月"], data["売上"])
# グリッド表示
if show_grid:
ax.grid(True)
st.pyplot(fig)ここで、グラフの横軸のラベルの「月」が表示されていません。これはmatplotlibの仕様で、日本語フォントを表示させるには一手間必要です。詳しいやり方はWEB上の記事を参考にしてください。
🔍 解説
chart_type：グラフのタイプをradioで選択show_grid：チェックボックスでグリッドのオン・オフ- メイン画面には選択に応じたグラフが表示される
6. よくあるエラー・注意点
❌ よくある間違い：st.sidebar を忘れる
以下のように st.radio(...) だけ書くと、メイン画面に表示されてしまうので注意。
# サイドバーにしたいのに、これではメイン画面に出てしまう
chart_type = st.radio("グラフの種類", ["折れ線", "棒"])✅ 正しくはこう書きます：
chart_type = st.sidebar.radio("グラフの種類", ["折れ線", "棒"])📝 スペースが狭くなる点に注意
サイドバーは縦長で横幅が狭いので、長い選択肢や文章は折り返されて見づらくなることがあります。
→ ラベルは短く簡潔にすると使いやすくなります。
7. まとめ
st.sidebarを使えば、Streamlitアプリの設定項目や入力欄を左側にすっきりとまとめることができます。text_input,selectbox,slider,checkboxなど、よく使うウィジェットはすべてst.sidebar.をつけるだけで配置可能。- グラフ設定やフィルタの切り替えなど、ユーザーが操作する機能を集約する場としてサイドバーはとても便利です。
初心者の方もぜひ一度、st.sidebar を取り入れて、見やすく・操作しやすいStreamlitアプリを作ってみてください！
8. 参考リンク
最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。
コメント