電子工作

ESP32でWebサーバーとサーボモーターを制御する – ブラウザ情報をフラッシュメモリに保存

今回のプロジェクトでは、ESP32デバイスを使用して、Webサーバーとサーボモーターを組み合わせて制御する方法に焦点を当てます。このプロジェクトでは、ESP32が内蔵するWebサーバーを通じて、ブラウザからの指示に応じてサーボモーターの動作を変更します。更に、興味深い機能として、ブラウザの情報をESP32のフラッシュメモリに保存し、それを利用して柔軟かつ効果的に情報を管理します。

この記事では、ESP32の基本的な初期化から始め、Webサーバーの構築、サーボモーターの制御までを詳細に解説します。また、ブラウザ情報をフラッシュメモリに保存する手法を導入し、その応用可能性についても探ります。さらに、実際の利用シーンやプロジェクトの応用についても考察していきましょう。ESP32の新たな可能性を広げる一歩を共に踏み出していきましょう。

アイコン名を入力

・携帯からサーボモータを動かしたい
・自由研究で電子工作してみたい
・IOTに興味があるな~

こんな悩みに答えます。

記事の対象者

・初心者だけど電子工作に興味がある
・携帯操作で動くものを作ってみたい
・IOTに興味がある人

こういうものが作れるようになります。

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。 このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円 で受講できるチャンスです。 エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

必要なもの

  • ESP32デバイス
  • サーボモーター
  • WiFiネットワークに接続可能な環境

上記部品を準備してください。合わせて、ジャンパー線なども準備してください。

電子工作をしていくと、プログラミングにも興味が出てきます。未経験からでもプログラムを学び、ITエンジニアになりたい人は、無料のカウンセリングを受けることをお勧めします。私も、無料で一度カウンセリングを受けどのように勉強すればスキルを身にられるかがわかりました。この経験が現在の大手メーカでの経験に生きていると考えています。

プログラムの概要

このプログラムは、ESP32を用いてサーボモーターを制御し、Webサーバーを通じてユーザーが指定した角度にサーボモーターを動かすことができます。以下、プログラムの主な機能を説明します。

ライブラリのインクルード

初めにライブラリを入れてください。

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

ESP32のサーボモーター制御とWiFi通信、SPIFFS(SPI Flash File System)を利用するためのライブラリをインクルードします。ESPAsyncWebSrv.hについては、”#include ESPAsyncWebServer.h”と記載すると、うまく作動しなかったため、ESPAsyncWevSrv.hとしてください。

WiFi接続情報の設定

const char* ssid = "Your SSID";
const char* password = "Your Password";

WiFi接続に必要なSSIDとパスワードを指定します。自分のSSID, パスワードを入れてください。

サーボモーターの初期化

const int servoPin = 25;
Servo myservo;

サーボモーターを制御するためのピンとServoクラスのインスタンスを宣言します。

Webサーバーの設定

AsyncWebServer server(80);

ESPAsyncWebSrvライブラリを使用して、ESP32上にWebサーバーを構築します。この行は、AsyncWebServerクラスのインスタンスを作成しています。このクラスは非同期なWebサーバーを構築するための機能を提供します。

AsyncWebServer の内容
  1. AsyncWebServerクラスのインスタンス化:
    AsyncWebServer server(80);
    この行は、AsyncWebServerクラスのインスタンスを作成しています。このクラスは非同期なWebサーバーを構築するための機能を提供します。
  2. ポートの指定: server(80);の引数として80が指定されています。これはWebサーバーがリクエストを受け付けるためのポート番号で、通常HTTP通信においてはポート80が使用されます。
  3. Webサーバーの設定と初期化: serverオブジェクトはその後、server.begin();で初期化され、Webサーバーが開始されます。これにより、ESP32はHTTPリクエストを受け付けることができ、指定されたポート(この場合は80)で待機します。
  4. サーバーへのハンドラの追加: serverオブジェクトには、onメソッドを使用してさまざまな種類のリクエストに対するハンドラを追加できます。上記のプログラムでは、server.on("/servo", HTTP_POST, ...)のように、”/servo”へのPOSTリクエストに対するハンドラが追加されています。


簡単に言えば、この行はESP32上でHTTP通信を処理できるWebサーバーを構築するための初期化を行っています。その後、指定したポート(この場合は80)でクライアントからのリクエストを待ち受け、対応するハンドラで処理することが可能になります。

サーボモーターの初期化とSPIFFSのマウント

myservo.attach(servoPin);
myservo.write(currentAngle);

if (!SPIFFS.begin(true)) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
}

サーボモーターの初期化とSPIFFSのマウントを行います。

サーボモータの初期化
  1. myservo.attach(servoPin);はサーボモーターを指定したピン(servoPinで指定されたピン)に接続します。これにより、サーボモーターが指定されたピンから信号を受け取り、制御することが可能になります。
  2. myservo.write(currentAngle);はサーボモーターの初期位置を設定します。currentAngleはプログラム内で定義された変数で、初期のサーボモーターの角度を表しています。この例では90度に設定されていますが、プロジェクトの要件に合わせて変更できます。
