Arduino Nesso N1の使い方：Wi-Fi通信編

「Arduino Nesso N1」でWi-Fi通信を使用してスマホやパソコンのブラウザから遠隔操作する方法をサンプルプログラムを使用して詳しく紹介します。

「Nesso N1」をサーバーに設定して、自宅のWi-Fiに接続することで、Wi-Fi通信の届く範囲ならどこからでも遠隔操作することができます。
今回はスマホ等のブラウザ経由で「Nesso N1」本体内蔵のLEDをON／OFFさせる「遠隔Lチカ」の動作確認を行います。

「Nesso N1」は複数の通信に対応しており、Wi-Fiの他にBluetooth（BLE）、Thread／Matter、LoRaも使用できるため、通信編として順番に動作紹介していきます。
まずはWi-Fi通信の使い方について詳しく紹介します。

Arduinoコマンドを使用した「Wi-Fi（ローカル接続、サーバー）で遠隔操作する方法」は、以下のリンクで詳しく紹介しています。

WiFi（ローカル接続、サーバー）で遠隔操作する方法（Arduinoプログラミング）

Wi-Fi通信でスマホから遠隔操作を行う方法を詳しく紹介。サーバーの仕組みを利用することで簡単にブラウザからの遠隔操作が実現できます。ATOM LITE使用

M5Stack&M5StickCではじめるIoT入門

シーアンドアール研究所

＜目次＞
１．Arduino Nesso N1について
２．開発環境の準備
　・Arduino IDEのインストール
　・ボードマネージャライブラリのインストールと初期設定
　・シリアルモニタ出力設定
３．動作紹介
４．サンプルプログラム
　・①ブラウザ経由で遠隔Lチカ
　・②遠隔Lチカ＋LEDの状態確認（遠隔監視）
５．Wi-Fi通信について
６．まとめ

１．Arduino Nesso N1について

「Arduino Nesso N1」は、「Arduino」と「M5Stack」が共同開発したオールインワンIoT開発ボードで、ESP32-C6を搭載し、Wi-Fi 6・Bluetooth 5.3・Thread/Zigbee・LoRaなど複数の通信規格に対応する次世代デバイスです。

1.14 インチの LCD タッチスクリーン、6軸 IMU センサー、2つのプログラマブルボタン、LED、ブザー、充電式バッテリーまで内蔵し、GroveコネクタとQwiicコネクタも搭載しています。
さらに、「M5StickC Plus／Plus2」と同一寸法、同一端子配列で、完全上位互換機としてHATユニット等を使用した高機能なIoTデバイスをこれ1つで実現することができます。

「Nesso N1」の仕様や端子配列、基本的な使い方については、以下のリンク先で詳しく紹介しています

Arduino Nesso N1の使い方：基礎編

Arduino Nesso N1(M5StickC Plus互換)の開発環境やライブラリのインストール、端子配列や機能をサンプルプログラムを使って詳しく紹介

２．開発環境の準備

「Nesso N1」を使用するために必要な開発環境とライブラリ等のインストール、初期設定について詳しく紹介します。

・Arduino IDEのインストール

「Arduino IDE」のインストール方法は、以下のリンクで詳しく紹介しています。

Arduino IDE 2のインストール方法、初期設定、使い方

バージョンアップして使いやすくなったArduino IDE 2のインストールから使い方まで詳しく紹介、便利な機能やM5Stack、ラズパイPicoでの使用方法も紹介します。

・ボードマネージャ、ライブラリのインストールと初期設定

「Arduino IDE」のインストールが完了して起動したら、下画像のように左メニューアイコンから［ボードマネージャ］を選択し、検索窓に「ESP32」と入力すると「esp32 by Espressif」が表示されるため、これをインストールします。

次に以下表のライブラリをインストールします。

ライブラリ名	用途	バージョン	検索名
M5Unified	M5Stack共通ライブラリ	0.2.11	M5Unif
M5GFX	液晶画面制御用	0.2.19	M5G

