見出し画像

ESP32 + Firebase Hostingで作るIoT Webダッシュボード

ya ikegami

はじめに

ESP32は、Wi-Fiを内蔵した安価で扱いやすいマイコンです。センサー値の取得、リレー制御、設備状態の監視など、IoT機器の試作や小規模システムに非常に向いています。

一方で、ESP32単体では「遠隔地から見やすく監視する画面」を作るのは少し大変です。そこで活用できるのが Firebase Hosting です。

Firebase Hostingを使うと、HTML / CSS / JavaScriptで作成したWebダッシュボードをインターネット上に公開できます。

この記事では、ESP32で取得したセンサーデータをFirebaseに送信し、Firebase Hosting上のWeb画面でリアルタイム表示するIoTダッシュボード の構成例を紹介します。

今回作るもの

今回の構成では、ESP32で温度・湿度などのセンサーデータを取得し、Firebaseのデータベースへ送信します。

Webダッシュボード側では、Firebaseからデータを読み取り、ブラウザ上に現在値を表示します。

イメージとしては、次のようなシステムです。

[ センサー ]
    ↓
[ ESP32 ]
    ↓ Wi-Fi
[ Firebase Realtime Database / Cloud Firestore ]
    ↓
[ Firebase Hosting上のWebダッシュボード ]
    ↓
[ PC / スマートフォンのブラウザ ]

ESP32は現場側のデータ収集装置、Firebaseはクラウド上のデータ保存・同期基盤、Firebase Hostingは表示画面の公開先、という役割分担になります。

Firebase Hostingとは

Firebase Hostingは、Webアプリケーションや静的サイトを公開するためのFirebaseの機能です。

HTML、CSS、JavaScriptで作成したWebページをFirebase Hostingにデプロイすることで、ブラウザからアクセスできるWebダッシュボードを公開できます。

Firebase Hosting自体は、ESP32から直接使う機能というより、ESP32がFirebaseへ送信したデータを人間が見るためのWeb画面を公開する場所 と考えると分かりやすいです。

つまり、ESP32とFirebase Hostingの関係は次のようになります。

ESP32 → Firebase Database → Webアプリ → Firebase Hosting

ESP32がFirebase Hostingにデータを送るのではなく、ESP32はFirebaseのデータベースにデータを書き込み、Firebase Hosting上のWebアプリがそのデータを読み取って表示します。

データベースはRealtime DatabaseかFirestoreを使う

IoTダッシュボードを作る場合、Firebase側のデータ保存先として主に次の2つが候補になります。

保存先

Firebase Realtime Databaseは、データをJSONとして保存し、接続中のクライアントとリアルタイムに同期できます。センサー値の現在値表示のような用途には扱いやすい構成です。

Cloud Firestoreは、Google Cloud基盤上の柔軟でスケーラブルなNoSQLデータベースで、Webアプリやサーバーサイド開発でも使いやすい構造になっています。

ESP32から現在値を送信して、Web画面にすぐ表示するだけであれば、まずは Realtime Database から始めると分かりやすいです。

システム構成例

今回は、次のような構成を想定します。

ハードウェア

  • ESP32開発ボード

  • BME280などの温度・湿度・気圧センサー

  • Wi-Fi環境

  • PCまたはスマートフォン

クラウド側

  • Firebaseプロジェクト

  • Firebase Realtime Database

  • Firebase Hosting

  • Firebase Web SDK

開発環境

  • Arduino IDE

  • Firebase対応Arduinoライブラリ

  • Node.js

  • Firebase CLI

  • HTML / CSS / JavaScript

Arduino環境からFirebaseを扱うライブラリとしては、ESP32やESP8266向けにFirebase関連機能を扱えるArduinoライブラリが公開されています。たとえば、mobizt氏のFirebaseClientはRealtime Database、Cloud Firestore、Firebase Storageなど複数のFirebase / Google Cloud製品を扱えるArduino向けライブラリです。

Firebase側で準備すること

まずFirebaseコンソールで新しいプロジェクトを作成します。

その後、以下を準備します。

  1. Realtime Databaseを有効化する

  2. Webアプリを追加する

  3. Firebase SDK設定情報を取得する

  4. Firebase Hostingを有効化する

  5. Firebase CLIをインストールする

Firebase Hostingの初期設定では、Firebase CLIを使ってプロジェクトの初期化とデプロイを行います。

データベース構造の例

IoTダッシュボードでは、最初はシンプルな構造にすると扱いやすくなります。

Realtime Databaseの場合、次のようなJSON構造にできます。

{
  "devices": {
    "esp32_001": {
      "temperature": 25.4,
      "humidity": 61.2,
      "pressure": 1012.5,
      "updatedAt": "2026-07-09 10:00:00"
    }
  }
}

