Posted inPython

Streamlitで本格的なデータダッシュボードを15分で構築：フロントエンドの悩みにおさらば

Python tutorial - IT technology blog
Python tutorial - IT technology blog

バックエンドエンジニアにとっての悪夢「UI制作」

先週の月曜日、私はボトルネックの原因を特定するために、一晩中起きて500MBのサーバーログをフィルタリングしていました。Pythonでの処理を終えたとき、上司がやってきてこう言いました。「運用チームが見るために、少し視覚的なレポートを送っておいて」。その時、私は途方に暮れました。FlaskやDjangoを使うなら、まともなグラフを描画するためにルーティングやHTMLテンプレート、そして複雑なCSSと格闘しなければならないからです。

問題は機会費用にあります。たった一つの円グラフを表示させるためだけに2日間もCSSのコーディングに費やすのは, リソースの大きな無駄です。多くのITエンジニアは、手っ取り早くExcelファイルで出力して済ませてしまいがちです。しかし、この方法ではプロフェッショナルさに欠け、経時的な変化を追跡するのも困難です。

なぜ他のソリューションではなくStreamlitが「本命」なのか？

コーディングに入る前に、なぜStreamlitがデータエンジニアのコミュニティでこれほどまでに注目されているのか、その理由を振り返ってみましょう。

  • Flask/Django + Plotly.js: これは「質実剛健」な解決策です。あらゆるピクセルをカスタマイズできますが、代償として時間がかかります。バグのないシステムを構築するには、少なくとも3〜5日は必要でしょう。
  • Power BI/Tableau: ドラッグ＆ドロップで非常に素早く作成できますが、ライセンス料がユーザーあたり月額10〜20ドルほどかかります。さらに重要なのは、複雑なPythonの処理ロジックをこれらのツールに統合するのが非常に困難であるという点です。
  • Streamlit: 100% Pythonだけで記述します。HTMLもJavaScriptも不要です。コードを修正して保存するだけで、UIが即座に自動更新されます。

システムのモニタリングツールが必要な場合や、クライアント向けに素早くプロトタイプを作成したい場合、Streamlitは間違いなく第一候補になります。このライブラリに切り替えてから、UI制作にかかる時間を約80%節約できました。

15分でダッシュボードを構築する手順

準備は非常に簡単です。コマンド一行で必要なライブラリをすべてインストールできます。

pip install streamlit pandas plotly openpyxl

ステップ1：アプリケーションの骨組みを作成する

まず、app.pyファイルを作成します。これがUIロジック全体を管理するメインファイルになります。

import streamlit as st
import pandas as pd
import plotly.express as px

# ページの設定
st.set_page_config(page_title="IT Ops Dashboard", layout="wide")

st.title("📊 サーバーパフォーマンス・ダッシュボード")
st.markdown("リアルタイムのリソース監視システム")

ステップ2：データの準備

実際にはSQLやAPIからデータを取得することになりますが、ここではイメージしやすいように、10日間のサーバー運用データをシミュレートします。

def load_data():
    data = {
        '日付': pd.date_range(start='2023-10-01', periods=10, freq='D'),
        'CPU_Usage': [45, 55, 60, 40, 80, 95, 30, 50, 70, 65],
        'RAM_Usage': [30, 35, 40, 32, 50, 60, 28, 40, 45, 42],
        'Status': ['OK', 'OK', 'Warning', 'OK', 'Critical', 'Critical', 'OK', 'OK', 'Warning', 'OK']
    }
    return pd.DataFrame(data)

df = load_data()

ステップ3：スマートなフィルターの追加

Streamlitを使えば、サイドバーの作成も非常に簡単です。わずか数行のコードで、プロフェッショナルなステータスフィルターが完成します。

st.sidebar.header("フィルター設定")
status_filter = st.sidebar.multiselect(
    "サーバーステータス:",
    options=df["Status"].unique(),
    default=df["Status"].unique()
)

# 選択内容に基づいてデータをフィルタリング
df_filtered = df[df["Status"].isin(status_filter)]

ステップ4：指標とグラフの表示

いよいよ表示部分です。画面を3つのカラムに分割し、最も重要な指標（メトリクス）を表示します。

col1, col2, col3 = st.columns(3)
col1.metric("CPU平均", f"{df_filtered['CPU_Usage'].mean():.1f}%")
col2.metric("RAM最大", f"{df_filtered['RAM_Usage'].max()}% ")
col3.metric("イベント総数", len(df_filtered))

# 折れ線グラフの描画
fig_cpu = px.line(df_filtered, x='日付', y='CPU_Usage', title='CPU使用率の推移')
st.plotly_chart(fig_cpu, use_container_width=True)

# 詳細データテーブル
st.subheader("システムログ詳細")
st.dataframe(df_filtered)

アプリケーションの起動

ファイルを保存し、ターミナルを開いて以下の魔法のコマンドを入力してください：

streamlit run app.py

ブラウザが自動的にポート8501で開きます。フィルターを操作してみると、ページをリロードすることなくグラフが即座に反応するのがわかるはずです。

実務経験からのアドバイス

Streamlitは非常に便利ですが、一つ欠点があります。ボタンをクリックするたびに、コードが最初から最後まで再実行される点です。数百万行に及ぶ大規模なデータセットの場合、UIにラグが生じることがあります。

ここでの秘訣は、デコレータ@st.cache_dataを活用することです。これにより処理結果をキャッシュに保存し、アプリの動作を10倍速くすることができます。同僚に共有したい場合は、Dockerにパッケージングするだけで非常に軽量に配布できます。

st.sliderやst.camera_inputなど、他のウィジェットもぜひ試してみてください。分からないことがあれば、下のコメント欄に質問を残してください。丁寧にお答えします！

Share:
Tags: