以前の記事でM5Stackと温度センサを使った気温計の作り方を紹介しました。
この気温計はM5Stackのディスプレイに表示するシンプルなものでした。M5StackにはWiFiが備わっていますので、せっかくなら離れた位置からPCやスマホで確認したいですよね。
今回、M5StackをWebサーバー化し、M5Stackで計測した温度データをPCやスマホから確認出来るシステムを作ったので紹介します。
M5Stackを屋外に置いて、外の気温も離れた位置から確認出来るようになって便利です。
こんな人におすすめ!
- M5Stackを使って温度データ計測したい人
- M5StackをWebサーバーにしてPCやスマホからデータ確認したい人
準備したもの
- M5Stack Basic
- 温度センサ ADT7410
- ジャンパワイヤ オス-メス
- WiFiルーター
- PCまたはスマホ
システム構成
システム構成は下図になります。M5StackとADT7410がジャンパワイヤで接続されています。M5StackはADT7410から温度データを受信します。この温度データをWiFiルーターを経由してPCやスマホから確認します。

まずはプログラム全体像を把握しよう
M5StackをWebサーバー化し、M5Stackで計測した温度データをPCやスマホから確認出来るようにするプログラムです。それぞれのコードが何をしているかは後ほど解説します。
尚、温度センサの温度を読み取るプログラム「TempMeasurement()」部の解説は今回割愛します。知りたい方は以前の記事も是非読んで下さい。

#include <M5Stack.h>
#include <WebServer.h>
#include <ESPmDNS.h>
int address = 0x48; // ADT7410温度センサのアドレス
const char* ssid = "**********";
const char* password = "**********";
WebServer server(80); // WebServerオブジェクト作成
float temp;
void handleRoot();
void handleTemp();
void handleNotFound();
void WiFiConnect();
float TempMeasurement();
void setup() {
M5.begin();
M5.Lcd.setTextSize(2);
// 内部プルアップ抵抗有効化
pinMode(21, INPUT_PULLUP);
pinMode(22, INPUT_PULLUP);
Serial.begin(9600); // 通信速度を9600bpsに設定
Wire.begin(); // I2Cバスにマスタとして接続
WiFiConnect(); // WiFi接続
//マルチキャストDNSにホスト名を登録
if(MDNS.begin("m5stack")){
M5.Lcd.println("MDNS responder started");
}
server.on("/", handleTemp); // URLにアクセスされた際の動作を登録
server.onNotFound(handleNotFound); // server.onで登録されていないURLにアクセスされた際の動作を登録
server.begin(); // クライアントからの接続応答待ちを開始
M5.Lcd.println("HTTP server started");
}
void loop() {
server.handleClient();
}
void WiFiConnect(){
WiFi.begin(ssid,password);
while(WiFi.status() != WL_CONNECTED){
delay(500);
M5.Lcd.print('.');
}
M5.Lcd.print("\r\nWiFi connected\r\nIP address: ");
M5.Lcd.println(WiFi.localIP());
}
void handleTemp(){
char buf[400];
temp = TempMeasurement();
sprintf(buf,
"<html>\
<head>\
<title>Temperature Measurement</title>\
</head>\
<body>\
<h1>M5Stack ADT7410 Temperature Measurement</h1>\
<p>Temp: %.2f 'C</p>\
</body>\
</html>",
temp);
server.send(200, "text/html", buf);
M5.Lcd.println("accessed on \"/\"");
}
void handleNotFound(){
server.send(404, "text/plain", "File Not Found\n\n");
M5.Lcd.println("File Not Found");
}
float TempMeasurement(){
uint16_t data;
float temp;
Wire.requestFrom(address, 2); // ADT7410に2byteのデータを要求
data = Wire.read() << 8; // 1byte分読み取りし、1byte左シフト
data |= Wire.read(); // 1byte分読み取りし、前回値に加算
data >>= 3; // 3bit右シフト
if(data & 0x1000){ // bit 12が1のとき
temp = (float)(data-8192) / 16.0; // 負の温度換算
}
else{
temp = (float)data / 16.0; // 正の温度換算
}
return temp;
}
プログラム解説
WiFi接続方法
WiFi接続方法について解説します。
WiFi接続する関数を使うにはWiFiライブラリを呼び出す必要があります。
#include <WiFi.h>
WiFi接続するにはWiFi.begin()関数を呼び出します。第1引数は、SSIDです。第2引数はパスワードになります。
WiFi.begin(ssid,password);
マルチキャストDNSにホスト名を登録
http://192.168.0.xxxといったようにIPアドレスを打たなくてもhttp://m5stack.localと打つだけでm5stackにアクセスできるようになります。
マルチキャストDNSを開始する関数を使うにはESPmDNSライブラリをインクルードする必要があります。
#include <ESPmDNS.h>
MDNS.begin()は、マルチキャストDNSにホスト名を登録する関数です。引数にホスト名を指定します。
MDNS.begin("m5stack")
Webサーバーの立て方
次はWebサーバーの立て方について解説します。
まず、Webサーバーを立てるのに必要な関数を使用出来るようWebServerライブラリを呼び出します。
#include <WebServer.h>
続いてWebServerオブジェクトを作成します。server()の引数はポート番号です。Web通信のポート番号は通常「80」です。
WebServer server(80);
次はURLにアクセスされた際の処理をserver.on()で登録していきます。第1引数はURLです。今回は「”/”」と指定しました。第2引数はアクセスされた際の処理です。M5Stackで温度データを取得し返信する「handleTemp」を登録しました。
server.on("/", handleTemp);
server.onNotFound()は、server.on()で登録されていないURLにアクセスされた際の処理を登録です。
server.onNotFound(handleNotFound);
URLにアクセスされた際の処理を登録したら、クライアントからの接続応答待ちを開始しましょう。sever.begin()を呼び出します。
server.begin();
server.handleClient()は、登録した情報に従ってクライアントからのリクエストを処理する関数です。loop()の中で呼び出します。
server.handleClient();
server.send()はクライアントにレスポンスを送信する関数です。
server.send(200, "text/html", buf);
測定した温度をPCから確認してみよう
まず、M5StackがWiFiに接続されていることを確認します。IP addressが表示されていたらWiFi接続完了です。
次にマルチキャストDNSにホスト名が登録されたことを確認して下さい。「MDNS responder started」と表示されていれば完了です。
最後にWebサーバーが立ち上がっていることを確認しましょう。「HTTP server started」と表示されていればOKです。
さあ、M5Stack側の準備が出来ました。

WebブラウザのURL入力欄に「http://m5stack.local/」と打ち込みましょう。
M5Stack側から測定した温度データが表示されるはずです。

念のため、IPアドレスでも同じようにM5Stackからレスポンスが返ってくるか確認しましょう。
まとめ
今回は、M5StackをWebサーバー化し、M5Stackで計測した温度データをPCやスマホから確認出来るシステムの作り方を紹介しました。
これならM5Stackを屋外に置いて、外の気温も離れた位置から確認が可能です。
興味を持たれた方は是非挑戦してみて下さい。
最後までお読み頂きありがとうございました。
私はスイッチサイエンスさん(Amazon)でM5Stackを買いました。
書籍もKindleストアで「みんなのM5 Stack入門」を購入し、読みながら勉強してまーす。