【配布有】ESP32 Arduino IOT工作テンプレート（ESP32 / ESP32-S3 / ESP32-C3）

みなさんこんにちはRcatです。
今回は過去にも紹介していますが、ArduinoでESP32シリーズを使用したIOT工作のテンプレートについて紹介&使い方解説をします。
というのも、記事は更新できますが動画は更新できないので…。
新しいことを思いつくたびテンプレートは進化しますので是非スキして確認してみてくださいね。

何ができるテンプレートなの?

そもそもテンプレートってなんのテンプレートなのか。
それは、WEBサーバーを用いたIOT電子工作のテンプレートとなります。
WEBサーバーを使うことで、PC/スマホ問わずブラウザ（chrome,edge,safari等のネット見るやつ）を使用して工作の操作ができるようになります。
そして、画面の表示はHTML/CSSで作成できるため完全に自由かつ、JavaScriptも使えるので非常に拡張性が高いです。
例えば、記事作成時点での最新作は以下のスマホ操作RCです。
こういう工作ができるようになるテンプレートで、もちろん下記も使用しています。

現在テンプレートには以下の機能が組み込まれています。
そして、それらの機能に加えてそれぞれの工作オリジナルの部分を加えることで高機能な工作を手軽に始められるのがこのテンプレートの狙いです。
各機能の詳細は個別のセクションで解説。

• Wi-Fi簡単設定機能
  自宅のWi-Fi設定をスマホから行える機能です。初回はAPモードで起動しますので、スマホで接続して設定画面から操作できます

• WEBサーバー機能
  各種機能のページと、工作で新しくページを作成するためのテンプレートソースが入っています。
  また、SPIFFS及びSDカードに格納されたファイルをそのまま返す機能も持っています。

• OTAアップデート機能
  無線でスケッチを書き込む機能です。以下の方法があります

  • コンパイル済みバイナリをアップロードして書き込み

  • オンライン書き込み

    • GoogleドライブからRcat公式ファームウェアを選択して書き込み
      公開している作品のバイナリがあればそれをオンライン書き込みできます。

    • ワンクリック書き込み
      ボタン一つで最新のスケッチにアップデートできます。

    • 任意のIDで書き込み
      Googleドライブに格納された任意のバイナリを書き込めます

• ファイルエクスプローラ機能
  SPIFFSファイルシステム及びSDカードをブラウザから使用する機能。
  Go〇gleドライブのようなイメージでESP32でファイルを扱うことができます。
  以下のようなことが行えます。

  • ファイルのアップロード/ダウンロード

  • ファイルの削除

  • 名前変更

  • 使用率チェック

• SDカード管理機能
  ファイルエクスプローラ機能のサブシステムとして内包。
  SDライブラリとSD_MMCライブラリを切り替えて好きな方でSDカードにアクセスできます。
  Webサーバーとして使うときにファイルサイズが大きくて、spiffsには入らないようなデータはSDカードに入れてそこから参照させるといった使い方もできます。細かいログを残すとSPIFFSを傷めるので、ログ用にもいいですね

• IOピンテスト
  スケッチに"digitalWrite"等書かなくても、ブラウザからピン番号とテスト方法を指定してピンを操作できます。

• BLE シリアル
  Bluetooth Low Energyのシリアル通信用のソースが埋め込まれています。
  現在は何も機能は入れていませんが、今後アプリと通信してIPアドレスを通知させたり、Wi-Fi設定を出来るようにする予定

• WEB Socket
  WEB Socketを使用して双方向通信を行います。
  データが小さいので高パフォーマンス化したり、サーバーからデータを送るのに使います

• SSDP(M-SEARCH) IPアドレス検出機能
  IPアドレスが分からなくても通信ができます
  分からないなら教えてと聞くイメージの機能です

このうち、IOピン、BLE、WEB Socket、SDに関しては、ヘッダから簡単に機能を除外することもできます。
それ以外でも不要であれば切り取るなどしてスケッチ小型化を行うこともできます

機能別詳細

ここからは各機能の詳細な説明や使い方を見ていきましょう

Wi-Fi簡単設定機能

