Amazon プライムデー 2022年も開催!(7/12,13) 先行キャンペーン続々登場!

ESP32 入門 Lesson 04 【Webブラウザへの文字表示】

esp32-lesson04-00ESP32入門編
スポンサーリンク

ESP32 入門
Lesson 04
【Webブラウザへの文字表示】

こんにちは管理人のomoroyaです。

 

Lesson 03にて、「ESP32-DevKitC-V4」のWi-Fiアクセスポイントへの接続を行いました。

Wi-Fiに接続できたのなら、Wi-Fi経由で何かさせたい!

と思いますよね・・・。

しかしです!ここから敷居が急に高くなります。

なぜか?

Wi-Fi経由で何かをさせるということは・・・

  • ESP32をWebサーバーにする
  • HTTPプロコトルを理解する
  • HTML言語を理解する

といった知識が必要になります。

ということで管理人!更新が滞ってしまいました。

なにせ、まったくの素人です。

とりあえず、お勉強してました。

ネットの記事を読み、本を読み・・・

まあ、わからないことだらけです!

とりあえずおおざっぱにわかったことは以下。

  • Webサーバーをたてる
  • クライアント(通信元:Webブラウザ)とサーバー(通信先:ESP32)でやり取りをする
  • Webブラウザに表示させるのでHTML言語で記述する必要がある

とりあえず、理解した気持ちになって遊んでみます。

 

Lesson 04、まだまだ理解不足ですが・・・

Webブラウザへ文字を表示させてみます。

これができれば、センサで拾った値をスマホの画面に表示させることができるはず。

 

ESP32入門編にて使用しているものは「ESP-WROOM-32D」です。

マイコンは「Espressif」ですが、ボードはいろいろなベンダーから発売されています。

値段も色々。

 

純正品の本体単品がほしい方はこちらとなります。

 

スポンサーリンク

はじめに

本LessonではWebサーバーをたてて、Webブラウザに文字を表示させてみます。

サンプルのスケッチ、ネットでの紹介例などを見るとWiFiServerクラスを使っている例がたくさんでできます。

ちなみに、Lesson 03はWiFiServerクラスを利用してWiFiのアクセスポイントに接続。

しかし、管理人が試行したかぎりではWebServerクラスを使った方がスケッチ(コード)がわかりやすく、簡易になると考えます。

 

本LessonではWebServerクラスを使ったスケッチ(コード)を示します。

参考までに、WiFiServerクラスを使ったスケッチ(コード)も載せておきます。

 

おそらくですが、ESP32のサンプルスケッチが「WiFiServerクラス」を利用しているために利用している参考例が多い?のかなと思います。

 

Lesson 04 目標

本Lessonの目標は以下です。

1.ESP32をWebサーバーにする
2.スマホのWebブラウザに「Hello omoroya!!」と表示させる

今回は、ESP32をWebサーバーとして、文字を表示させるだけのため電子部品は使用しません。

使用するのはESP32-DevKitC」のみとなります。

 

準備

ではLessonの準備に取り掛かりましょう。

  1. setup関数の処理:Webサーバーにアクセスがあったときの処理
  2. loop関数の処理:Webサーバーへのアクセス処理

についてスケッチ(コード)を描いていきます。

 

必要なもの

 

本LessonではESP32-DevKitC」のみの使用です。

Jumper wire、抵抗は今後も頻繁に利用します。

Jumper wireはできれば、「オス-メス オス-オス メス –メス」の3種類を揃えておくことをお勧めします。

短めが使いやすい場合も。

 

抵抗も単品で揃えるよりはセットをおすすめします。

 

抵抗、LEDなどを個別でセット品を購入しても、そんなに使わない!

という方は、「電子工作基本部品セット」が使い勝手が良い。

 

使用部品説明

本LessonではESP32-DevKitC」のみの使用です。

esp32-lesson01-01

 

実践 回路作成とコード作成

最初に回路図を確認してください。

最後にコード(スケッチ)を書いて、Wi-Fiのアクセスポイントへ接続しましょう!

 

ESP32-DevKitC-V4」のピン配置を確認したい方は下記を参照してください。

ESP32 入門 Lesson 01 【外観とピン配置】

 

回路図

本LessonではESP32搭載のモジュールのみ使用します。

  • なし

 

モジュールのみのため、回路図は省略。

省略

 

モジュールのみのためブレッドボード図は省略。

省略

 

回路図は「fritzing」を利用しています。

「fritzing」の使い方は下記を参照してください。

 

接続

下図に示すように、用意した部品を使用して接続しましょう。

ESP32搭載のモジュールのみです!

esp32-lesson02-12

 

コードの書き込み

接続が終わったら、USBケーブルを使用してESP32へプログラムを書き込んで行きましょう。

コードを書き終えたら、いつでも利用できるように「ファイル」⇒「名前を付けて保存」で保存しておきましょう。

 

コマンド説明

本Lessonにて使用するコマンドを説明します。

コマンド説明
WebServer server(80)WebServerクラスのコンストラクト
WebServer型の変数serverを定義
左の場合は、変数serverでありポート番号80で設定
WiFi.begin(ESID, PASSWD)Wi-Fiのアクセスポイントへ接続
ESSID:接続するSSID
PASSWD:接続するためのパスワード
WiFi.status()接続状態の確認
接続時の戻り値:WL_CONNECTED
WiFi.localIP()割り当てられたIPアドレスの取得
WebServerにてserverと定義した場合server.on(“uri”, handler)Uriに応じた処理を行う関数を決める
uri:アドレス
handler:関数名
WebServerにてserverと定義した場合server.begin()WebServer起動
WebServerにてserverと定義した場合server.handleClient()クライアントからのリクエストを処理
WebServerにてserverと定義した場合server.send(code, content_type, content)クライアントにレスポンス(返事)を返します。
code:HTTPステータスコード
content_type:出力形式
content:出力するデータ

 

HTTPステータスコード

WebServerクラスを利用するメリットがステータスコードを利用できることでしょうか。

サーバーがレスポンスを返す際に「ステータスコード」を返してくれます。


server.send(200, “text/html”, html);
ステータスコード内容
200OK:正常
301リダイレクト:新しい場所から取得(永遠)
302リダイレクト:新しい場所から取得(1回)
304リダイレクト:変更なし
401ユーザー認証が必要
403アクセス禁止
404ページが見つからない
500サーバー内部エラー
503現在はサービス提供不可

 

出力形式

アクセスがあったときにWebサーバーから出力される形式です。


server.send(200, “text/html”, html);
出力データ形式
テキストtext/plain
HTMLtext/html
XMLtext/xml
JavaScripttext/javascript
CSStext/CSS
JSONapplication/json

 

補足 server(80)って何?

わからないに人にとっては・・・

おまじないのような記述であるserver(80)

これは何???

ということで下記サイトの説明がとてもわかりやすいと思います。

興味があるかたは一読をおすすめします。

Webサーバは80番ポート以外使ってはいけないの? (1/2)
LANアナライザというツールをご存じだろうか? これはネットワークのトラフィックを可視化するツール、トラブルシューティングやデバッグなどでよく用いられる。LANアナライザによりキャプチャされたデータがどのようなものか、またそれがどのように表…

 

要は、Webサイトのアドレスはポート番号80番を前提にしているというお話しです。

利便性から使用すべきポート番号を固定したほうがクライアントも混乱せずに済む。

ということですね。

 

Webブラウザに表示させるHTMLコード

Webブラウザに表示させるHTMLコードは以下。

下記をメモ帳か何かにコピーして、拡張子をhtmlにしてみてください。

Webブラウザで開けば、どういったものかわかると思います。

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset=\"utf-8\">
<title>Lesson 04</title>
</head>
<body>
<h1>Hello omoroya!!</h1>
<p><h2>こんにちは omoroya!!</h2></p>
</body>
</html>

 

サンプルコード(WebServerクラス)

WebServerクラスを利用したサンプルスケッチです。

WebServerクラスを利用するために「WebServer.h」を使用します。

#include <WebServer.h>
//ESP32 Lesson 04-01 WebServerクラスを使ったスケッチ
//https://omoroya.com/

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

//アクセスポイント情報
const char* ssid = "xxx";   //ssidを入力
const char* passwd = "xxx"; //ネットワークパスワード入力

//WebServerクラス
WebServer server(80);       //通信を受けるポート番号(通常は80に設定)

void setup() {
  //シリアルポート設定
  Serial.begin(115200);                   //シリアル通信のデータ転送レートを115200bpsで指定
  WiFi.begin(ssid, passwd);               //アクセスポイント接続のためのIDとパスワードの設定
  while (WiFi.status() != WL_CONNECTED) { //接続状態の確認
  delay(300);                             //接続していなければ0.3秒待つ
  Serial.print(".");                      //接続しなかったらシリアルモニタに「.」と表示
  }

  //通信が可能となったら各種情報を表示する
  Serial.println("");               //シリアルモニタ改行
  Serial.println("WiFi Connected"); //接続したらシリアルモニタに「WiFi Connected」と表示
  Serial.print("IP Address : ");    //シリアルモニタに表示
  Serial.println(WiFi.localIP());   //割り当てられたIPアドレスをシリアルモニタに表示

  //serverにアクセスしたときの処理関数
  server.on("/", handleSample);      //TOPページのアドレスにアクセスしたときの処理関数
  server.onNotFound(handleNotFound); //存在しないアドレスにアクセスしたときの処理関数

  //WebServerを起動、server(80)で作成したサーバー
  server.begin();                    //WebServer起動
  }

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

//TOPページにアクセスしたきの処理関数
void handleSample() {
  String html;

  //HTML記述
  html = "<!DOCTYPE html>";
  html += "<html lang='ja'>";
  html += "<head>";
  html += "<meta charset=\"utf-8\">";
  html += "<title>Lesson 04</title>";
  html += "</head>";
  html += "<body>";
  html += "<h1>Hello omoroya!!</h1>";
  html += "<p><h2>こんにちは omoroya!!</h2></p>";
  html += "</body>";
  html += "</html>";

  // HTMLを出力する
  server.send(200, "text/html", html);
}

//存在しないアドレスへアクセスしたときの処理関数
void handleNotFound(void) {
  server.send(404, "text/plain", "Not Found");
}

 

動作確認

では、さっそく動作を確認していきます。

 

■シリアルモニタの結果

アクセスポイントへ接続、IPアドレスを取得。

esp32-lesson03-01

 

■表示されているIPアドレスへスマホからアクセスした結果
※パソコンのWebブラウザからアクセスしても同じです。

WiFi経由でスマホに文字が表示できたということになります。

esp32-lesson04-02

 

サンプルコード(WiFiServerクラス)

参考までにWiFiServerクラスを利用したスケッチ(コード)も載せておきます。

結果は同じとなります。

試してみてください。

違いは「ステータスコード」がないこと。

//ESP32 Lesson 04-02 WiFiServerクラスを使ったスケッチ
//https://omoroya.com/

#include <WiFi.h>

//アクセスポイント情報
const char* ssid = "XXX";   //ssidを入力
const char* passwd = "XXX"; //ネットワークパスワード入力

//WebServerクラス
WiFiServer server(80);      //通信を受けるポート番号(通常は80に設定)

void setup() {
  //シリアルポート設定
  Serial.begin(115200);                   //シリアル通信のデータ転送レートを115200bpsで指定
  WiFi.begin(ssid, passwd);               //アクセスポイント接続のためのIDとパスワードの設定
  while (WiFi.status() != WL_CONNECTED) { //接続状態の確認
    delay(300);                           //接続していなければ0.3秒待つ
    Serial.print(".");                    //接続しなかったらシリアルモニタに「.」と表示
  }

  //通信が可能となったら各種情報を表示する
  Serial.println("");               //シリアルモニタ改行
  Serial.println("WiFi Connected"); //接続したらシリアルモニタに「WiFi Connected」と表示
  Serial.print("IP Address : ");    //シリアルモニタに表示
  Serial.println(WiFi.localIP());   //割り当てられたIPアドレスをシリアルモニタに表示

  //WebServerを起動、server(80)で作成したサーバー
  server.begin();                   //WebServer起動
}

void loop() {
  WiFiClient client = server.available(); //クライアントからの要求を待つ
  if (client) {
    client.println("<!DOCTYPE html>");
    client.println("<html lang='ja'>");
    client.println("<head>");
    client.println("<meta charset='utf-8'>");
    client.println("<title>Lesson 04</title>");
    client.println("</head>");
    client.println("<body>");
    client.println("<h1>Hello omoroya!!</h1>");
    client.println("<p><h2>こんにちは omoroya!!</h2></p>");
    client.println("</body>");
    client.println("</html>");
    client.stop();
  }
}

 

ESP32へスケッチ(プログラム)を書き込めない場合

  1. Bootボタンを押したままにする
  2. Bootボタンを押したままの状態で、ENボタンを一度押す
  3. Bootボタンを押したままの状態で、Arduino  IDEの書き込みボタンをクリック
  4. Arduino  IDEの画面に「Connecting…」と表示されたらBootボタンから手を離す

上記の順番で手動にて書き込むことが可能です。

 

まとめ

本Lessonは、以下を目標としました。

1.ESP32をWebサーバーにする
2.スマホのWebブラウザに「Hello omoroya!!」と表示させる

 

ESP32-DevKitC」をWebサーバーとすることでWiFi経由にてESP32とスマホにてやり取りすることが可能となりました。

本Lessonの内容を抑えておくことで・・・

  • センサーを使ったデータの取得
  • スマホから電子部品を操作する

といったことが、WiFi経由にてスマホにてできるようになるはずです。

色々と楽しそうです。

 

これで、ESP32-DevKitC」を使ってWiFi経由で何かをさせるといった準備ができたかなと思っています。

 

疑問点、質問などありましたら気軽にコメントください。

 

次回、Lesson 05は【WiFi経由でのLED ON/OFF】その1です。

ESP32 入門 Lesson 05 【WiFi経由でのLED ON/OFF】その1
Lesson 04にて、「ESP32-DevKitC-V4」のWebブラウザへの文字表示を行いました。Webブラウザへの文字表示をさせた理由は動作を理解するため。なんとなく、理解できたかなと思っています。Lesson 04はESP32(We…

 

ESP32入門編にて使用しているものは「ESP-WROOM-32D」です。

マイコンは「Espressif」ですが、ボードはいろいろなベンダーから発売されています。

値段も色々。

 

純正品の本体単品がほしい方はこちらとなります。

コメント

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