「M5Unified」は「M5Stackシリーズ」の共通ライブラリで「Nesso N1」にも対応しており、他の「M5Stackシリーズ」と同じように使用できるようになります。
「M5GFX」ライブラリは液晶画面を制御するためのライブラリです。

バージョンは基本的に最新のものをインストールしてください。
ここで紹介している「サンプルプログラム」が動作しない場合は上表のバージョンで動作確認してみてください。

下画像のように左メニューアイコンから［ライブラリマネージャ］を選択して検索窓に「m5unified（m5unifまででも良い）」と入力すると「M5Unified by M5Stack」が表示されるため、これをインストールします。

［インストール］をクリックすると下画像のようなウインドウが表示されます。

「M5Unified」の動作に必要なライブラリ（M5GFXも含む）がインストールできるため
［全てをインストール］をクリックします。

M5Stack&M5StickCではじめるIoT入門

シーアンドアール研究所

次に「NESSO N1」とパソコンをUSBケーブルでパソコンと接続します。

接続したら、下写真のようにメニューバーの［ツール］→［ボード：”ESP32 Familly Device”］→［esp32］→［Arduino Nesso N1（最下部）］をクリックしてください。

パソコン側で「NESSO N1」の接続が認識されると、下画像のように画面上部に「Arduino Nesso N1」と表示されます。

接続が認識されない場合は本体左側面の電源ボタンを長押し（内部の小さい青色LEDが点滅するまで）してから再度試してみてください。
それでもうまくいかない場合は［ツール］→［ポート：”COM番号は環境によります”］の選択で他のポートを選択して試してみてください。

・シリアルモニタ出力設定

最後に初期設定として、「Arduino IDE」のシリアルモニタ機能で「Nesso N1」からのシリアル出力を表示するための設定を行います。

下画像のように［ツール］→［USB CDC On Boot：”Disabled”］→［Enabled］を選択します。

「Nesso N1」は他のArduinoシリーズとは異なり「USBーSerial」変換チップを搭載していません。このためマイコン自身がシリアル通信機器として振る舞う必要があります。
「USB CDC On Boot」が「Disabled」の場合は電源ON時にこの機能が無効になっているため「Enable」にしておかないとシリアル通信機器として認識されずシリアル出力を行なっても何も表示されません。

３．動作紹介

次に、この後紹介するサンプルプログラムを実行した時の動作について紹介します。

まず「Nesso N1」が起動すると下画像のように、Wi-Fi接続先（プログラム内で設定）への接続が開始されます。

接続が完了すると「IPアドレス」が表示されます。（下画像では［192.168.0.168］※環境により異なります。）

表示された「IPアドレス」をブラウザのアドレスバーに入力してEnterキーを押します。

上画像のように「Nesso N1」に埋め込まれている「Webページ」が表示されます。
ページ内の「ON／OFFボタン」で「Nesso N1」本体のLEDをON／OFFできます。

今回は2つのサンプルプログラムで、以下のように表示される「Webページ」が異なります。

①はシンプルなページで、「Nesso N1」本体LEDをON／OFFする遠隔操作だけです。

②はLEDの遠隔操作と、LEDの状態も確認（遠隔監視）することができます。
本体側の操作でLEDの状態が変更されても、ブラウザ側で変更した内容が確認できます。

「Nesso N1」本体のLEDは電源ボタンの奥にあり見えにくいですが、点灯状態は上画像のようになります。

実際に動作確認している様子は以下になります。
ブラウザページの［ONボタン］を押すと、「Nesso N1」本体のLEDが点灯し、液晶画面上に「LED ON!」が表示されます。

ブラウザページの［OFFボタン］を押すと、「Nesso N1」本体のLEDが消灯し、液晶画面上に「LED OFF!」が表示されます。

「Nesso N1」本体の正面ボタンを押すとLEDが点灯し、ブラウザページの「LED状態：」は「ON」になります。
同様に「Nesso N1」本体の右側面ボタンを押すとLEDが消灯し、ブラウザページの「LED状態：」は「OFF」になります。

