KOBESOFT | 組み込み・IoT開発

クラウド・プラットフォーム

ダッシュボード

センサーデータを可視化する画面。

概要

ダッシュボード（Dashboard）は、センサーデータ、デバイス状態、システム指標などをリアルタイムに視覚的に表示するWebアプリケーションまたは画面のことです。IoTシステムにおいてはデータ可視化の中核として機能し、膨大な数値データをグラフ、ゲージ、マップ、テーブルなどの形式に変換し、人間が直感的に把握できる情報として提示します。

IoTダッシュボードが提供する典型的な機能は以下の通りです。

  • リアルタイム更新: センサーデータが届くたびに自動更新（WebSocket/SSE）
  • 時系列グラフ: 時間の経過に伴う値の変化をライン/エリアチャートで表示
  • ゲージ・メーター: 現在値を視覚的に表示（温度計、スピードメーター風）
  • アラートパネル: 閾値超過デバイスや異常を色分けでハイライト
  • 地図ビュー: デバイスの位置情報をマップ上に表示（GNSS連携）
  • 集計サマリー: 全デバイスの稼働率、エラー率などのKPIを一覧表示
  • ドリルダウン: 全体表示から特定デバイスの詳細に掘り下げ

ダッシュボードはデータをただ表示するだけでなく、オペレーターが状況を把握し、異常を発見し、適切な対処を行うための意思決定支援ツールとしての役割も担います。

歴史・背景

工場や制御施設での「操作盤」「監視パネル」は古くから存在しましたが、デジタルダッシュボードの原型は1990年代の「管理者向けWebページ」でした。当時はHTMLの静的ページにメトリクスを表示する程度のものでした。

2000年代に「ビジネスインテリジェンス（BI）」ツールが普及し、Tableau、Qlik、Power BIなどがインタラクティブなデータ可視化を実現しました。並行してRRDtool + CactiやNagiosなど、ITインフラ監視向けのダッシュボードも発展しました。

2014年にGrafanaがOSSとして登場。InfluxDB、PrometheusなどのTSDBとシームレスに連携するパネルエディタと豊富なプラグインエコシステムにより、IoT・インフラ監視ダッシュボードのデファクトスタンダードとなりました。

2015年以降、IoT市場の拡大と共にAWS IoT Analytics Console、Azure IoT Central Dashboard、Googleのデータポータルなど、クラウドネイティブなIoTダッシュボードが相次いで登場しました。

2020年代には、3Dデジタルツインと連携したデジタルツイン・ダッシュボード（Unity/Unreal Engineベース）や、ARデバイスで工場設備の状態をオーバーレイ表示するAR/MRダッシュボードも実用化されています。

技術仕様

主要なIoTダッシュボードツールの比較

ツール種別特徴主なデータソース
GrafanaOSS/クラウド最も普及、プラグイン豊富InfluxDB、Prometheus、MySQL等50以上
KibanaOSS/商用Elasticsearch特化、ログ分析Elasticsearch
Node-REDOSSローコード、フロープログラミングMQTT、HTTP、各種センサー
AWS IoT Fleet HubマネージドAWS IoT Core完全統合AWS IoT Shadow
Azure IoT Centralマネージドコード不要、SaaS型Azure IoT Hub
ThingsboardOSS/商用IoT特化、ウィジェット豊富MQTT、HTTP、CoAP
FreeboardOSS軽量、JSONデータ向けHTTP/WebSocket

リアルタイム更新プロトコル

プロトコル仕組みメリットデメリット
WebSocket双方向持続接続低遅延、双方向サーバー負荷あり
SSE（Server-Sent Events）サーバーからのプッシュシンプル、HTTP互換単方向のみ
HTTP Polling定期的なGETリクエスト最もシンプル遅延あり、無駄なリクエスト
MQTT over WebSocketMQTTをWSでIoTとの直接連携ブラウザ側にMQTTクライアント必要

Grafana のデータモデル

Grafana Dashboard
├── Panel 1: 時系列グラフ（温度推移）
│     └── Query: InfluxDB → SELECT mean("temperature") FROM ...
├── Panel 2: ゲージ（現在の温度）
│     └── Query: InfluxDB → SELECT last("temperature") FROM ...
├── Panel 3: テーブル（デバイス一覧）
│     └── Query: InfluxDB → SELECT * FROM ... ORDER BY time DESC LIMIT 10
├── Panel 4: アラートリスト
│     └── Grafana Alerting → 閾値超過ルール評価
└── Panel 5: 地図（Geomap Plugin）
      └── Query: InfluxDB → SELECT last(lat), last(lon) FROM ...

動作原理

リアルタイムダッシュボードのアーキテクチャ

[デバイス層]
センサー → MQTT Publisher
     ↓ MQTT
[バックエンド]
MQTT Broker → Bridge → InfluxDB（時系列DB）
                ↓ WebSocket
[ダッシュボード]
Grafana（ブラウザ）← HTTP/WebSocket → Grafana Server
                                           ↓ InfluxQL/Flux
                                       InfluxDB

Grafana のアラートルール定義

# Grafana Alerting ルール（YAML設定）
groups:
  - name: IoT Alerts
    rules:
      - alert: HighTemperature
        expr: |
          from(bucket: "factory_data")
            |> range(start: -5m)
            |> filter(fn: (r) => r._measurement == "factory_sensor" and r._field == "temperature")
            |> mean()
            |> filter(fn: (r) => r._value > 80.0)
        for: 1m
        labels:
          severity: critical
        annotations:
          summary: "デバイス {{ $labels.device_id }} の温度が異常"
          description: "現在 {{ $value }}°C（閾値: 80°C）"

カスタムIoTダッシュボードの実装例

