電子工作

エンジニア初心者でも大丈夫！ESP32を使った携帯からのリモートLチカ(Chat GPTで作成）

  /

みなさん、こんにちは！プログラミングやエレクトロニクスに挑戦することって、最初はハードルが高く感じることがありますよね？でもご安心を！今回の記事では、エンジニア初心者の方でも手軽に楽しめるプロジェクトをご紹介します。

「ESP32」という名前を聞いたことがありますか？これは手頃な価格で手に入るマイコンボードで、今回はこれを使って携帯からLEDを光らせる方法を紹介します。そう、まさにリモートLチカ！スマホを使って手軽に制御する方法、そしてその手順を丁寧に解説していきます。

私も初めてこのプロジェクトに取り組んだとき、ワクワク感と少しのドキドキ感が同時に押し寄せました。それが最後には、自分の手でLEDが光る瞬間を見て大満足。今回の記事では、その感動を皆さんにも味わっていただきたいと思います。

興味津々の方も、これからエレクトロニクスの世界を覗いてみようかなと思っている方も、ぜひ最後までお付き合いください！エンジニア初心者の方も一緒に楽しみながら学べる内容に仕上げていきますよ。それでは、さっそくESP32の世界へダイブしてみましょう！

まこ

・電子工作ってどうやったらいいの
・ESP32を使ってIOTってどうやるの？

この記事の対象者

・携帯端末を使ったハイテクなDIYプロジェクトに挑戦してみたい方
・ESP32などのマイコンボードに興味を持っているが、まだ始めたことがない方
・簡単ながらも技術的なスキルを向上させることに興味がある方

こういうものが作成できます。

YouTubeでも紹介しています。

自己紹介
よすけ

よすけ

  1. 大手メーカ4社経験（機械系卒）
  2. Python・画像処理を用いて業務自動化を推進（DX担当）
  3. 現在はメーカのAIによる自動化のコンサル・ラズパイ/ESP32の業務への適用をすすめる

DX担当・AIへ興味があるが、業務への適用方法がわからない人に向けてブログ作成・コンサル業務を実施している

おすすめスクール
電子工作とあわせて、未経験からITエンジニアになることも可能です。
下記無料カウンセリングがありますので、一度ぜひ無料で受けてみてください。

ESP32を購入する際には、セットで購入するとお得です。また、スターターキットもお勧めになります。いろんな種類のセンサ・スイッチが入っているため、初心者に非常におすすめです。

Contents
  1. ESP32とは？
    1. ESP32の基本的な紹介
  2. 携帯からESP32でLEDをリモートで光らせるデモ
    1. プログラムの流れ
    2. プログラムの内容説明
    3. ESP32のセットアップ
    4. 実際の動画
  3. Chat

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

ESP32とは？

ESP32の基本的な紹介

ESP32（Espressif Systems社製）は、低コストで高い性能を備えたWiFiおよびBluetooth対応のマイコンボードです。Arduinoとの互換性があり、広く使われている開発ボードの一つです。ESP32は、IoT（Internet of Things）プロジェクトやハードウェア開発者にとって魅力的な選択肢となっています。

主な特徴
  • デュアルコアプロセッサ:
  • ESP32は、デュアルコアのTensilica LX6プロセッサを搭載しており、処理能力が向上しています。
  • WiFiとBluetooth対応:
  • 組み込みのWiFiおよびBluetoothモジュールが搭載されており、無線通信に対応しています。
  • 多彩なGPIOピン:
  • ESP32には多くのGPIO（General Purpose Input/Output）ピンが備わっており、様々なセンサーやアクチュエータを接続できます。
  • 低消費電力設計:
  • ローエネルギーモードがサポートされており、バッテリー駆動のプロジェクトにも適しています。
  • Arduino IDEサポート:
  • Arduino IDEでESP32をサポートしており、使い慣れた環境で開発が可能です。

携帯からESP32でLEDをリモートで光らせるデモ

では実際に動かしていきます。プログラムの流れは下記になります。

プログラムの流れ

プログラムの機能
  1. WiFi接続:
    • プログラムはWiFiライブラリを使用して、指定したSSIDとパスワードでWiFiに接続します。
  2. Webサーバーの起動:
    • WebServerライブラリを使用してESP32上にWebサーバーを構築します。サーバーはポート80でリクエストを待ち受けます。
  3. HTMLおよびCSSの生成:
    • handleRoot関数では、LEDの状態を表示するHTMLページを生成しています。CSSを使用してボタンをスタイリッシュに表示しています。
  4. LEDのオン/オフ制御:
    • /onおよび/offエンドポイントに対するGETリクエストを処理する関数が定義されています。これにより、LEDをオンまたはオフに切り替えられます。
  5. ボタンのリンクとリダイレクト:
    • ボタンをクリックすることで、リンクされたエンドポイントにGETリクエストが送信され、LEDがオンまたはオフになります。その後、303ステータスコードによりリダイレクトが行われます。

プログラムの内容説明

実際のプログラムは下記となっております。自分のWiFi環境に合わせて、SSIDとpasswordを更新してください。

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

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

WiFiおよびWebServerのライブラリを使用します。WiFiライブラリはESP32をWi-Fiネットワークに接続するために使用され、WebServerライブラリはESP32上でWebサーバーを構築するために使用されます。

WiFi接続情報:

const char* ssid = "Your SSID0";
const char* password = "Your PASSWORD";

WiFiネットワークに接続するためのSSIDとパスワードを指定します。Your SSID0とYour PASSWORDの部分に実際のネットワーク情報を記述してください。

LEDピンと状態:

const int ledPin = 25;
bool ledState = false;

LEDが接続されているピン（ここではGPIO 25）と、LEDの現在の状態を格納する変数を定義します。

WebServerのインスタンス:

WebServer server(80);

Webサーバーのインスタンスをポート80で作成します。

setup()関数:

void setup() { // ... (WiFi接続、Webサーバーの設定など)
}

初期セットアップを行います。WiFiに接続し、Webサーバーのルートやハンドラーを設定します。

loop()関数:

void loop() {
    // クライアントのリクエストを処理
    server.handleClient();
}

メインのループでは、Webサーバーがクライアントのリクエストを処理します。

ハンドラー関数:

handleRoot():

ルートパス (“/”) へのGETリクエストに対応します。LEDの状態を表示し、LEDをオンまたはオフにするボタンがあります。

handleOn():

/on へのGETリクエストに対応し、LEDをオンにしてルートにリダイレクトします。

handleOff():

/off へのGETリクエストに対応し、LEDをオフにしてルートにリダイレクトします。

これにより、ESP32がWi-Fiネットワークに接続し、Webサーバーを構築し、LEDの状態をWebページで表示し、ボタンを使用してLEDをオンまたはオフに切り替えることができます。

handleRoot()の部分でhtmlの内容を記載しており、携帯に表示されるブラウザの画面を修正することができます。今回はスタイルについても記載しております。

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

// WiFiの接続情報
const char* ssid = "Your SSID0";
const char* password = "Your PASSWORD";

// LEDが接続されているピン
const int ledPin = 25;
bool ledState = false;  // LEDの状態（オンまたはオフ）

WebServer server(80);

void setup() {
  Serial.begin(115200);

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

  Serial.println("Connected to WiFi");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  // Webサーバーのルート設定
  server.on("/", HTTP_GET, handleRoot);
  server.on("/on", HTTP_GET, handleOn);
  server.on("/off", HTTP_GET, handleOff);

  // LEDを制御するためのピン設定
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, ledState);

  // Webサーバーの起動
  server.begin();
  Serial.println("Web server started!");
}