M5Stack&M5StickCではじめるIoT入門

シーアンドアール研究所

４．サンプルプログラム

サンプルプログラムを実行するには、ご自宅のWi-Fi接続情報を設定する必要があります。
サンプルプログラム内の「接続先SSID」と「接続先パスワード」はご自身の環境に合わせて設定してください

・①ブラウザ経由で遠隔Lチカ

遠隔操作のみのサンプルプログラムは以下になります。
コピペで貼り付けて実行してください。コピーは下の黒塗り部右上のアイコンクリックでもできます。

#include <M5Unified.h>  // M5Stackシリーズ共通ライブラリ
#include <WiFi.h>       // Wi-Fi接続用
#include <WebServer.h>  // サーバー設定用
#include <Wire.h>       // Wire制御用（書かないとエラーになったため記入）

// Wi-Fiローカル接続先設定
const char ssid[] = "ご自身の環境に合わせて設定"; // 接続先SSID
const char pass[] = "ご自身の環境に合わせて設定"; // 接続先パスワード

// サーバー設定ポート80で接続
WebServer server(80);
// htmlメイン画面データ　※R"HTML(この中の文字列は改行は無視され連続した文字列として扱われる)HTML"
char html[] = R"HTML(
  <!DOCTYPE html>
  <html lang="jp">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>REMOTE-SWITCH</title>
  </head>
    <body style="text-align: center;">
      <h1>REMOTE-SWITCH</h1>
      <div>
        <button style="height:50px" onclick="location.href='/get/btn_on'">　ON　</button>
        <button style="height:50px" onclick="location.href='/get/btn_off'">　OFF　</button>
      </div>
    </body>
  </html>
)HTML";

// ルートアクセス時の応答関数
void handleRoot() {
  server.send(200, "text/html", html);  // レスポンス200を返しhtml送信
}
// エラー（Webページが見つからない）時の応答関数
void handleNotFound() {
  server.send(404, "text/plain", "404 Not Found!");  // text送信
}
// ブラウザONボタン処理
void btnOn() {
  Serial.println("LED ON!");       // シリアル出力
  M5.Display.fillScreen(TFT_BLUE); // 画面青塗り
  M5.Display.setTextColor(TFT_WHITE, TFT_BLUE); // 文字色と背景色指定
  M5.Display.setCursor(70, 55);    // 表示座標設定(x, y)
  M5.Display.println("LED ON!");   // 画面出力

  auto& ioe = M5.getIOExpander(1); // I/OエキスパンダーE1のオブジェクトを取得
  ioe.digitalWrite(7, false);      // 本体LED点灯（E1.P7）
  server.send(200, "text/html", html);  //レスポンス200を返しhtml送信
}
// ブラウザOFFボタン処理
void btnOff() {
  Serial.println("LED OFF!");      // シリアル出力
  M5.Display.fillScreen(TFT_RED);  // 画面赤塗り
  M5.Display.setTextColor(TFT_WHITE, TFT_RED); // 文字色と背景色指定
  M5.Display.setCursor(70, 55);    // 表示座標設定(x, y)
  M5.Display.println("LED OFF!");  // 画面出力

  auto& ioe = M5.getIOExpander(1); // I/OエキスパンダーE1のオブジェクトを取得
  ioe.digitalWrite(7, true);       // 本体LED消灯（E1.P7）
  server.send(200, "text/html", html);  //レスポンス200を返しhtml送信
}