SPIFFSのマウント
  1. SPIFFS.begin(true)はSPIFFS(SPI Flash File System)を初期化し、マウントします。SPIFFSはESP32のフラッシュメモリを使用してファイルシステムを提供するもので、ファイルの読み書きが可能です。
  2. if (!SPIFFS.begin(true))は初期化が成功したかどうかを確認しています。もし初期化に失敗した場合、シリアルモニターにエラーメッセージを表示し、プログラムの実行を終了します。
  3. trueはSPIFFSが初めてマウントされる場合に、自動的にフォーマットを行うオプションです。初回のみ有効で、2回目以降は無視されます。

これにより、サーボモーターの初期化とSPIFFSのマウントが行われ、サーボモーターの制御とファイルの読み書きが可能になります。特にSPIFFSを使用することで、プログラム内でWebページやその他のデータを格納し、ESP32をWebサーバーとして活用できるようになります。

WiFi接続

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");

WiFiに接続します。

Webサーバーの設定

server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");

Webサーバーを構築し、SPIFFSから静的ファイル(ここではindex.html)を提供します。SPIFFSに事前にIndex.html, CSSファイルを保存しておくことで、ブラウザの表示方法を事前に設定できます。
設定するためには下記手順で事前に準備をしておきます。
①Arduinoのフォルダの下にtoolsのフォルダを生成します。
②ESP32FSを下記サイトよりダウンロードしてて、Zipファイルを解凍し、toolsのフォルダに格納します。
下記URLよりダウンロード

https://github.com/me-no-dev/arduino-esp32fs-plugin

こんな感じになります。

すると、このようにESP32 Sketch Data Uploadが表示されます
はじめは、Arduino IDEのバージョンが2.x.xですと表示されないということで、1.8.19をダウンロードしたところ、表示されました。

③プログラムのフォルダにdataフォルダを作成し、index.htmlと、style.cssを保存します。(画像も入れたい場合は、画像も保存します。)

事前にhtml, cssファイルを作成します。加えて、サーボモータの画像も入れておきます。これらのファイルを事前に作ったdataフォルダに保存します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Servo Control</h1>
        <img src="image.png" alt="aa"> <!-- 画像のパスを修正 -->
        <input type="range" name="angle" id="angleInput" min="0" max="180" value="90" onchange="updateAngle(this.value); sendAngle(this.value);">
        <div id="angleDisplay">Current Angle: 90</div>
    </div>

    <script>
        function updateAngle(value) {
            document.getElementById('angleDisplay').innerHTML = 'Current Angle: ' + value;
        }

        function sendAngle(value) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/servo', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send('angle=' + value);
        }
    </script>
</body>
</html>
body {
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}


.container {
    text-align: center;
}

h1 {
    font-size: 60px;
    margin-bottom: 20px;
}

input[type="range"] {
    -webkit-appearance: none;
    position: relative;
    overflow: hidden;
    height: 40px;
    width: 80%; /* 幅をパーセントで指定 */
    max-width: 300px; /* 最大幅を指定 */
    cursor: pointer;
    border-radius: 0;
}

::-webkit-slider-runnable-track {
    background: #ddd;
}

::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 40px;
    background: #fff;
    box-shadow: -200px 0 0 200px dodgerblue;
    border: 2px solid #999;
}

@media screen and (max-width: 600px) {
    /* 600px以下の場合のスタイル */
    input[type="range"] {
        width: 90%; /* 幅を変更 */
    }
}

こんな感じでスライダーでサーボの角度を調整できるhtmlファイルを作成しています。

https://webdesignfacts.net/entry/range-slider-css/#gsc.tab=0

サーボモーターの角度変更処理

server.on("/servo", HTTP_POST, [](AsyncWebServerRequest *request){
    if (request->hasParam("angle", true)) {
        int angle = request->getParam("angle", true)->value().toInt();
        if (angle >= 0 && angle <= 180) {
            myservo.write(angle);
            currentAngle = angle;
        }
    }
    request->send(200, "text/plain", "OK");
});

WebブラウザからのPOSTリクエストを受け取り、指定された角度にサーボモーターを動かします。変更が成功した場合には”OK”の応答を返します。

実際に携帯でサーボを動かしてみる

実際に動かした動画がこちらです。これらを行うことで、自分好みのブラウザを作成して、サーボモータをコントロールすることができました。簡単に作成できるので一度トライしてみてください。

Chat GPTでESP32のプログラムを作成する様子

ChatGPTを使用すると、非常に簡単にプログラムを作成することができます。ぜひ動画をご覧ください。

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。 このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円 で受講できるチャンス。
私がツナグバに登録してから、求人情報が豊富に届き、自分に合った仕事を見つけることができました。特に、第二新卒向けの求人情報が多いので、自分のスキルや経験を活かしながら新たなキャリアに挑戦することができました。転職活動は不安も多いですが、ツナグバのサポートがあれば、成功への道が明るく感じました。