ESP32 / 8266 無線でスケッチ & SPIFFS アップロード!!
こんにちは、Rcatです。
今回はESP32とESP8266マイコンに対して、無線（Wi-Fi）経由でArduinoスケッチの書き込みと、ファイルのアップロード（SPIFFSアップロード）を行う方法を紹介します。
この方法を採用することで最初の書き込み以降は一切配線を行うことなくスケッチ（プログラム）やファイルシステム上のファイルを変更することができます。
特にESP8266でファイルをアップロードしたいなと思い検索しても、線を繋いで書き込むことをアップロードと表現していることが多く情報が得られなかったのですが、手探りで何とか書き込みに成功しました。
なお、アップロードという言葉から分かるようにESPマイコンはWEBサーバーとして利用する工作の話となりますのでご了承ください。
本記事はテキスト情報収集用の抜粋記事です。詳細情報はこちらの動画をご視聴ください。
ソースの配布もこちらの説明欄から行っています。
具体的に何ができる?
Wi-Fi経由でのファイルの転送
WEB経由でファイルをマイコンのファイルシステムに書き込むことができます。Wi-Fi経由でスケッチの書き込み
コンパイルしたbinファイルをWEB経由でアップロードすることでスケッチを書き込みできます。
サンプル紹介
私が作成したWEB工作テンプレートファイルには次の機能があります。
なお、すべてのWEBページはスケッチに埋め込まれているので別途ファイルを書き込む必要はありません。
WEBエクスプローラー
ESPマイコン上のファイルシステムにファイルをアップロードしたり削除したりする機能
JavaScript併用で使い勝手も良いファームアップデータ
ESPマイコンのスケッチを上書きする機能
サンプルスケッチを参考に移植し、WEBページを使いやすく自作Wi-Fi設定
接続先の設定やAPモードの設定、固定IPアドレスの設定などが行える便利な機能トップページ
各機能を利用するためのリンクが張られたページ
index.htmlをアップロードすると表示されなくなるオンラインアップデート
アップデートで追加された機能。別記事参照。Google Driveに保存したコンパイル済みスケッチをダウンロードしてOTAアップデートを行う。ボタンひとつでスケッチを更新できるため、自分用でない作品へのアップデート提供が容易。
各機能の使い方
WEBエクスプローラー
WEBエクスプローラーはESPマイコンにファイルを無線でアップロードする機能です。
アップロード
アップロードエリアをクリック/タップするか、ドラッグ&ドロップでファイルをアップロードできます。htmlやjsファイルの更新に便利です。一覧表示
既存のファイルが存在する場合は一覧表示されます。
ファイルをクリックすることで開くこともできます。削除
ファイル名右のボタンをクリックすることでマイコン上からファイルを削除することができます。
スケッチアップデーター
スケッチアップデータはWi-Fi経由でスケッチを書き込む機能です。
こちらは、事前にArduinoでスケッチをコンパイルしてそれを青いアップロードエリアからアップロードすることで書き込むことができます。
こちらはサンプルスケッチを自分のテンプレートに沿うように移植した機能です。アップロードページだけは完全に自作ですが。
Wi-Fi設定
ESP工作と切り離せないWi-Fi接続。
スケッチにSSIDとパスワードを書くのは簡単ですが、変更時はスケッチ事書き換えなければならなかったり、誰かの分を作るといった場合は不都合です。
そこでこちらのWi-Fi設定ページです。初回は設定が無いのでAPモードで起動するため、最初にここにアクセスして設定を行います。
クライアント設定
自宅のWi-Fiに接続するための設定はここで行います。APモード設定
APモード時のSSIDとパスワードをカスタムできます。固定IP
自宅のWi-Fi接続時に必ず同じIPアドレスになるようにする機能です。
いちいち変わってしまうとアクセスが大変なので非常に便利です。
トップページ
各機能にアクセスするためのリンク集機能を兼ねたトップページです。
なお、"index.html"をアップロードした場合はそれに置き換わるため表示されなくなります。
オンラインアップデート
この動画以降のバージョンでの追加機能
詳しくは以下の記事を参照
端的に言うと、Googleドライブにコンパイル済みのスケッチを入れておいて、ESPマイコンからダウンロードしてスケッチを書き込む機能。
まとめ
今回はESP32 / ESP8266に対して無線でファイル転送とスケッチ書き込みができるテンプレートファイルを紹介しました。
テンプレートは紹介動画の説明欄から配布しているので、興味を持った方は是非ご利用ください。
ちなみに、シレっと埋め込まれたページが日本語になっていますがお気づきでしょうか?スケッチに埋め込んだHTMLで日本語を使う方法等は動画内で解説しています。
いいなと思ったら応援しよう！
