📡Dash × PlotlyでリアルタイムスピードテストWebアプリを作る完全ガイド【Python】

2025-07-11

✅ はじめに

Python × Dash（Plotly公式）を使って、Google スピードテストのようなリアルタイム Web ダッシュボードを作る方法

🔧 使う技術・ツール一覧

ツール	用途
Python	開発言語
Dash（Plotly）	Webアプリ化＆グラフ表示
speedtest-cli	インターネット速度測定
Plotly Graph Objects	ゲージメーターの表示

📦 必要なライブラリをインストール

pip install dash dash-bootstrap-components speedtest-cli

🧐 実行される処理の流れ（概要）

speedtest-cli を使ってネットワーク速度を測定
Plotly の go.Indicator でゲージメーターを表示
Dash の dcc.Interval コンポーネントで 60秒ごとに自動更新

✅ コード全文

import dash
from dash import dcc, html
from dash.dependencies import Output, Input
import plotly.graph_objects as go
import speedtest

# Dash アプリの初期化
app = dash.Dash(__name__)
app.title = "Speed Test Dashboard"

# スピードテスト実行関数
def run_speed_test():
    try:
        st = speedtest.Speedtest()
        st.get_best_server()
        download = st.download() / 1_000_000  # Mbps
        upload = st.upload() / 1_000_000
        ping = st.results.ping
        return round(download, 2), round(upload, 2), round(ping, 2)
    except Exception as e:
        print("速度測定中にエラーが発生しました:", e)
        return 0, 0, 0

# ゲージグラフの生成関数
def create_gauge(title, value, color):
    return go.Figure(go.Indicator(
        mode="gauge+number",
        value=value,
        title={'text': title},
        gauge={
            'axis': {'range': [0, 200]},
            'bar': {'color': color},
            'steps': [
                {'range': [0, 50], 'color': "#f2f2f2"},
                {'range': [50, 100], 'color': "#d9f2ff"},
                {'range': [100, 200], 'color': "#a6dfff"},
            ]
        }
    ))

# Dash レイアウト構成
app.layout = html.Div([
    html.H1("リアルタイム スピードテスト", style={"textAlign": "center"}),

    html.Div([
        dcc.Graph(id="download-gauge", style={"display": "inline-block", "width": "45%"}),
        dcc.Graph(id="upload-gauge", style={"display": "inline-block", "width": "45%"})
    ], style={"textAlign": "center"}),

    html.H3(id="ping-display", style={"textAlign": "center", "marginTop": "20px"}),

    dcc.Interval(id="interval", interval=60 * 1000, n_intervals=0)  # 60秒ごとに更新
])

# コールバック関数：リアルタイム更新処理
@app.callback(
    [Output("download-gauge", "figure"),
     Output("upload-gauge", "figure"),
     Output("ping-display", "children")],
    [Input("interval", "n_intervals")]
)
def update_speed(n):
    download, upload, ping = run_speed_test()
    return (
        create_gauge("Download Speed (Mbps)", download, "blue"),
        create_gauge("Upload Speed (Mbps)", upload, "green"),
        f"Ping: {ping} ms"
    )

# ✅ 注意：Dash v3.0 以降は `app.run()` を使う！
if __name__ == '__main__':
    app.run(debug=True)  # ✅ ← これが正解！