ESPr® Developer(ESP-WROOM-02開発ボード)でWeb サーバーを実装し、HTMLページを表示させる方法について解説しています。
■用意したもの
・ESPr® Developer(ESP-WROOM-02開発ボード)(https://amzn.to/3LG381X)
今回はスイッチサイエンスで購入したものを使用。
・Micro(マイクロ)USBケーブル1本(https://amzn.to/42bYhLk)
■パソコン環境
・Windows11
・Arduino IDE Version 1.8.9(日本語対応済)
※なお、事前にESP8266 チップのサポートができるように「ESP8266 Arduino(https://github.com/esp8266/Arduino)」のインストールを行っています。
今回、設定しているボードは上記となります。
■新規ファイルを作成し、コードを記述する
「Arduino」を起動し、上部メニューの「ファイル」から「新規ファイル」をクリックします。
クリックすると、「sketch_***」というようなスケッチが表示されますので、このスケッチにWeb サーバーを起動し、HTMLページを表示させるコードを書いていきます。
■コード
- #include <ESP8266WiFi.h>
- #include <WiFiClient.h>
- #include <ESP8266WebServer.h>
- const char* ssid = “あなたのSSID”;
- const char* password = “あなたのパスワード”;
- ESP8266WebServer server(80);
- void handleRoot() {
- server.send(200, “text/html”, “<html><body><h1>Hello from ESP8266!</h1></body></html>”);
- }
- void setup() {
- Serial.begin(115200);
- WiFi.begin(ssid, password);
- Serial.println(“”);
- // Wait for connection
- while (WiFi.status() != WL_CONNECTED) {
- delay(1000);
- Serial.print(“Connecting to WiFi…”);
- }
- Serial.println(“”);
- Serial.print(“Connected to WiFi network with IP address: “);
- Serial.println(WiFi.localIP());
- server.on(“/”, handleRoot);
- server.begin();
- Serial.println(“HTTP server started”);
- }
- void loop() {
- server.handleClient();
- }
■コードの備考
ESP8266WiFi.h : ESP8266のWi-Fiモジュールを制御するためのライブラリです。
WiFiClient.h : Wi-Fiモジュールからサーバーに接続するためのクライアント機能を提供するライブラリです。
ESP8266WebServer.h : ESP8266でWebサーバーを実装するためのライブラリです。このライブラリを使用することで、ESP8266でHTTPリクエストを受信し、レスポンスを返すことができます。
※これらのライブラリはWebサーバーを実装するために必要なライブラリですので、事前にインストールを行っておく必要があります。
handleRoot()関数は、WebブラウザからESP8266のIPアドレスにアクセスしたときに、どのようにレスポンスを返すかを定義するための関数。
server.send()メソッドは、HTTPリクエストに対するレスポンスを送信するために使用されます。この関数の引数には、次のような情報が含まれます。
ステータスコード(ここでは200 OK)
コンテンツの種類(ここでは”text/html”)
レスポンスの本文(ここではHTMLページのコード)
この関数の場合、「200 OK」は成功したレスポンスを意味する。また「”text/html”」はHTML形式のコンテンツを表す。
Serial.begin(57600)は、シリアル通信を開始するための関数。ここでは、通信速度を57600bpsに設定しています。この関数を呼び出すことで、シリアルモニターに出力することができます。なお、通信速度は設定したボードのUpload Speedにあわせています。このように設定しないと、シリアルモニターに出力されない。
WiFi.begin(ssid, password)は、ESP8266が指定されたWi-Fiネットワークに接続するための関数。この関数には、Wi-FiネットワークのSSIDとパスワードが必要です。この例では、ssid変数とpassword変数にそれぞれ設定された値が使用されます。
Serial.println(“”)は、シリアルモニターに空白の行を表示するための関数です。この関数は、シリアル通信を開始する前に空白の行を表示するために使用されます。
while (WiFi.status() != WL_CONNECTED)は、ESP8266がWi-Fiネットワークに接続されるまで待機するためのループ文です。WiFi.status()は、ESP8266のWi-Fi接続状態を確認するための関数で、WL_CONNECTEDは定数で、ESP8266がWi-Fiネットワークに接続されていることを示します。
delay(1000)は、1秒の待機時間を指定するための関数です。
Serial.print(“Connecting to WiFi…”);は、シリアルモニターに”Connecting to WiFi…”というメッセージを表示するための関数です。
server.on(“/”, handleRoot);は、ESP8266のルートディレクトリにアクセスされた場合に、handleRoot()関数を実行するための設定です。
server.begin();は、Webサーバーを開始するための関数です。
Serial.println(“HTTP server started”);は、シリアルモニターに”HTTP server started”というメッセージを表示するための関数です。
loop()関数は処理をずっとループする関数です。
server.handleClient()は、ESP8266が受信したリクエストを処理するための関数です。この関数が呼び出されることで、ESP8266はクライアントからのリクエストを待ち受け、受信したリクエストを処理することができます。
■コードを記述後、コードを保存します。
コードを記述した後は、コードを保存します。保存するためには、起動した「Arduino」の上部メニューの「ファイル」から「保存」をクリックします。
保存をクリックすると「すでに指定されているスケッチのフォルダの保存先」が表示されますので、保存する先に問題がなければ、ファイル名で名前を付け、ファイルの種類は「すべてのファイル(*.*)」と設定し「保存」ボタンをクリックします。これで今回記述したコードのファイルが保存されます。
■ESPr® Developer(ESP-WROOM-02開発ボード)にMicro(マイクロ)USBケーブルを接続し、PCにつなげる。
保存後、ESPr® Developer(ESP-WROOM-02開発ボード)に、Micro(マイクロ)USBケーブルを接続(USB(Micro-B)オス側)し、PCにつなげる(Micro(マイクロ)USBケーブルのUSB(A)オス側)。
■ESPr® Developer(ESP-WROOM-02開発ボード)とPCの接続を確認する
PCにつなげた後に、ESPr® Developer(ESP-WROOM-02開発ボード)とPCの接続を確認します。確認するために、起動した「Arduino」の上部メニューから「ツール」をクリックします。クリックすると、メニューが表示されますので、シリアルポートを確認します。
確認すると今回は「シリアルポート:”COM3”」と表示されています。さらにシリアルポートをクリックすると「COM3」にチェックが入っています。この状態が確認できれば、ESPr® Developer(ESP-WROOM-02開発ボード)とPCの接続確認作業は完了です。
■マイコンボード(ESPr® Developer(ESP-WROOM-02開発ボード))への書き込み
確認完了後、今回記述したコード(スケッチ)をマイコンボード(ESPr® Developer(ESP-WROOM-02開発ボード))へ書き込みします。
書き込みを行う際は、起動した「Arduino」の画面上で「→”右の矢印”(書込装置を使って書き込む)」ボタンをクリックします。クリックすると、書き込みが開始されます。
開始されると「Arduino」の画面下に「スケッチをコンパイルしています…」と表示されます。
次に「マイコンボードに書き込んでいます」と表示され、ESPr® Developer(ESP-WROOM-02開発ボード)への書き込みが行われます。
- Wrote 292592 bytes (213609 compressed) at 0x00000000 in 37.8 seconds (effective 62.0 kbit/s)…
- Hash of data verified.
- Leaving…
- Hard resetting via RTS pin…
その後「ボードへの書き込みが完了しました。」と表示されます。これでESPr® Developer(ESP-WROOM-02開発ボード)への書き込みが完了となります。
■シリアルモニタを確認する
完了後、シリアルモニタを確認します。確認する際は、起動した「Arduino」の画面上にある虫眼鏡のボタンをクリックします。
- Connecting to WiFi…Connecting to WiFi…Connecting to WiFi…Connecting to WiFi…Connecting to WiFi…
- Connected to WiFi network with IP address: **.**.**.**(IPアドレス)
- HTTP server started
クリックすると、シリアルモニタに上記が出力されます。
■Webサーバーが起動されているかの検証
出力された「Connected to WiFi network with IP address: **.**.**.**(IPアドレス)」に表示されたIPアドレスの情報を保存しPC、もしくはスマートフォンでブラウザを使用し、アドレスバーにIPアドレスを入力します。入力後、アクセスを行います。
検証のために、PC(Windows11)からGoogleChromeを使用しアクセスした場合が上記になります。
次にスマートフォン(OPPO Reno5 A)からChromeアプリを用いてアクセスした場合が上記になります。
これでESPr® Developer(ESP-WROOM-02開発ボード)でWeb サーバーを実装し、HTMLページを表示させる作業は完了となります。
コメント