<!-- シンプルなリアルタイムダッシュボード（WebSocket + Chart.js） -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>センサーダッシュボード</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:20px; padding:20px;">
        <div>
            <h2>温度推移</h2>
            <canvas id="tempChart"></canvas>
        </div>
        <div>
            <h2>デバイス状態</h2>
            <div id="deviceStatus"></div>
        </div>
    </div>

    <script>
    // Chart.jsで時系列グラフを初期化
    const ctx = document.getElementById('tempChart').getContext('2d');
    const tempData = {
        labels: [],
        datasets: [{
            label: '温度 (°C)',
            data: [],
            borderColor: 'rgb(255, 99, 132)',
            fill: false
        }]
    };
    const chart = new Chart(ctx, {
        type: 'line',
        data: tempData,
        options: {
            animation: false,  // リアルタイム更新のためアニメーション無効
            scales: { y: { min: 0, max: 100 } }
        }
    });

    // MQTT over WebSocket でリアルタイムデータ受信
    const mqttClient = mqtt.connect('wss://mqtt-broker:9001');
    mqttClient.subscribe('factory/+/telemetry');

    mqttClient.on('message', (topic, payload) => {
        const data = JSON.parse(payload.toString());
        const deviceId = topic.split('/')[1];
        const now = new Date().toLocaleTimeString('ja-JP');

        // グラフ更新（最新60件を保持）
        if (tempData.labels.length > 60) {
            tempData.labels.shift();
            tempData.datasets[0].data.shift();
        }
        tempData.labels.push(now);
        tempData.datasets[0].data.push(data.temperature);
        chart.update();

        // デバイス状態パネル更新
        const statusDiv = document.getElementById('deviceStatus');
        const color = data.temperature > 80 ? 'red' : data.temperature > 60 ? 'orange' : 'green';
        document.getElementById(`device-${deviceId}`)?.remove();
        const div = document.createElement('div');
        div.id = `device-${deviceId}`;
        div.style.cssText = `padding:10px; margin:5px; background:${color}; color:white; border-radius:5px;`;
        div.textContent = `${deviceId}: ${data.temperature.toFixed(1)}°C`;
        statusDiv.appendChild(div);
    });
    </script>
</body>
</html>

用途・ユースケース

工場監視ダッシュボード

製造ラインの全設備の稼働状態、生産数量、品質データをリアルタイムで表示。異常発生時は色とアラート音で通知し、オペレーターが即座に対処できるようにします。「OEE（Overall Equipment Effectiveness）」などのKPIを算出して表示することも一般的です。

エネルギー管理ダッシュボード

ビルや工場のフロアごとの電力消費を棒グラフとヒートマップで可視化。太陽光発電量との相関、ピーク時間帯の特定、省エネ効果の測定などをワンストップで確認できます。

農業IoTダッシュボード

ほ場ごとの土壌水分、気温、CO2濃度を地図ビューで表示。灌漑制御の状態と天気予報データを組み合わせ、水やりのタイミングを最適化します。

医療機器管理ダッシュボード

病院フロアマップ上に医療機器の位置と稼働状態をリアルタイム表示。バッテリー切れ、校正期限切れ、メンテナンス要件をハイライトし、臨床エンジニアの業務効率を向上させます。

実装・開発のポイント

パフォーマンス最適化

大量のリアルタイムデータをブラウザで表示する場合、以下の最適化が重要です。

// 仮想スクロール: 数千行のデータを効率的に表示
// ダウンサンプリング: グラフ表示前にデータ点数を削減
function downsample(data, maxPoints) {
    if (data.length <= maxPoints) return data;
    const step = Math.ceil(data.length / maxPoints);
    return data.filter((_, index) => index % step === 0);
}

// バッチ更新: 頻繁な再描画を防ぐ（アニメーションフレームに同期）
let pendingUpdate = false;
function queueUpdate(newData) {
    updateBuffer.push(newData);
    if (!pendingUpdate) {
        pendingUpdate = true;
        requestAnimationFrame(() => {
            applyBufferedUpdates();
            pendingUpdate = false;
        });
    }
}

レスポンシブデザイン

工場の大型モニター、オフィスのPC、現場担当者のスマートフォン・タブレットなど、様々な画面サイズに対応したレスポンシブなダッシュボードが求められます。Grafanaではパネルの自動リサイズ、モバイル向けレイアウト設定が可能です。

権限制御

ダッシュボードへのアクセス権限を役割（Role）に応じて制御します。

管理者 → すべてのデバイス・設定変更可能
オペレーター → 担当ライン・部門のデータのみ閲覧可能
ゲスト → 集計サマリーのみ閲覧可能

他技術との比較

観点GrafanaThingsboardAWS Fleet HubAzure IoT Central
セットアップの容易さ中中高（AWSネイティブ）非常に高（ノーコード）
カスタマイズ性非常に高高低中
データソース50以上（汎用）IoT特化AWS IoT CoreのみAzure IoT Hubのみ
IoTウィジェットプラグインで対応標準で豊富限定的中程度
コストOSS無料（クラウドは有料）OSS/有料使用量課金使用量課金
スケーラビリティ高高非常に高（マネージド）非常に高（マネージド）

ダッシュボードは時系列データベースをデータソースとし、IoTプラットフォームから収集したセンサーデータを人間が理解できる形に変換します。フリート管理ダッシュボードは全デバイスの健全性を一覧し、デジタルツインと統合することで物理空間の3Dビジュアライゼーションも実現します。

関連用語

IoTプラットフォーム 時系列データベース デジタルツイン フリート管理 エッジコンピューティング AWS IoT Core Azure IoT Hub MQTT

参考リンク

Grafana 公式 Kibana（Elastic）公式 AWS IoT Fleet Hub Node-RED 公式
用語辞典トップへ戻る