ESP8266 / ESP32は簡単にWebサーバーに出来る。また、無線LANに接続する事も出来るし、アクセスポイントとして動かす事も出来る。

インターネットや無線LAN環境が無い状態などで、ESP8266をアクセスポイントとして動かし、スマホ等からESP8266に接続、スマホのブラウザからESP8266で動かしているWebサーバーにアクセスし色々制御したり状態を見たり設定を行ったりと言った使い方が出来る。

例えば、ESP系はスマートプラグにも採用されている事があるのでプラグの時間によるスケジュール設定やオンオフ制御、モーターやサーボと繋いでスマホをリモコンとしたラジコンの様な使い方が出来る。

面倒なのはスマホから無線LANのアクセスポイントとしてESPマイコンに接続した後、ブラウザを開いてESPマイコンのIPアドレスを入力してページを開く作業である。

アクセスポイントに接続した後、ブラウザからページを開く作業は自動化出来る。

Captive Portalと言う技術を利用する。空港やホテル、お店等のフリーWi-Fiに接続した際、すぐにはインターネットには繋がらず利用の為の同意画面やサインインページが表示される仕組みである。

下記最低限の機能を入れたスケッチを動かすと、ESP8266が「ESP8266AP」と言う名のアクセスポイントとして動作する。スマホからこのアクセスポイントに接続すると、スマホにもよるが「ネットワークにログイン」の通知が出る。ここをタップするとESP8266のWebサーバーのページが開く。

いちいちESP8266のIPアドレスやホスト名を覚えておいてURLに入力する必要がないので、便利である。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <DNSServer.h>

//無線LANの設定　アクセスポイントのSSIDとパスワード
const char* ap_ssid = "ESP8266AP";		//APのSSID
const char* ap_password = "12345678";	//APのパスワード 8文字以上
IPAddress ip(192, 168, 1, 100);
IPAddress subnet(255, 255, 255, 0);
const byte DNS_PORT = 53;
DNSServer dnsServer;
ESP8266WebServer server(80);

String toStringIp(IPAddress ip) {
	String res = "";
	for (int i = 0; i < 3; i++) {
		res += String((ip >> (8 * i)) & 0xFF) + ".";
	}
	res += String(((ip >> 8 * 3)) & 0xFF);
	return res;
}

void captivePortal() {
	//無効リクエストはすべてESP8266に向ける
	server.sendHeader("Location", String("http://") + toStringIp(server.client().localIP()), true);
	server.send(302, "text/plain", "");
	server.client().stop();
}

bool handleUrl(String path) {
	if (path.endsWith("/")){
	     char chbuffer[64];
	     sprintf(chbuffer,"Hello ESP8266");
	     server.send(200,"text/plain",chbuffer);
		return true;
	}
	return false;
}

void setup() {
	//無線LAN接続APモード
	WiFi.mode(WIFI_AP);
	WiFi.softAPConfig(ip, ip, subnet);
	WiFi.softAP(ap_ssid, ap_password);
	dnsServer.start(DNS_PORT, "*", ip);
	WiFi.setSleepMode(WIFI_NONE_SLEEP);

	server.onNotFound([]() {
		if (!handleUrl(server.uri())) {
			captivePortal(); //ESP8266のページにリダイレクトする capative portalの仕組み
		}
	});
	server.begin();
}

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

ESP32のサンプルスケッチ

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>
#include <DNSServer.h>
 
//無線LANの設定　アクセスポイントのSSIDとパスワード
const char* ap_ssid = "ESP32AP";      //APのSSID
const char* ap_password = "12345678";   //APのパスワード 8文字以上
IPAddress ip(192, 168, 1, 100);
IPAddress subnet(255, 255, 255, 0);
const byte DNS_PORT = 53;
DNSServer dnsServer;
WebServer server(80);
 
String toStringIp(IPAddress ip) {
    String res = "";
    for (int i = 0; i < 3; i++) {
        res += String((ip >> (8 * i)) & 0xFF) + ".";
    }
    res += String(((ip >> 8 * 3)) & 0xFF);
    return res;
}
 
void captivePortal() {
    //無効リクエストはすべてESP32に向ける
    server.sendHeader("Location", String("http://") + toStringIp(server.client().localIP()), true);
    server.send(302, "text/plain", "");
    server.client().stop();
}
 
bool handleUrl(String path) {
    if (path.endsWith("/")){
         char chbuffer[64];
         sprintf(chbuffer,"Hello ESP32");
         server.send(200,"text/plain",chbuffer);
        return true;
    }
    return false;
}
 
void setup() {
    //無線LAN接続APモード
    WiFi.mode(WIFI_AP);
    WiFi.softAPConfig(ip, ip, subnet);
    WiFi.softAP(ap_ssid, ap_password);
    dnsServer.start(DNS_PORT, "*", ip);
 
    server.onNotFound([]() {
        if (!handleUrl(server.uri())) {
            captivePortal(); //ESP32のページにリダイレクトする capative portalの仕組み
        }
    });
    server.begin();
}
 
void loop() {
    dnsServer.processNextRequest();
    server.handleClient();
}

参考：https://github.com/esp8266/Arduino/blob/master/libraries/DNSServer/examples/CaptivePortalAdvanced/handleHttp.ino

This post is also available in: 英語