void loop() {
  // クライアントのリクエストを処理
  server.handleClient();
}

void handleRoot() {
  // HTMLおよびCSSの生成
  String html = "<!DOCTYPE html><html>";
  html += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
  html += "<link rel=\"icon\" href=\"data:,\">";
  // CSS to style the on/off buttons
  html += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}";
  html += ".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;";
  html += "text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}</style>";
  html += "</head><body>";
  html += "<h1>ESP32 LED Control</h1>";
  html += "<p>LED Status: ";
  html += (ledState) ? "ON" : "OFF";
  html += "</p>";

  // LEDをオンまたはオフにするためのボタン
  if (ledState) {
    html += "<a href='/off'><button class='button'>Turn OFF</button></a>";
  } else {
    html += "<a href='/on'><button class='button'>Turn ON</button></a>";
  }

  html += "</body></html>";
  // クライアントにHTMLを送信
  server.send(200, "text/html", html);
}

void handleOn() {
  // LEDをオンにしてルートにリダイレクト
  ledState = true;
  digitalWrite(ledPin, HIGH);
  server.sendHeader("Location", "/");
  server.send(303);
}

void handleOff() {
  // LEDをオフにしてルートにリダイレクト
  ledState = false;
  digitalWrite(ledPin, LOW);
  server.sendHeader("Location", "/");
  server.send(303);
}