ESP32のWi-Fi設定どうしてますか?
スケッチにSSIDとパスワード書いてますか?
まぁ自分用ならそれでいいのかもしれませんが、ルーター買い換えたり誰かに作るとなると困りますね…。
それを解決するために、スケッチには何も書かず、後からスマホで簡単設定するのがこの機能です。
以下の設定を行うことができます。

• 自宅のWi-Fi設定
  Wi-Fiの接続設定をここで行うことができます。
  初回はESP32がテザリングのようにアクセスポイントモードで起動しますので、スマホから接続して設定を行うことができます。
  設定を完了し、再起動すると次は自宅のWi-Fiに接続します。

• APモード時の設定
  こちらは先ほどテザリングと表現したアクセスポイントモードの設定となります。ESP32がルーターのように振る舞うモードです。
  自宅のWi-Fiがない場合でも、ESP32から電波を飛ばすことで通信が可能です。その場合のSSIDとパスワードの設定をここで行います。
  なお、自宅のWi-Fiに接続しようとして、10秒以上接続できなかった場合にこのAPモードになるようになっています。
  そのため、トラブルで自宅のWi-Fiに接続できなかった場合もこのAPモードになってしまうので、その場合は自動的に再起動して再接続を試みる設定も用意されています。

• 固定IP設定
  自宅のWi-Fiに接続して割り当てられるIPアドレスが毎回変わってしまう場合、通信が困難となります。
  無線LAN側で設定できればそれでも大丈夫ですが、そういった機能がない場合、ESP32の方で自分はいくつのIPを使うということが設定できます。
  この設定を行うことで、IPアドレスは固定化され接続が容易となります。

OTAアップデート機能 （Ver1.3以降）

OTAアップデートというのをご存知でしょうか？
これはファームウェアを無線経由で書き換える機能で、ArduinoスケッチをWi-Fi経由で書き込むことができます。つまりはもう配線しなくていいというわけですね
なお、私のテンプレートには3つのOTAアップデートの方法が用意されています。

• バイナリをアップロード
  コンパイレ済みのバイナリファイルをブラウザからアップロードして書き込む方法です。
  開発中の書き込みや組み込んだ後のアップデートが非常に快適になります。

• Googleドライブからダウンロード
  Rcatオリジナルの機能で私のGoogleドライブに置いてあるバイナリを選択して、あなたのESP32に書き込むことができます。
  このテンプレートの最新のデータや一部の工作はデータか置いてあることがあるので、一覧から選択して手軽に書き込むことができます。
  また、任意のファイルIDを指定することで誰のバイナリでも書き込むことができるので、例えば自分の作った公開したくないけれど、誰かに使わせたい場合などはこの機能を使用することができます。

• ワンクリックアップデート
  この機能はGoogleドライブからダウンロードの派生版です。
  スケッチ内にGoogleドライブのファイルIDを記述しておくことで、スケッチを自分で選ぶことなく更新することができます。
  要するにその工作専用のオンラインアップデートができるというわけです。この機能に限って特定のURLにアクセスするだけで発動させることができますので、ご自身の工作にも簡単にアップデートボタンを追加することができます。

ファイルエクスプローラ機能

皆さんGoogleドライブなどクラウドストレージ扱ったことがありますか？
この機能はESP32のSPIFFSファイルシステムを、クラウドストレージのように使用する機能です。
ESP32へのファイルの書き込みをネットで検索しても有線の方法しか出てきません。正直、それは非常に使いづらいです。
それを解決するのがこのファイルエクスプローラー機能。
以下のようにブラウザからファイルをアップロードしたり、削除したり名前を変えたりすることができます。
ちなみにですが、Webサーバーの基本に則っており"index.html"を格納すると、トップページがそれに置き換わる仕掛け付きです。

SDカード管理機能（Ver 1.6以降）

ファイルシステムエクスプローラー機能に内包されているサブシステムです。
ファイルシステムエクスプローラーを使用して、SDカードにファイルをアップロードしたり、削除したりすることができます。また、大きなファイルはSDカードから参照するようにすれば、複数の画像などをページ内に表示させてもフラッシュが足りなくなりません。

WEBサーバー機能