// 初期設定 *****************************************
void setup() {
  auto cfg = M5.config();       // M5Unified設定取得
  cfg.serial_baudrate = 115200; // シリアル出力初期化(ArduinoIDEでツール → USB CDC On Boot を「Enable」にしておく)
  M5.begin(cfg);                // M5Unified初期化
  delay(500); // シリアル出力安定待ち

  // Wi-Fi接続開始
  WiFi.begin(ssid, pass); //Wi-Fiローカル接続開始

  // 液晶画面初期設定
  M5.Display.begin(); // M5.Display初期化
  M5.Display.setRotation(1);                     // 画面向き設定（USB位置基準 0：下/ 1：右/ 2：上/ 3：左）
  M5.Display.setTextColor(TFT_WHITE, TFT_BLACK); // 文字色と背景色指定
  M5.Display.setFont(&fonts::Font4);             // フォント指定
  M5.Display.setTextSize(1);                     // 文字サイズ（整数倍率）

  // 初期画面表示
  M5.Display.fillScreen(TFT_BLACK); // 画面クリア（黒塗り）
  M5.Display.setCursor(0, 0);       // 表示座標設定(x, y)
  M5.Display.printf("Connect to \n%s\n", ssid); // SSID画面出力
  Serial.printf("Connect to \n%s\n", ssid);     // SSIDシリアル出力

  // Wi-Fi接続完了待ち
  while (WiFi.status() != WL_CONNECTED) { // 接続完了するまで繰り返す
    M5.Display.print("."); //「.」画面出力
    Serial.print(".");     //「.」シリアル出力
    delay(500);            // 0.5秒待機
  }

  // Wi-Fi接続情報表示
  M5.Display.fillScreen(TFT_BLACK);     // 画面クリア（黒塗り）
  M5.Display.setCursor(0, 0);           // 表示座標設定(x, y)
  M5.Display.printf("SSID:%s\n", ssid); // SSID
  M5.Display.println("IP address: ");
  M5.Display.setTextColor(TFT_ORANGE, TFT_BLACK); // 文字色と背景色指定
  M5.Display.println(WiFi.localIP());   //IPアドレス（配列）
  M5.Display.setTextColor(TFT_WHITE, TFT_BLACK); // 文字色と背景色指定

  // シリアル出力
  Serial.printf("\nSSID:%s\n", ssid);   // SSID
  // Serial.printf("PASS:%s\n", pass);  // PASSWORD
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());       // IPアドレス（配列）

  // サーバー設定
  server.on("/", handleRoot);           // ルートアクセス時の応答関数を設定
  server.onNotFound(handleNotFound);    // Webページが見つからない時の応答関数を設定
  server.on("/get/btn_on", btnOn);      // ボタンオン受信処理
  server.on("/get/btn_off", btnOff);    // ボタンオフ受信処理
  server.begin();                       // Webサーバー開始
}

// メイン *****************************************
void loop() {
  server.handleClient();  // クライアントからのアクセス確認
  delay(200); // 遅延時間（ms）
}

・②遠隔Lチカ＋LEDの状態確認（遠隔監視）

遠隔操作と遠隔監視を行うサンプルプログラムは以下になります。
コピペで貼り付けて実行してください。コピーは下の黒塗り部右上のアイコンクリックでもできます。

#include <M5Unified.h>  // M5Stackシリーズ共通ライブラリ
#include <WiFi.h>       // Wi-Fi接続用
#include <WebServer.h>  // サーバー設定用
#include <Wire.h>       // Wire制御用（書かないとエラーになったため記入）

// Wi-Fiローカル接続先設定
const char ssid[] = "ご自身の環境に合わせて設定"; // 接続先SSID
const char pass[] = "ご自身の環境に合わせて設定"; // 接続先パスワード
bool ledState = false;  // LED状態格納用 ON:true / OFF:false

