[ESP32]Webサーバーを構築する方法(index.html/style.css)

ESP32

Webサーバーを構築する方法

はじめに

この記事では、ESP32上に「index.html/style.css」をアップロードしてWebサーバーにする方法をご説明します。

コード内にhtmlやcssの内容を埋め込む方法もありますが、見にくくなって変更するのが億劫になってしまうので、実際のファイルを置く方法で実現しています。

開発環境

OS : Windows 11 Pro

ESP32:ESP-WROOM-32

統合開発環境 : Arduino IDE 2.1.0 / Arduino IDE 1.8.19

使用ライブラリ:ESPAsyncWebServer(1.2.6) / ESP32FS(1.1)

作業内容

ライブラリインストール

ESPAsyncWebSrv

Arduino IDE のライブラリマネージャーからWebサーバを動作させるためのライブラリである ESPAsyncWebSrv をインストールします。

インストールをクリックすると、「ライブラリの依存関係をインストール」が表示された場合は、「全てをインストール」をクリックしてインストールしてください。

ESP32FS

次に、ファイル(index.html/style.css など)をフラッシュメモリに書き込むライブラリ ESP32FS をインストールします。

こちらは Arduino IDE のライブラリマネージャーに対応していないため、GitHubからダウンロードして、所定の場所へ配置します。

GitHub - me-no-dev/arduino-esp32fs-plugin: Arduino plugin for uploading files to ESP32 file system
Arduino plugin for uploading files to ESP32 file system - GitHub - me-no-dev/arduino-esp32fs-plugin: Arduino plugin for ...

上記サイトのreleases pageからESP32FS-1.1.zipをダウンロードします。

ダウンロードしたフォルダを配置するために、Arduino の作業場所に「tools」というフォルダを作成します。

配置例

「C:\Users\xxxxx\OneDrive\ドキュメント\Arduino\tools

Arduinoの作業場所がわからない場合は、新規スケッチを開いて「ファイル ⇒ 開く…」で開くことができると思います。

先ほどダウンロードした「ESP32FS-1.1.zip」を解凍し、「ESP32FS」フォルダを「tools」フォルダの中に配置して完了です。

配置例

「C:\Users\xxxxx\OneDrive\ドキュメント\Arduino\tools\ESP32FS

Arduino IDE を再起動し、「ツール ⇒ ESP32 Sketch Data Upload」が表示できていれば成功です。

が、しかし!!私の環境では表示されませんでした。PCを再起動してもダメ。。

Arduino IDE 1.x.x 系を使用している人は成功していると思いますが、Arduino IDE 2.x.x 系を使用している人は表示されていないと思います。おそらく対応していないのでしょう。

そこで、私は Legacy IDE (1.8.X) として公開されている Arduino IDE 1.8.19 をダウンロードしました。Arduino IDE 2.x.x 系と共存できるので、同時にどちらも使用できます。作業場所(ライブラリ関連)も共有できます。

Arduino IDE 1.x.x 系を起動して、上記の「ESP32 Sketch Data Upload」が表示されていれば成功です。

普段は Arduino IDE 2.x.x 系を使用している人は、ファイル(index.html/style.css など)をフラッシュメモリに書き込む時だけ Arduino IDE 1.x.x 系を使用すれば、問題なく使用できます。

スケッチ作成

「ESP_WebServer」というフォルダを作り、「ESP_WebServer.ino」というファイルを作成して、下記スケッチを作成しています。

配置例

「C:\Users\xxxxx\OneDrive\ドキュメント\Arduino\ESP_WebServer

<<ESP_WebServer.ino>>

#include <WiFi.h>
#include <ESPAsyncWebSrv.h>
#include <SPIFFS.h>

AsyncWebServer server(80);

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

void setup() {

    Serial.begin(115200);

    // SPIFFSのセットアップ
    if (!SPIFFS.begin(true)) {
      Serial.println("An Error has occurred while mounting SPIFFS");
      return;
    }

    WiFi.mode(WIFI_STA);
    WiFi.begin(ssid, password);
    if (WiFi.waitForConnectResult() != WL_CONNECTED) {
        Serial.printf("WiFi Failed!\n");
        return;
    }

    Serial.print("IP Address: ");
    Serial.println(WiFi.localIP());

    // GETリクエストに対するハンドラーを登録
    // rootにアクセスされた時のレスポンス
    server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->send(SPIFFS, "/index.html");
    });
    // style.cssにアクセスされた時のレスポンス
    server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->send(SPIFFS, "/style.css", "text/css");
    });
 
    // ESP32_WebServer start
    server.begin();
    Serial.println("ESP32_WebServer start!");
}

void loop() {

}

7行目と8行目の[ssid]と[password]の内容はご自身の環境に変更してください。

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

アップロードファイル作成

先ほど作成した「ESP_WebServer」というフォルダの中に、「data」というフォルダを作成し、[index.html/style.css]を作成します。

配置例

「C:\Users\xxxxx\OneDrive\ドキュメント\Arduino\ESP_WebServer\data

<<index.html>>

<!DOCTYPE html>
<html>
  <head>
    <title>ESP32_WebServer</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>ESP32_WebServer</h1>
    <p>Hello World!!</p>
  </body>
</html>

<<style.css>>

html {
  font-family: Helvetica;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}
p {
 color: blue;
}

書き込み

スケッチ書き込み

スケッチは、通常通りビルドして書込みしてください。

index.html/style.css 書き込み

Arduino IDE 2.x.x 系を使用している人は、Arduino IDE 1.x.x 系を立ち上げて同じく[ESP_WebServer.ino]を開いてください。

そして、「ESP32 Sketch Data Upload」を実行します。すると、「data」フォルダの中にあるファイルをフラッシュメモリに書き込んでくれます。

この時、以下のようなエラーとなる場合は、Arduino IDE 2.x.x 系でシリアルモニタを開いているかと思います。シリアルモニタを消して再度実行してみてください。

動作確認

シリアルモニタにこのように出力されていれば、ひとまず成功です。

そして、ウェブブラウザで出力されたIPアドレスにアクセスしてみてください。

表示できましたか?表示されなければ、再度手順を確認して漏れている箇所がないか確認してみてください。

おわりに

フラッシュメモリにファイルを書き込むことによって、普通にWEBファイルを作成することができますので、少し手の込んだWEBページも作れそうです。

下図は、以前作ったシステムのWEBページです。簡単ではありますが、動作状況・設定変更・動作履歴を表示することができ、便利になりました。

画像の表示方法や、変数の表示・変更方法などについてはこちら。

コメント

タイトルとURLをコピーしました