この構造では、`esp32_001` というデバイスIDの下に、温度、湿度、気圧、更新時刻を保存しています。

複数台のESP32を扱う場合は、次のようにデバイスごとに分けます。

{
  "devices": {
    "esp32_001": {
      "temperature": 25.4,
      "humidity": 61.2
    },
    "esp32_002": {
      "temperature": 27.1,
      "humidity": 58.4
    }
  }
}

このようにしておくと、後から複数拠点や複数設備の監視に拡張しやすくなります。

ESP32側の役割

ESP32側では、主に次の処理を行います。

1. Wi-Fiへ接続する
2. センサー値を取得する
3. Firebaseへ接続する
4. Realtime Databaseへデータを書き込む
5. 一定周期で繰り返す

ESP32は、Web画面を直接表示する必要はありません。

ESP32の役割は、あくまで 現場データをクラウドへ送ること です。

たとえば、温度・湿度を5秒ごと、または1分ごとに送信します。

頻繁に送信しすぎると、通信量やデータベースの書き込み回数が増えるため、用途に応じて更新周期を決める必要があります。

ESP32側のArduinoコード例

以下は、ESP32からFirebase Realtime Databaseへセンサーデータを送信する処理のイメージです。

実際には、使用するFirebaseライブラリや認証方式に合わせてコードを調整してください。

#include <WiFi.h>

// Firebase用ライブラリは使用するものに合わせて追加する
// #include <FirebaseClient.h>

const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";

// Firebase設定
#define DATABASE_URL "https://your-project-id-default-rtdb.firebaseio.com/"
#define API_KEY "YOUR_FIREBASE_WEB_API_KEY"

float temperature = 25.4;
float humidity = 61.2;

void setup() {
  Serial.begin(115200);

  WiFi.begin(ssid, password);
  Serial.print("WiFi connecting");

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println();
  Serial.println("WiFi connected");

  // Firebase初期化処理
  // 使用するライブラリに合わせて記述
}

void loop() {
  // 実際にはここでBME280などから値を取得する
  temperature += 0.1;
  humidity += 0.1;

  Serial.print("Temperature: ");
  Serial.println(temperature);

  Serial.print("Humidity: ");
  Serial.println(humidity);

  // Firebase Realtime Databaseへ送信
  // 例:
  // /devices/esp32_001/temperature
  // /devices/esp32_001/humidity

  delay(5000);
}

ここではコードを簡略化しています。

実際の運用では、次の点を追加します。

  • Wi-Fi切断時の再接続処理

  • Firebase送信失敗時のリトライ処理

  • センサー読み取りエラー処理

  • NTPによる時刻取得

  • デバイスIDの管理

  • 認証情報の保護

Webダッシュボード側の役割

Webダッシュボード側では、Firebaseのデータベースを読み取り、ブラウザ画面に表示します。

構成はシンプルです。

public/
├── index.html
├── style.css
└── app.js

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ESP32 IoT Dashboard</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="dashboard">
    <h1>ESP32 IoT Dashboard</h1>

    <section class="card">
      <h2>温度</h2>
      <p><span id="temperature">--</span> ℃</p>
    </section>

    <section class="card">
      <h2>湿度</h2>
      <p><span id="humidity">--</span> %</p>
    </section>

    <section class="card">
      <h2>更新時刻</h2>
      <p id="updatedAt">--</p>
    </section>
  </main>

  <script type="module" src="app.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f4f6f8;
  color: #222;
}

