作りながら学ぶArduino+=電子工作入門

　今回利用するESP32-DevkitC は、次に示すようにESP32-WROOM-32Dを実装しブレッドボードにセットしてテスト回路を組むことができる開発ボードです。この開発ボードには、USB-シリアルの変換チップ、リセット・スイッチ、ブートモード・スイッチ、USBからの5V電源から3.3Vの電源を得るための安定化電源回路なども用意されています。
　そのため、この開発ボードを購入してきてPCとUSBケーブルで接続するだけで開発ができます。2019年4月現在秋月電子通商でEPS32-WROOM-32Dは640円と安価に入手できますが、ESP32-DevkitCの価格は1480円と倍以上の価格差がありますが、そのままPCにUSBケーブルで接続するだけで開発が可能です。単体のEPS32-WROOM-32Dで開発のためのテスト回路を組むには、シリアル変換モジュールやスイッチ、ピッチ変換キットなどを用意し組み立てる手間がかかります。
　プログラムの開発やテスト回路には、ESP32-DevkitCの開発ボードを利用することとします。

　＜ESP3-DevkitC＞

　＜EPS32-WROOM-32D＞
　

　
　付加回路を含めて新たに基板を起こす場合は、安価なESP32-WROOM-32Dを利用します。このモジュールは技適マークがついており、端子にいろいろな部品をはんだ付けしても有効なので、安心して電波が出せます。

●プログラムの開発はArduino IDEを利用する

　プログラムの開発はArduino IDEを用います。Arduino IDEの入手方法、インストールなどは次に示すページで説明しているので、そちらを参考にしてください。

●WebブラウザでESP32とお話しするための枠組み

　Webの通信で使われるhttpプロトコルを利用するには、いくつもの方法があります。

●LEDの点滅をWi-Fi経由で行うシンプルなプログラム

　Arduinoの最初のプログラム例の多くは、LEDの点滅から始めています。今回は、LEDの点滅をWi-Fi経由でブラウザからマウスのクリックで行うプログラムを作成してみます。
　プログラムは、WiFiライブラリのサンプル・プログラムのSimpleWiFiServerと、WebServerライブラリのサンプル・プログラムのAdvencedWebServerのそれぞれ必要な部分を、最小限まとめてテストのプログラムを作成しました。

●WiFiライブラリ、WebServerライブラリを利用する

　Wi-Fiの接続、クライアントとなるPCのブラウザとのやり取りを容易にするためにWiFiライブラリ、WebServerライブラリを使用します。そのために、次のヘッダ・ファイルの読み込みを指定します。

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

●Wi-Fi接続のためのSSID、キーの準備

　Wi-Fi接続のために必要なssid、キー（パスワード）の値はここで設定します。それぞれの環境によって異なるので、各自適切な値を設定してください。

const char ssid[] = "Buffalo-G-2C6E";
const char password[] = "*********";
WebServer server(80);
IPAddress ipadr;

　WebServerのオブジェクトをserver（80）とします。HTTPプロトコルで、ポート80に対応することを示しています。変数ipadrは、IPAddress型の変数で割り当てられたIPアドレスを格納します。

●IPアドレスでアクセスされたときのメッセージ

　IPアドレスでESP32にアクセスするときに、ブラウザには次のように表示します。

　実際には、HTMLのタグを使用して上段のhereの部分をクリックするとLEDを点灯する処理を実行し、下段のhereの部分をクリックするとLEDを消灯する処理を実行するように全体の組み合わせを考えます。
　具体的なタグを利用した記述は、Clickの後のhereを次のように、

　<a　～　/a>のタグはリンク先を指定します。この場合hereがブラウザに表示され、この部分をマウスでクリックすると文字列”/H”で指定された相対アドレスへリンクします。全体を文字列として設定するので、文字列中の ” は \” と設定しています。

　handleRoot()関数が実行されると、次の画面が表示されます。

●ONのテキストをクリックした場合に起動される関数

　LEDを点灯させるために「Click here to turn the LED on pin 5 on.」のメッセージのhereの部分をクリックした場合、次のhandleon()関数が実行されます。最初にLEDが接続されたI/Oポート5をHIGHにするためにdigitalWrite(5, HIGH); を実行し、次に表示を更新するためにhandleRoot()関数を実行します。

void handleon() {
    digitalWrite(5, HIGH); // GET /H turns the LED on
    handleRoot();
}

●OFFのテキストをクリックした場合に起動される関数

　LEDを消灯させるために「Click here to turn the LED on pin 5 off.」のメッセージのhereの部分をクリックした場合、次のhandleoff()関数が実行されます。最初にLEDが接続されたI/Oポート5をLOWにするためにdigitalWrite(5, LOW); を実行し、次に表示を更新するためにhandleRoot()関数を実行します。

void handleoff() {
    digitalWrite(5, LOW); // GET /L turns the LED off
    handleRoot();
}

●初期化処理のsetup()

void setup() {
    pinMode(5, OUTPUT);  // LED接続ポートを出力に設定
    digitalWrite(5, LOW);  // 出力をLOWにしてLEDを消灯する
    Serial.begin(115200);  // シリアルモニタを115200bpsで初期化
    WiFi.mode(WIFI_STA);  // Wi-Fiのモードを設定
    WiFi.begin(ssid, password);  // 接続するSSID　キーを指定してWi-Fiを開始
    Serial.println("");         // シリアルプリントの出力改行のみ
    while (WiFi.status() != WL_CONNECTED) {  // 接続が完了するまで待つ
      delay(500);  // 各回500msの時間待つ
　    Serial.print(".");  // 待ち時間500msごとに１ドット表示　接続が完了すると抜ける
    }
    Serial.println("");　　　
    Serial.print("Connected to ");  // Wi-Fi接続を表示
    Serial.println(ssid);  // SSID表示
    Serial.print("IP address: ");
    ipadr = WiFi.localIP();
    Serial.println(ipadr);  // シリアルモニタにIPアドレスを表示
    server.on("/", handleRoot);  // IPアドレスのみのアクセス時はhandleRoot()を起動
    server.on("/H", handleon);  // IPアドレス+/Hの時　handleon()関数の起動を設定
    server.on("/L", handleoff);  // IPアドレス+/Lの時　handleoff()関数の起動を設定
    server.begin();        // サーバを開始
    Serial.println("HTTP server started");
}

●loop()

　クライアントPCからの要求を待ちます。接続があれば、その内容に従って処理を行います。

void loop(void) {
    server.handleClient();  // ブラウザへのアクセスに応じて適切な関数を起動処理する
}

●初期化、またはLEDの消灯を指示したときのLEDの様子

　LEDの消灯を指示したときはhttp://192.168.1.66/Lにアクセスしています。そのときのアドレスがURL欄に表示されています。

●LEDの点灯を指示したときのLEDの様子
　

　LEDの点灯を指示したときはhttp://192.168.1.66/Hにアクセスしています。そのときのアドレスがURL欄に表示されています。

　
●LEDの接続

　赤色LEDの足の長いほう(プラス側)をポート5の端子に接続し、LEDの短いほうの足に100Ωの抵抗を直列に接続、抵抗のもう一方は開発ボードのGND端子に接続します。
　必要最小限の機能で作成することを目指したので、次に示すように45行プログラムとコンパクトになりました。

　今回は、HTMLのタグもリンクの<a　/a>と改行を示す<br>しか利用しませんでした。次回から、少しずつ機能を追加していく予定です。

（2019/4/25 V1.0）

<神崎康宏>