コラム

CTC教育サービス・ホーム　＞　コラム　＞　Pythonでネットワーク自動化をしよう　＞　第38回　ネットワーク自動化実践レシピ（10）ダッシュボードの作成（5）

Pythonでネットワーク自動化をしよう

CTC 教育サービス

[IT研修]注目キーワード Python Power Platform 最新技術動向 生成AI Docker Kubernetes

第38回　ネットワーク自動化実践レシピ（10）ダッシュボードの作成（5） (小澤昌樹) 2025年9月

みなさん、こんにちは。

これまで第1回から第4回にかけて、ネットワーク機器の状態を効率的に把握・管理するための仕組みとして、

NAPALMやNetmikoによる情報取得
SQLiteデータベースへの保存
Excelレポートへの出力（OpenPyXL）
cronやタスクスケジューラによる定期自動実行

といった工程を段階的に解説してきました。

今回はそれらの集大成として、収集・蓄積したネットワーク機器の状態情報を、Webブラウザ上で視覚的に確認できるダッシュボードとして表示する方法を紹介します。

1. なぜダッシュボードが必要なのか？

情報収集やレポート出力は、手動で確認しにいかないと異常に気づきにくいという課題があります。こうした状況を改善するために有効なのが、常時モニタリングするダッシュボードです。ダッシュボードを活用すれば、CSVやExcelといった静的なレポートに頼らず、リアルタイムに近い感覚でネットワークの状態を把握することができます。また、ブラウザから簡単にアクセスできるインターフェースを整備することで、現場のオペレーターや管理者が即座に必要な情報へアクセスできる環境を整えることができます。

たとえば、

CPU使用率やメモリ使用率の推移をグラフで表示し、リソース逼迫の兆候を早期に察知する
インターフェーストラフィックの変化を追跡し、通信異常や輻輳の兆しを見逃さない
状況に応じたアラートや警告を画面上で視覚的に強調し、即時対応を促す

このようなリアルタイムの可視化によって、問題の早期発見と迅速な対応が可能になり、結果としてネットワーク全体の信頼性や安定性の向上にもつながります。

2. ダッシュボード構成の概要

今回構築するダッシュボードは、次のような構成です。

バックエンド：PythonのWebフレームワークのFlaskを使用し、SQLiteに保存されたデータを取得・提供するAPIを構築する
フロントエンド：HTMLとJavaScriptで作成し、Chart.jsなどのライブラリを使って、グラフ形式でデータを視覚的に表示する
データ更新：ネットワーク機器から情報を取得する自動収集スクリプトによりデータベースを定期的に更新し、ダッシュボードはその最新データを反映する

3. Flaskを使ったWebアプリ

今回は、SQLiteに蓄積されたネットワーク機器のリソース情報（CPU使用率とメモリ使用率）を、Webブラウザでグラフとして可視化するたします。以下がFlaskアプリ（app.py）です。

1. モジュールのインポート


from flask import Flask, render_template, jsonify
import sqlite3

2. Flaskアプリケーションの起動設定


 app = Flask(__name__)

Flaskのアプリケーションインスタンスを作成します。
__name__は現在のモジュール名です。Flaskがテンプレートの場所などを内部で把握するために使います。

3. SQLiteからデータを取得する関数


def fetch_latest_data():
    conn = sqlite3.connect(’network_monitor.db’)
    cur = conn.cursor()
    cur.execute(’’’
        SELECT timestamp, cpu_usage, memory_usage
        FROM device_status
        ORDER BY timestamp DESC
        LIMIT 20
    ’’’)
    data = cur.fetchall()
    conn.close()
    return data[::-1]  # 古い順に並べ替え

network_monitor.db は、CPUやメモリ使用率を保存しているSQLiteのデータベースファイルです。
直近20件の記録を取得し、古い順にソートして返すことでグラフ描画時に時系列で表示されるようにします。

4. ルーティング（URLと処理の紐づけ）

ルート（トップページ）


@app.route(’/’)
def index():
    return render_template(’dashboard.html’)

templates/dashboard.html というテンプレートを表示します。
実際のグラフはこのHTML内でChart.jsを使います。

data API（非同期でグラフ用データを取得）


@app.route(’/data’)
def data():
    rows = fetch_latest_data()
    result = {
        ’labels’: [r[0] for r in rows],
        ’cpu’: [r[1] for r in rows],
        ’memory’: [r[2] for r in rows]
    }
    return jsonify(result)