.dashboard {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

h1 {
  text-align: center;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin: 16px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card h2 {
  margin-top: 0;
  color: #555;
}

.card p {
  font-size: 2rem;
  margin: 0;
}

app.js

Firebase Web SDKを使ってRealtime Databaseからデータを読み取ります。

import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
import {
  getDatabase,
  ref,
  onValue
} from "https://www.gstatic.com/firebasejs/10.12.0/firebase-database.js";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-project-id.firebaseapp.com",
  databaseURL: "https://your-project-id-default-rtdb.firebaseio.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

const deviceRef = ref(db, "devices/esp32_001");

onValue(deviceRef, (snapshot) => {
  const data = snapshot.val();

  if (!data) {
    return;
  }

  document.getElementById("temperature").textContent =
    data.temperature ?? "--";

  document.getElementById("humidity").textContent =
    data.humidity ?? "--";

  document.getElementById("updatedAt").textContent =
    data.updatedAt ?? "--";
});

`onValue()` を使うことで、Firebase Realtime Databaseの値が更新されたときに、Web画面側も自動的に更新できます。

これにより、ブラウザを手動で再読み込みしなくても、ESP32から送られた最新データを表示できます。

Firebase Hostingへデプロイする

Webダッシュボードを作成したら、Firebase Hostingへデプロイします。

まずFirebase CLIをインストールします。

npm install -g firebase-tools

ログインします。

firebase login

プロジェクトを初期化します。

firebase init hosting

公開ディレクトリには、今回の場合 `public` を指定します。

What do you want to use as your public directory? public

その後、デプロイします。

firebase deploy

デプロイが完了すると、Firebase HostingのURLが表示されます。

そのURLへアクセスすると、ESP32のデータを表示するWebダッシュボードを確認できます。

セキュリティ上の注意点

IoTシステムでは、セキュリティ設定が非常に重要です。

特に注意すべき点は次の通りです。

1. データベースを全公開にしない

テスト目的で以下のようなルールにすることがあります。

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

しかし、この設定は誰でも読み書きできる状態になるため、公開環境では危険です。

本番運用では、Firebase Authenticationやデータベースルールを使って、読み取り・書き込み権限を制限する必要があります。

2. ESP32に重要な秘密情報を埋め込まない

ESP32のプログラム内にAPIキーや認証情報を記述する場合、ファームウェアを読み取られるリスクを考慮する必要があります。

個人の試作であれば許容できる場合もありますが、製品や外部公開システムでは、認証設計を慎重に行うべきです。

3. 書き込み周期を適切にする

センサー値を1秒未満の短周期でクラウドへ送信すると、通信量やデータベース負荷が増えます。

温度・湿度のように変化が緩やかなデータであれば、5秒、10秒、1分など、用途に応じた周期にするのが現実的です。

応用例

ESP32 + Firebase Hostingの構成は、さまざまなIoT用途に応用できます。

設備の稼働状態モニター

ESP32で入力信号を監視し、設備の運転中、停止中、異常停止などの状態をFirebaseへ送信します。

Webダッシュボードでは、現在の稼働状態や停止時間を表示できます。

温湿度監視システム

BME280やSHT31などのセンサーを使い、室内、倉庫、制御盤内の温湿度を監視します。

しきい値を超えた場合に、画面上で警告表示することもできます。

電力・電流モニター

電流センサーや電力量計から取得した値をESP32で読み取り、Firebaseに送信します。

Web画面では、現在の消費電力や簡易グラフを表示できます。

スマート農業向けモニター

土壌水分、気温、湿度、照度などをESP32で取得し、Webダッシュボードで確認します。

離れた場所からハウス内の状態を確認する用途に向いています。

リモート制御パネル

WebダッシュボードにON/OFFボタンを追加し、Firebase上の制御フラグを書き換えます。

ESP32側がそのフラグを読み取り、リレーやLEDを制御することで、簡易的な遠隔操作システムを作れます。

この構成のメリット

ESP32 + Firebase HostingによるIoT Webダッシュボードには、次のメリットがあります。

  • 自前でWebサーバーを用意しなくてよい

  • ブラウザだけで監視画面を確認できる

  • PC、スマートフォン、タブレットからアクセスできる

  • Firebaseのデータ同期機能を利用できる

  • 小規模なIoT試作を短時間で作れる

  • HTML / CSS / JavaScriptで画面を自由に作れる

特に、IoTの試作段階では、サーバー構築に時間をかけずに「まず動くもの」を作れる点が大きな利点です。

注意すべき点

一方で、以下のような点には注意が必要です。

  • Firebaseの料金体系を確認する

  • データベースルールを適切に設定する

  • ESP32の認証情報の扱いに注意する

  • 通信が切れた場合の処理を入れる

  • 長期保存データと現在値データを分けて設計する

  • 本格運用ではログ保存や異常通知の設計も必要

特に、現在値だけを表示する用途と、過去データを長期間保存する用途では、データベース設計が変わります。

最初は現在値表示だけで作り、次の段階で履歴保存やグラフ表示を追加するのが進めやすいです。

まとめ

ESP32とFirebase Hostingを組み合わせることで、比較的簡単にIoT Webダッシュボードを作ることができます。

重要なのは、Firebase Hostingの役割を正しく理解することです。

Firebase Hostingは、ESP32のデータ送信先ではありません。

ESP32はFirebase Realtime DatabaseやCloud Firestoreへデータを書き込み、Firebase Hosting上のWebアプリがそのデータを読み取って表示します。

この構成を使えば、次のような流れでIoTシステムを作れます。

ESP32でセンサー値を取得
↓
Firebaseへデータ送信
↓
Webアプリでデータ取得
↓
Firebase Hostingで画面公開
↓
スマートフォンやPCから確認

まずは、温度・湿度などの簡単なセンサー値を表示するところから始めるとよいでしょう。

そこから、グラフ表示、異常通知、複数デバイス対応、遠隔制御などへ発展させることができます。

ESP32とFirebaseは、IoTの試作や個人開発において非常に相性のよい組み合わせです。

いいなと思ったら応援しよう！

ya ikegami 応援、よろしくお願いいたします。