ESP32のセットアップ

デモの流れは下記になります。まずはESP32のセットアップが必要になります。

ESP32のセットアップ
  1. Arduino IDEのインストール:
    • Arduino IDEがまだインストールされていない場合は、Arduinoの公式サイトから最新バージョンをダウンロードしてインストールします。
  2. ボードマネージャーへのESP32の追加:
    • Arduino IDEを開き、メニューから「ファイル > マネージャーボード > ボードマネージャー」を選択します。
    • ボードマネージャー内で「ESP32」を検索し、”ESP32 by Espressif Systems”を選択してインストールします。
  3. ボードの設定:
    • インストールが完了したら、メニューから「ツール > ボード」で「ESP32 Dev Module」」を選択します。
  4. シリアルポートの設定:
    • ESP32をUSBで接続し、メニューから「ツール > ポート」で正しいシリアルポートを選択します。Windowsでは「COMx」、Macでは「/dev/cu.SLAB_USBtoUART」または同様のデバイスが対象です。
  5. 書き込みツールの設定:
    • メニューから「ツール > 書き込みツール」で正しいツール（通常は「ESP32 Dev Module」）を選択します。
    • 書き込み速度は通常「115200 bps」に設定します。
  6. テスト:
    • サンプルスケッチや自分のスケッチを書き込んで、ESP32に正常にコードが書き込まれることを確認します。

次に回路を作成します。回路はまずESP32をLEDと抵抗をつなぎ、25ピンに接続してください。また、LEDのカソード（-極）をGNDと接続します。

実際の動画

では実際に動かしてみましょう。下記に紹介する動画をのせます。

このように携帯で実際に操作することができるようになりました。
非常に簡単なのでぜひやってみてください。

電子工作をやっていくとプログラミングに対する知識が深まっていきます。私が現在大手メーカ4社経験した理由もTech Mentorで無料カウンセリングを受けて、転職に必要なものを身につけたからです。
こちらのカウンセリングは無料で受けられるため、ぜひ受けてみて、自分に何が必要かを確かめてください。自分に何が不足していて、どのようなスキルを身につけるべきかを理解することができます。必ず転職やスキルアップに役立ちます。

Chat

ChatGPTでプログラムを作成する様子

ChatGPTと電子工作は相性ばっちりです。実際にChat GPTを使用してプログラム作成した様子を載せているので是非見てください。

ESP32
🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。 このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円 で受講できるチャンス。
私がツナグバに登録してから、求人情報が豊富に届き、自分に合った仕事を見つけることができました。特に、第二新卒向けの求人情報が多いので、自分のスキルや経験を活かしながら新たなキャリアに挑戦することができました。転職活動は不安も多いですが、ツナグバのサポートがあれば、成功への道が明るく感じました。
RELATED POST
🚀 テックキャンプ エンジニア転職：無料カウンセリング受付中！ エンジニア転職を考えている方に、素晴らしい機会をお知らせします。私自身も【TECH::EXPERT】エンジニアスクール（現在のテックキャンプ）を経験し、その成果を実感しました。
🌟 Tech Mentor - プログラミング・Webデザイン・データサイエンスを学べるプログラミングスクールの無料カウンセリングをおすすめします！ 電子工作愛好者の皆さんへ、最適な学びの機会をご案内します。私もTech Mentorのプログラムを受講し、プログラミングやWebデザインのスキルを向上させました。