さて、前項からチラチラWebサーバーという言葉を使用していますが、そもそもArduinoでサーバーってどういうこと？というのをここでお話ししておきましょう。
前の話とかぶりますが、Webサーバーというのは基本的にブラウザからリクエストを受け、レスポンスを返すものです。電子工作ではなく、普通のウェブサーバーであればウェブページを返すのが普通です。ウェブページって何?というのは例えばこれです、このnote記事、これをノートのWEBサーバーにに"Rcatさんの記事見せてください"という風にリクエストを送った結果、返ってきたのが今表示されているこのページというわけです。
例えば、最初に紹介しているラジコンの動画では、運転に必要なハンドルやアクセルが描写されたウェブページを返すことで、操作パネルを作成しています。
しかし、Webサーバーはただレスポンスを返すだけのものではありません。リクエストに応じて何かしらの動作をしてレスポンスを返すということが可能なのです。
例えば、ネットショッピング。欲しいものをカートに入れてレジに進んで会計すれば物が届きますよね。物を運んでるのは人間かもしれませんが、注文の処理をするというのは、Webサーバーやその関連システムの仕事です。
では、Arduinoの場合はどうなるのか？それはLEDをオンオフしたり、モーターを動かしたりと言った電子回路の制御となります。
つまり、Arduinoウェブサーバーにモーターを動かせと指示したり、LEDをオンにしろと指示することによって工作の制御が可能になるというわけです。
もちろん指示だけでなく要求もすることができるので、例えば温度センサーを搭載して温度をよこせと指示すれば、今室温が何℃であるといった情報を得ることもできます。
少し長くなりましたが、これがWebサーバーを使った工作の基本的な部分となります。
ちなみに、このテンプレートは普通のWebサーバーのようにディレクトリに格納されているファイルを返すことができますので、先ほどのファイルシステムエクスプローラーを使用して、HTMLファイルやJavaScriptファイルを格納して、そのURLを指定することで普通のWebサーバーのように扱うこともできます。

WEB Socket（Ver 1.5以降）

工事中

IPアドレス自動検出機能（M-SEARCH）（Ver 1.7以降）

「お客様の中にお医者様はいらっしゃいますか?」物語でよく聞くような言い回しですが、これをネットワークで行う機能があります。
具体的には、特定のサービスを持つデバイスがあるかどうかマルチキャストで全体に呼びかけ、該当するサービスは応答するというものです。
この機能については以下で詳しくまとめましたので気になる方はご確認ください。

IOピンテスト

スケッチを変更することなく、デジタルピンのHIGH/LOWやリードを行うことができるテストページです。

BLE シリアル（Ver1.3以降）

ESP32にはBluetoothが搭載されているため、それを使用したシリアル通信も組み込んであります。
とはいえ、メインはWEBサーバーですのでWi-Fi関連情報を取得するのがメインの目的となっております。
しかし、テンプレートのソースコードにオリジナルの処理を追加することで、Bluetoothデバイスの作成も行うことができます。
なお、スケッチサイズが大きくなりすぎてしまいますので、4mbのESP32には書き込めません。

記事作成時点でのシリアルコマンド

• wifi
  wi-fiのオンオフを行うことができます。

• wifiinfo
  現在のIPアドレスを取得することができます。

• snamechange
  Bluetoothシリアルのサービス名を変更することができます。

• reboot
  ESP32を再起動させることができます。

• stop
  Bluetoothシリアルサービスを終了することができます。

まとめ

今回はWebサーバーIoT工作テンプレートを紹介しました。
暫定でスケッチに全部設定やらHTMLやら入れるならまだ簡単ですが、それらを後から手軽に変更できるようにしようと思うとかなり大変です。
しかし、このテンプレートにはそれらを全て搭載しているのですぐに始められます。
各機能はそれなりにこだわって作成しているので使い勝手もいいです
少なくとも、私がこれを作成した時点では、ファイルをブラウザからアップロードできるESP32スケッチはなかったのではないかと思います。

配布情報

テンプレートは以下の動画から取得できます
※本バージョンからESP32シリーズのみの対応となります
※理由としては、ESP8266よりESP32-C3の方が性能とコストに優れておりESP8266を使う理由がなくなったからです

Ver1.6

Ver1.7

または以下から旧バージョンを入手できますVer1.2

以下の動画内のテンプレートは古くなったので配布終了しました
上記の動画のどちらかのテンプレートをご使用ください
Ver1.0