ESP32も少しずつ試してはいるのですが、SPIFFSファイルアップロードの仕方がわからない。ESP8266の場合、HTMLファイルなどをアップロードするためには以前やったように「esp8266fs.jar」を使えばよかったのですが、ESP32には「esp8266fs.jar」のようなものはまだないのでしょうか？
Arduino IDEには、「ライブラリのインポート」では一応「FS」があり、インポートはできるようになっているけれども、ファイルのアップロード自体どうすればいいのか？
追記：2017年10月
どうやらESP32のファイルアップローダーできたみたいです。ファイルアップローダーの使い方についてはこちらへ。
インクルードされたライブラリもESP8266のとは違うので、ESP8266と同じ要領ではできなさそう。
ネットで調べてみても、これといったものがないし、フォーラムにもいくつか載っていたけれども、具体的にどうすればいいのかサンプルなどがないのでわかりにくい。
・Virtual filesystem compornent（vfs）
・partitions
この辺を見ればいいのかもしれないけれども、かなりわかりにくい。SPIFFS用のパーティションのオフセットは0x210000らしい。
おそらく、SPIFFSやFATなどのファイルシステムAPIをパーティション0x210000へflashするとつかえるようになるのかもしれない。Lua-RTOS-ESP32が唯一使えるというような投稿もあるけど、具体的なサンプルなどがないのでわからない。だれか成功例のサンプルをどこかに挙げてもらいたいですね。その他、JavaScriptをベースにするEspruinoやDuktape、あるいはMicroPythonを載せてしまうという手もあるけど。あとは、サンプルのあるSDカードから読み込む方法となるのかも。
ESP8266に関しては、かなりのサンプルが見つかるので扱いやすいけど、ESP32のほうはまだそんなにないというか、仕組みもESP8266よりも複雑みたいで、そのぶん扱いにくいのかも。しかたないのでしばらく待つことにして、かわりに以下の方法で。
他のWebサーバからESP32のRAMへ読み込ませる：
ソース（C言語/Arduino言語）の中にHTML（CSS、JavaScript）を埋め込んで毎回アップロードするのは面倒なので、どうせ読み込んだHTMLデータはString変数へ入れられるので、わざわざROMにアップロードしておかなくてもいいはず。電源を落とせば、RAMの場合消えてしまうけど、毎回電源を入れるたびに、setup()内で外部から読み込ませれば同じことかもしれない。
ということで、ESP32からHTTPリクエストを出して他のサーバに置いてあるHTMLファイルを読み込ませようという実験をしてみました。
まずHTMLファイルをアップロードできる無料Webサーバに、今回の場合data.htmlというファイルをあげておきます。data.htmlには、ESP32（Webサーバ）にリクエストがあった場合のレスポンス用HTMLが書いてあります。ブラウザ上にスイッチのON/OFFなどの画面が出てきて制御できるということになります。
サンプルのつぎはぎなので、もしかすると矛盾があるかもしれないけれども、一応機能しました。
ESP32の電源を入れると、setup()内の最後に書いてあるhttpRequest()によって外部サーバにリクエストを出して、そのURLのHTMLを読み込みます。読み込んだ内容はwebPageという変数に入れてしまいます。これが表示用のHTMLデータとなります。
今回の場合はESP32がWebサーバとして機能しており、静的IPアドレス192.168.3.20に固定され、それ以下のディレクトリにアクセスすると：
/（ルート）：もともとソースに書き込まれた単純なHTMLを表示
/load :再度HTMLデータを読み込むとき（表示はもともとのHTML）
/on :ロードしたHTMLによる画面表示、23番ピンに接続したLEDをON
/off :ロードしたHTMLによる画面表示、23番ピンに接続したLEDをOFF
となります。
外部サーバからのレスポンスには「HTTP/1.1 200 OK」などのheaderの情報が含まれるので、
ちょっとだけHTMLを書き換えて確かめたいときは、このやり方のほうが早いのかもしれません。毎回ESP32にアップロードするのは確かに面倒。こうすれば、ESP32にはHTML（CSSやJavaScript）データをアップロードしなくてもすむので楽かなと。
ESP8266の場合も、ファイルアップローダを使うとけっこう時間（5分とか）かかるので、この方法のほうが早そうです。
Arduino IDEには、「ライブラリのインポート」では一応「FS」があり、インポートはできるようになっているけれども、ファイルのアップロード自体どうすればいいのか？
追記：2017年10月
どうやらESP32のファイルアップローダーできたみたいです。ファイルアップローダーの使い方についてはこちらへ。
インクルードされたライブラリもESP8266のとは違うので、ESP8266と同じ要領ではできなさそう。
ネットで調べてみても、これといったものがないし、フォーラムにもいくつか載っていたけれども、具体的にどうすればいいのかサンプルなどがないのでわかりにくい。
・Virtual filesystem compornent（vfs）
・partitions
この辺を見ればいいのかもしれないけれども、かなりわかりにくい。SPIFFS用のパーティションのオフセットは0x210000らしい。
おそらく、SPIFFSやFATなどのファイルシステムAPIをパーティション0x210000へflashするとつかえるようになるのかもしれない。Lua-RTOS-ESP32が唯一使えるというような投稿もあるけど、具体的なサンプルなどがないのでわからない。だれか成功例のサンプルをどこかに挙げてもらいたいですね。その他、JavaScriptをベースにするEspruinoやDuktape、あるいはMicroPythonを載せてしまうという手もあるけど。あとは、サンプルのあるSDカードから読み込む方法となるのかも。
ESP8266に関しては、かなりのサンプルが見つかるので扱いやすいけど、ESP32のほうはまだそんなにないというか、仕組みもESP8266よりも複雑みたいで、そのぶん扱いにくいのかも。しかたないのでしばらく待つことにして、かわりに以下の方法で。
他のWebサーバからESP32のRAMへ読み込ませる：
ソース（C言語/Arduino言語）の中にHTML（CSS、JavaScript）を埋め込んで毎回アップロードするのは面倒なので、どうせ読み込んだHTMLデータはString変数へ入れられるので、わざわざROMにアップロードしておかなくてもいいはず。電源を落とせば、RAMの場合消えてしまうけど、毎回電源を入れるたびに、setup()内で外部から読み込ませれば同じことかもしれない。
ということで、ESP32からHTTPリクエストを出して他のサーバに置いてあるHTMLファイルを読み込ませようという実験をしてみました。
まずHTMLファイルをアップロードできる無料Webサーバに、今回の場合data.htmlというファイルをあげておきます。data.htmlには、ESP32（Webサーバ）にリクエストがあった場合のレスポンス用HTMLが書いてあります。ブラウザ上にスイッチのON/OFFなどの画面が出てきて制御できるということになります。
#include <WiFi.h>
#include <ESPmDNS.h>
#include <WiFiClient.h>
#define ledPin 23
const char* ssid = "*****";
const char* password = "*****";
const char* host = "www.abc.com";//無料サーバのホスト
String url ="/esp32/data.html";//読み込ませるデータのurl
String header = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
String footer = "\r\n\r\n";
String webPage = "";
const uint16_t port = 80;
WiFiServer server(port);
void setup(void){
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
//webPage += "<!DOCTYPE HTML>\r\n<html>No Contents, yet.</html>\r\n\r\n";
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
//固定IPアドレス
WiFi.config(IPAddress(192,168,3,20),IPAddress(),IPAddress());
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
//DNSサーバ名（esp32.local）
if (!MDNS.begin("esp32")) {
Serial.println("Error setting up MDNS responder!");
while(1) {
delay(1000);
}
}
Serial.println("mDNS responder started");
server.begin();
Serial.println("TCP server started");
MDNS.addService("http", "tcp", port);
httpRequest();//ここで外部ファイルをロードしておく
}
void loop(void){
WiFiClient client = server.available();
if (!client) {
return;
}
Serial.println("");
Serial.println("New client");
while(client.connected() && !client.available()){
delay(1);
}
String req = client.readStringUntil('\r');
int addr_start = req.indexOf(' ');
int addr_end = req.indexOf(' ', addr_start + 1);
if (addr_start == -1 || addr_end == -1) {
Serial.print("Invalid request: ");
Serial.println(req);
return;
}
req = req.substring(addr_start + 1, addr_end);
Serial.print("Request: ");
Serial.println(req);
client.flush();
String s;
if (req == "/"){//ルートへアクセスした場合はロードしていないHTMLを表示
IPAddress ip = WiFi.localIP();
String ipStr = String(ip[0]) + '.' + String(ip[1]) + '.' + String(ip[2]) + '.' + String(ip[3]);
s = header;
s += "<!DOCTYPE HTML>\r\n<html>Hello from ESP32 at ";
s += ipStr;
s += "<div><a href=\"/on\">TEST: ON</a></div>";
s += "<div><a href=\"/off\">TEST:OFF</a></div>";
s += "<div><a href=\"/load\">LOAD DATA</a></div></html>";
s += footer;
}else if(req == "/load"){//ロードする画面
httpRequest();//外部サーバへリクエスト
s = header;
s += "<!DOCTYPE HTML>\r\n<html>";
s += "<div><a href=\"/on\">TEST: ON</a></div>";
s += "<div><a href=\"/off\">TEST:OFF</a></div>";
s += "<div>HTML Data Loaded</div></html>";
s += footer;
}else if(req == "/on"){//ロードされた画面
s = header;
s += webPage;
s += footer;
digitalWrite(ledPin, HIGH);
}else if(req == "/off"){//ロードされた画面
s = header;
s += webPage;
s += footer;
digitalWrite(ledPin, LOW);
}else{
s = "HTTP/1.1 404 Not Found\r\n\r\n";
}
client.print(s);
}
void httpRequest(){//ロード用のリクエスト
Serial.print("connecting to ");
Serial.println(host);
WiFiClient myclient;
if (!myclient.connect(host, port)) {
Serial.println("connection failed");
delay(5000);
return;
}
myclient.print(String("GET ") + url + " HTTP/1.1\r\n" +
"Host: " + host + "\r\n" +
"Connection: close\r\n\r\n");
delay(100);
boolean start=false;
while(myclient.available()){
String line = myclient.readStringUntil('\r');
if(line.indexOf("<!DOCTYPE html>")>0){
start=true;
}
if(start){
webPage+=line;
}
}
Serial.println("closing connection");
myclient.stop();
}
サンプルのつぎはぎなので、もしかすると矛盾があるかもしれないけれども、一応機能しました。
ESP32の電源を入れると、setup()内の最後に書いてあるhttpRequest()によって外部サーバにリクエストを出して、そのURLのHTMLを読み込みます。読み込んだ内容はwebPageという変数に入れてしまいます。これが表示用のHTMLデータとなります。
今回の場合はESP32がWebサーバとして機能しており、静的IPアドレス192.168.3.20に固定され、それ以下のディレクトリにアクセスすると：
/（ルート）：もともとソースに書き込まれた単純なHTMLを表示
/load :再度HTMLデータを読み込むとき（表示はもともとのHTML）
/on :ロードしたHTMLによる画面表示、23番ピンに接続したLEDをON
/off :ロードしたHTMLによる画面表示、23番ピンに接続したLEDをOFF
となります。
外部サーバからのレスポンスには「HTTP/1.1 200 OK」などのheaderの情報が含まれるので、
line.indexOf("<!DOCTYPE html>")
をつかってHTMLデータの始まりを確認してから、変数webPageに入れていきます。今回の場合は、CSSやJavaScriptもHTMLファイル内に書き込んであるので、このHTMLファイルだけを読み込めばOKということにしています。ちょっとだけHTMLを書き換えて確かめたいときは、このやり方のほうが早いのかもしれません。毎回ESP32にアップロードするのは確かに面倒。こうすれば、ESP32にはHTML（CSSやJavaScript）データをアップロードしなくてもすむので楽かなと。
ESP8266の場合も、ファイルアップローダを使うとけっこう時間（5分とか）かかるので、この方法のほうが早そうです。
AliExpress.com Product - Official DOIT ESP32 Development Board WiFi+Bluetooth Ultra-Low Power Consumption Dual Core ESP-32 ESP-32S ESP 32 Similar ESP8266976円（送料無料）最近だとAliExpressなら1000円以下になったみたいです。技適マークつきで、秋月のと同じタイプだと思います。
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/15b59f26.9855aa20.15b59f27.16c91a91/?me_id=1295324&item_id=10072033&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbestmatch%2Fcabinet%2Fproducts%2Fkeyboard%2Fc02535.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbestmatch%2Fcabinet%2Fproducts%2Fkeyboard%2Fc02535.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
