Arduino IDEのスケッチ例【HelloServer】を使ってみる

ポイントArduino IDEの中にあるスケッチ例を使って、M5Stackをサーバー化し、PCのプラウザから接続してみたいと思います。

→Arduino IDEのインストールなどについてはこちら

【参考書籍】

セキュリティー対策強力なセキュリティーの面でも海外移住や旅行の際にも必須のサービスがVPN。
例えば有名なプラットフォームであるnoteなんかも日本のIPアドレスじゃないと使えません。
そういうサイト実は結構多いです。
VPNを使えば海外にいてもあなたは日本にいるのと同じネットワークでアクセスできるため大変便利です。
筆者も長年使っているNordVPNがおすすめ!

【ポイント】mDNS

multicast DNSというサーバーも同時に起動していますので、IPアドレスで接続する必要はなく、任意の文字列でアクセスすることができます。

if (MDNS.begin("m5stack")) {
         M5.Lcd.println("MDNS responder started");
     }

M5stackの場合は、モニターがついているので、割り当てられたIPアドレスを目視で確認することができます。

そのため、もちろんローカルサーバーの場合はIPアドレスで接続すればいいのですが、名前を任意で設定できた方が管理がしやすいのではないでしょうか?

それに、ラズパイなどのモニターレスのデバイスで動かす場合などに備えてしっかりと、mDNSで使いたいですよね。

というわけで、mDNSを使い、任意アドレスを設定します。

サンプルコードではm5stackとしていますが、もちろんプロジェクトや、管理目的別に名前を設定してOKです。

スケッチ例

Arduino IDEを起動し、ファイル→スケッチ例→Web Server→Hello Serverを呼び出しましょう。

すると、スケッチ例が出てきます。

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>

const char* ssid = "........";
const char* password = "........";

WebServer server(80);

const int led = 13;

void handleRoot() {
  digitalWrite(led, 1);
  server.send(200, "text/plain", "hello from esp8266!");
  digitalWrite(led, 0);
}

void handleNotFound() {
  digitalWrite(led, 1);
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  digitalWrite(led, 0);
}

void setup(void) {
  pinMode(led, OUTPUT);
  digitalWrite(led, 0);
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (MDNS.begin("esp32")) {
    Serial.println("MDNS responder started");
  }

  server.on("/", handleRoot);

  server.on("/inline", []() {
    server.send(200, "text/plain", "this works as well");
  });

  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
}

今回はM5stackで使うので、必ず

#include <M5Stack.h>

を宣言しましょう。

#include <M5Stack.h>
#include <WiFi.h>
#include <WebServer.h>
#include <ESPmDNS.h>

const char* ssid = "・・・・・・・";
const char* password = "・・・・・・";

WebServer server(80);

void handleRoot() {
  server.send(200, "text/plain", "hello from M5Stack!");
  M5.Lcd.println("accessed on \"/\"");
}


void handleNotFound() {
  server.send(404, "text/plain","File Not Found\n\n");
  M5.Lcd.println("File Not Found");
}


void setup(void) {
     M5.begin();

     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());

     if (MDNS.begin("m5stack")) {
         M5.Lcd.println("MDNS responder started");
     }


     server.on("/", handleRoot);
     server.onNotFound(handleNotFound);

     server.begin();
     M5.Lcd.println("HTTP server started");
}
  
void loop(void) {
  server.handleClient();
}

考えられるエラー

筆者はここで4時間格闘しました。

PCは有線接続でしたので、スマホでチェックしていました。

スマホでチェックしていけたらPCでもいけるだろうと踏んで・・・

しかし、エラー、そしてまたエラー。

悩みに悩んで、割り当てられたIPアドレスで接続を試みると成功。

ということは、mDNSまでのプログラムは機能しているというわけです。

問題はmDNSがうまくいっていない。

何度も何度もデバッグ作業・・・

しかし、mDNS以外のプログラムは正常に動作している。

そこで調べてみると・・・

androidはmDNSに対応していないとの情報が・・・

早速PCの有線をWiFiに切り替えてトライしてみると、あったりとmDNS接続完了。

無事にM5stackのローカルサーバー化に成功しました。

あとは、printf関数で、表示させたい文字をHTMLで入力していくだけ。

温度計や湿度計の計測結果などもM5Stackに表示させるのであれば通常のテキストで良いですが、プラウザに表示させるのであればHTMLが必須になります。

デバッグチェックポイント

・wwwになっていないか?
→もちろんローカルサーバーですので世界と繋がる必要はありません。

・androidからアクセスしてないか?
→androidはmDNS変換に対応していないそうです。

・割り当てられたIPアドレスから接続できるかどうか?
→バグの可能性を潰していきましょう。

次回はprintfでHTMLを表示させてみたいと思います。

こちらの記事もいかがですか?
プログラミングやテクノロジーに関する記事をまとめています!

icon image
当スタジオでのアクセスNO1!
Google検索ランキングで1位獲得実績ありの人気記事!

M1 Mac以降の Python 環境構築 [完全保存版]

ほぼ英語クラスの馴染みやすさが人気のPythonの全体像をほぼ1記事で理解できるのはこれ!

まずはこれだけ Python基礎からサンプルプログラムまで一気に進める記事

いつもチェックする日課の記事やサイト、ページなどがあればセレニウムを使用してかなり細かく動作を自動化することができます。

Seleniumを使ってGoogle検索 ~ サイトの巡回までをプログラムする

Xサーバーをモデルにしています。
APIで自動トレードシステムなんかを構築したい場合は24時間働き続けてくれるスタイルが必須ですよね。

Xserver SSH接続の設定とAnaconda3のインストール

ポイント当サイトもエックスサーバーで構築しています。
速度が早いのと対応も丁寧で老舗なのでおすすめのサーバーの一つです。
サーバーをこれから開設する方は是非VPNも契約しておきましょう。
レンタルサーバー エックスサーバー コンパイル言語も忘れないで!
少し知っているだけで見える世界が全然変わってきます。

【環境構築】Rust M1 Mac / コンパイル言語

プロフィール

こうたろう
こうたろう
音大を卒業後ピアニストとして活動。
日本で活動後北欧スウェーデンへ。
アーティストLindha Kallerdahlと声帯とピアノによる即興哲学を研究。
その後ドイツ・ケルンに渡りAchim Tangと共にアルバム作品制作。
帰国後、金田式DC録音の第一人者:五島昭彦氏のスタジオ「タイムマシンレコード」にアシスタントとして弟子入り。
独立後音楽レーベル「芸術工房Pinocoa(現:Kotaro Studio)」を結成。
タンゴやクラシックなどアコースティック音楽作品を多数プロデュース。
大阪ベンチャー研究会にて『芸術家皆起業論~変化する社会の中、芸術家で在り続けるために』を講演。
その後、秋山庄太郎氏後継の写真スタジオ「村上アーカイブス」でサウンドデザイナー兼音響担当として映像制作チームに参加。
村上宏治氏の元で本格的に写真、映像技術を学ぶ。
祖父母の在宅介護をきっかけにプログラムの世界に興味を持ち、株式会社 ジオセンスの代表取締役社長:小林一英氏よりプログラムを学ぶ。
現在はKotaro Studioにて『あなたのためのアートスタジオ』音と絵をテーマに芸術家として活動中。
2023年より誰かのための癒しの場所『Curanz Sounds』をプロデュース。