JavaScriptがこのURL（/data）にアクセスして、CPU・メモリ使用率のデータをJSON形式で取得します。

5. アプリの実行


if __name__ == ’__main__’:
    app.run(debug=True)

debug=True にすると、コード変更時に自動リロードされ、エラーメッセージも詳細に出力します。

4. HTMLテンプレート（Chart.jsによる可視化）

続いて、ネットワーク監視データ（CPU使用率・メモリ使用率）をブラウザ上でグラフ表示するためのHTMLテンプレートです。JavaScriptでデータを取得し、Chart.jsを使って描画します。


<!DOCTYPE html>
<html>
<head>
    <title>Network Monitor</title>
    <script src="<https://cdn.jsdelivr.net/npm/chart.js>"></script>
</head>
<body>
    <h1>ネットワーク状況ダッシュボード</h1>
    <canvas id="cpuChart" width="600" height="300"></canvas>
    <canvas id="memoryChart" width="600" height="300"></canvas>


    <script>
    async function loadData() {
        const res = await fetch(’/data’);
        const data = await res.json();


        const ctx1 = document.getElementById(’cpuChart’).getContext(’2d’);
        new Chart(ctx1, {
            type: ’line’,
            data: {
                labels: data.labels,
                datasets: [{
                    label: ’CPU Usage (%)’,
                    data: data.cpu,
                    borderColor: ’red’,
                    fill: false
                }]
            }
        });


        const ctx2 = document.getElementById(’memoryChart’).getContext(’2d’);
        new Chart(ctx2, {
            type: ’line’,
            data: {
                labels: data.labels,
                datasets: [{
                    label: ’Memory Usage (%)’,
                    data: data.memory,
                    borderColor: ’blue’,
                    fill: false
                }]
            }
        });
    }


    loadData();
    </script>
</body>
</html>

5. デプロイ

1. Flaskをインストール


 pip install flask

2. ファイル構成を作る

次のようなディレクトリ構成でファイルを作ります。


 network_dashboard/
├── app.py
└── templates/
    └── dashboard.html

3. アプリを実行

ターミナルで app.py のあるディレクトリに移動し、以下を実行します。


 python app.py

実行後、以下のように出力されたら、ブラウザで http://127.0.0.1:5000/ にアクセスします。ネットワークのCPU/メモリ使用率グラフが表示されます。


 * Running on <http://127.0.0.1:5000/> (Press CTRL+C to quit)

4. テストデータで試す

初回はネットワーク機器から収集したデータがないので、テストデータを投入して表示を確認してみましょう。
以下のPythonスクリプトを app.py のあるディレクトリに作成して実行してください。


import sqlite3
from datetime import datetime, timedelta
import random


conn = sqlite3.connect(’network_monitor.db’)
cur = conn.cursor()


cur.execute(’CREATE TABLE IF NOT EXISTS device_status (id INTEGER PRIMARY KEY, hostname TEXT, ip_address TEXT, timestamp TEXT, cpu_usage REAL, memory_usage REAL)’)


now = datetime.now()
for i in range(20):
    ts = (now - timedelta(minutes=5*i)).isoformat()
    cur.execute(’INSERT INTO device_status (hostname, ip_address, timestamp, cpu_usage, memory_usage) VALUES (?, ?, ?, ?, ?)’,
        (’router1’, ’192.168.1.1’, ts, random.uniform(5, 70), random.uniform(30, 90)))


conn.commit()
conn.close()

5. ブラウザでの表示例

テストデータを投入し、ブラウザで「http://127.0.0.1:5000/」にアクセスすると、以下のような画面が表示されます。

fig01

6. 機能拡張のアイデア

上記のように、開発環境では「python app.py」で動作確認できますが、本番で運用するには以下のような構成が望ましいです。

Flask + Gunicorn + nginx でサービス化
サーバーを常時起動
cronで定期データ更新 → ダッシュボードに反映

また、機能として以下のような拡張をすることができます。

インターフェーストラフィックの可視化
interface_trafficテーブル（第2回で作成）から、インターフェースごとの送受信バイト数を可視化することができます。
異常値の検出と強調表示
CPU使用率が90%を超えたら赤色で表示するといったアラートUIも追加可能です。
デバイス別のフィルター機能
複数の機器を管理している場合には、セレクトボックスで切り替えられるようにするとよいでしょう。