// サーバー設定ポート80で接続
WebServer server(80);
// htmlメイン画面データ　※R"HTML(この中の文字列は改行は無視され連続した文字列として扱われる)HTML"
char html[] = R"HTML(
  <!DOCTYPE html>
  <html lang="jp">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>REMOTE-SWITCH</title>
    <style>
      body{font-family: sans-serif; background-color: #fff; max-width: 480px; margin: 0 auto; align-items: center;}
      h1 {color:#333; text-align: center; font-size: 28px; margin: 10px auto;}
      div {display: flex; flex-direction: row; justify-content: center;}
      button {height: 70px;width: 100px;color: white;font-size: 18px;font-weight: bold;
        border-radius: 7%;margin: 0 10px;border: none;
        transition: transform 0.1s ease, box-shadow 0.1s ease;-webkit-appearance: none;}
      button:active {transform: scale(0.95); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);}
      button.on {background-color: #4CAF50;}
      button.off {background-color: #f44336;}
      p {font-size: 20px; font-weight: bold;}
    </style>
    <script>
      function sendCommand(cmd) {
        fetch('/get/' + cmd)
          .then(response => response.text())
          .then(() => updateState()); // 状態を更新
      }
      function updateState() {
        fetch('/get/state')
          .then(response => response.text())
          .then(state => {
            document.getElementById('ledState').innerText = 'LED状態: ' + state;
          });
      }
      setInterval(updateState, 1000); // 1秒ごとに状態更新
      window.onload = updateState;
    </script>
  </head>
  <body>
    <h1>REMOTE-SWITCH</h1>
    <div>
      <button class="on" onclick="sendCommand('btn_on')"> ON </button>
      <button class="off" onclick="sendCommand('btn_off')"> OFF </button>
    </div>
    <div><p id="ledState">LED状態: 不明</p></div>
  </body>
  </html>
)HTML";

// LED ON処理関数
void ledOn() {
  Serial.println("LED ON!");       // シリアル出力
  M5.Display.fillScreen(TFT_BLUE); // 画面青塗り
  M5.Display.setTextColor(TFT_WHITE, TFT_BLUE); // 文字色と背景色指定
  M5.Display.setCursor(70, 55);    // 表示座標設定(x, y)
  M5.Display.println("LED ON!");   // 画面出力
  ledState = true;                 // LED状態をONへ
  auto& ioe = M5.getIOExpander(1); // I/OエキスパンダーE1のオブジェクトを取得
  ioe.digitalWrite(7, false);      // 本体LED点灯（E1.P7）
}
// LED OFF処理関数
void ledOff() {
  Serial.println("LED OFF!");      // シリアル出力
  M5.Display.fillScreen(TFT_RED);  // 画面赤塗り
  M5.Display.setTextColor(TFT_WHITE, TFT_RED); // 文字色と背景色指定
  M5.Display.setCursor(70, 55);    // 表示座標設定(x, y)
  M5.Display.println("LED OFF!");  // 画面出力
  ledState = false;                // LED状態をOFFへ
  auto& ioe = M5.getIOExpander(1); // I/OエキスパンダーE1のオブジェクトを取得
  ioe.digitalWrite(7, true);       // 本体LED消灯（E1.P7）
}

// ルートアクセス時の応答関数
void handleRoot() {
  server.send(200, "text/html", html);  // レスポンス200を返しhtml送信
}
// エラー（Webページが見つからない）時の応答関数
void handleNotFound() {
  server.send(404, "text/plain", "404 Not Found!");  // text送信
}
// ブラウザONボタン処理
void btnOn() {
  ledOn();          // LED ON処理関数
  server.send(200, "text/plain", "OK" );  //レスポンス200を返す
}
// ブラウザOFFボタン処理
void btnOff() {
  ledOff();          // LED OFF処理関数
  server.send(200, "text/plain", "OK" );  //レスポンス200を返す
}
// LEDの状態送信
void getLedState() {
  String state = ledState ? "ON" : "OFF"; // LED状態を文字列に変換
  server.send(200, "text/plain", state);  // LED状態送信
}

// 初期設定 *****************************************
void setup() {
  auto cfg = M5.config();       // M5Unified設定取得
  cfg.serial_baudrate = 115200; // シリアル出力初期化(ArduinoIDEでツール → USB CDC On Boot を「Enable」にしておく)
  M5.begin(cfg);                // M5Unified初期化
  delay(500); // シリアル出力安定待ち

  // Wi-Fi接続開始
  WiFi.begin(ssid, pass); //Wi-Fiローカル接続開始

  // 液晶画面初期設定
  M5.Display.begin(); // M5.Display初期化
  M5.Display.setRotation(1);                     // 画面向き設定（USB位置基準 0：下/ 1：右/ 2：上/ 3：左）
  M5.Display.setTextColor(TFT_WHITE, TFT_BLACK); // 文字色と背景色指定
  M5.Display.setFont(&fonts::Font4);             // フォント指定
  M5.Display.setTextSize(1);                     // 文字サイズ（整数倍率）

  // 初期画面表示
  M5.Display.fillScreen(TFT_BLACK); // 画面クリア（黒塗り）
  M5.Display.setCursor(0, 0);       // 表示座標設定(x, y)
  M5.Display.printf("Connect to \n%s\n", ssid); // SSID画面出力
  Serial.printf("Connect to \n%s\n", ssid);     // SSIDシリアル出力

  // Wi-Fi接続完了待ち
  while (WiFi.status() != WL_CONNECTED) { // 接続完了するまで繰り返す
    M5.Display.print("."); //「.」画面出力
    Serial.print(".");     //「.」シリアル出力
    delay(500);            // 0.5秒待機
  }

  // Wi-Fi接続情報表示
  M5.Display.fillScreen(TFT_BLACK);     // 画面クリア（黒塗り）
  M5.Display.setCursor(0, 0);           // 表示座標設定(x, y)
  M5.Display.printf("SSID:%s\n", ssid); // SSID
  M5.Display.println("IP address: ");
  M5.Display.setTextColor(TFT_ORANGE, TFT_BLACK); // 文字色と背景色指定
  M5.Display.println(WiFi.localIP());   //IPアドレス（配列）
  M5.Display.setTextColor(TFT_WHITE, TFT_BLACK); // 文字色と背景色指定

  // シリアル出力
  Serial.printf("\nSSID:%s\n", ssid);   // SSID
  // Serial.printf("PASS:%s\n", pass);  // PASSWORD
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());       // IPアドレス（配列）

  // サーバー設定
  server.on("/", handleRoot);           // ルートアクセス時の応答関数を設定
  server.onNotFound(handleNotFound);    // Webページが見つからない時の応答関数を設定
  server.on("/get/btn_on", btnOn);      // ボタンオン受信処理
  server.on("/get/btn_off", btnOff);    // ボタンオフ受信処理
  server.on("/get/state", getLedState); // LEDの状態送信処理
  server.begin();                       // Webサーバー開始
}

// メイン *****************************************
void loop() {
  server.handleClient();  // クライアントからのアクセス確認
  M5.update(); // ボタン状態更新

  if (M5.BtnA.wasPressed()) { // 本体正面ボタンAがONなら
    ledOn();  // LED ON処理関数
  }
  if (M5.BtnB.wasPressed()) { // 本体側面ボタンBがONなら
    ledOff(); // LED OFF処理関数
  }
  delay(200); // 遅延時間（ms）
}

５．Wi-Fi通信について

Wi-Fiへの接続方法は以下のようにライブラリを使用して、設定したSSIDとパスワードで「WiFi.begin(ssid, pass);」を実行するだけです。

#include <WiFi.h>       // Wi-Fi接続用

// Wi-Fiローカル接続先設定
const char ssid[] = "ご自身の環境に合わせて設定"; // 接続先SSID
const char pass[] = "ご自身の環境に合わせて設定"; // 接続先パスワード

// 初期設定 *****************************************
void setup() {
  // Wi-Fi接続開始
  WiFi.begin(ssid, pass); //Wi-Fiローカル接続開始
   .
   .
   .
}

遠隔操作については「サーバー」の「しくみ」を利用して、サーバーに設定した「Nesso N1」に埋め込まれた「Webページ」を読み込むことで実現しています。

「Wi-Fi通信」については、以下のリンク先で基本から、応用まで詳しく紹介していますので、各リンク先を参照してください。