ESP8266ファイルシステム：SPIFFSについて

ESP8266にHTMLファイルなどの外部ファイルを添付する際に、SPIFFSを使いますが、いまいちよくわからない部分もあったので、覚書として書いておきます。Arduino IDEでのやり方です。

Toolのインストール（下準備）：
基本はこのESP8266のGitに書いてあるので、ここを見ればだいたい分かるはず。
まず、アップロードTool「esp8266fs.jar」をダウンロード（こちらのサイトのここから）。
現在のバージョンは0.3.0のようです。
ダウンロードした「ESP8266FS-0.3.0.zip」を解凍。
Macならアプリケーション>Arduinoを右クリックで「パッケージの内容を表示」。
Arduino>Contents>Java>tools>ESP8266FS>tool>esp8266fs.jar
となるような場所にファイルもしくはフォルダごと移動し、Arduino IDEを再起動で準備OK。

外部ファイルのアップロード：
Arduino IDEのメインのソースとなるinoファイルに添付したい外部ファイル（HTMLファイルなど）を取り込みます。

「ファイルを追加...」で任意の場所から外部ファイルを選択（今回はデスクトップ上にあるindex.htmlを選択）。

 外部ファイルを追加したら、「スケッチのフォルダを表示」で中身確認。

こんな感じ↑で、メインのinoファイルと同じディレクトリにdataフォルダが自動的に作成されており、その中に追加した外部ファイル（この場合index.html）が入っていることを確認できます。

つぎに、先ほどのツールを使って外部ファイルだけ（この場合index.htmlファイルだけ）をESP8266へ先にアップロードしておきます。

Arduino IDEのコンソール画面には、こんな感じでアップロード状況が表示されます。
3%くらいずつアップロードしているようで、かなり時間かかります。

この段階では、まだ外部ファイルだけのアップロードなので、メインのinoファイルに書かれたプログラムはアップロードされていないないはず。

最初に外部ファイルだけアップロードするときにこのような画面が出てきて、ファイルsizeなどが表示されています。この場合3052なので、約3kバイトという感じでしょうか。実際のindex.htmlを「情報を見る」で見てみると、8765バイトあるのですが、この差についてはよくわかりません。

メインのプログラムに外部ファイル読み込みコマンドを追加：
外部ファイルを読み込むためのプログラムを追加しておきます。
ESP8266では、Webサーバの表示用HTMLデータを用いることがよくあります。HTMLデータを読み込んだのちにString変数に入れておき、それをクライアント側に送信ということになります。
以下はinoファイルの冒頭部分です。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <WiFiClient.h>
#include "FS.h"

#define ledPin 13
#define relayPin 2

MDNSResponder mdns;

const char* ssid = "*****";
const char* password = "*****";
String webPage = "";
ESP8266WebServer server(80);

void setup(void){
  SPIFFS.begin();
  File f = SPIFFS.open("/index.html", "r");
  if (!f) {
    Serial.println("file open failed");
  }else{
    webPage = f.readString();
    f.close();
  }

最初のほうで、
#include "FS.h"
を呼んでおき、
setup()内で、

 SPIFFS.begin();
  File f = SPIFFS.open("/index.html", "r");
  if (!f) {
    Serial.println("file open failed");
  }else{
    webPage = f.readString();
    f.close();
  }

と書いて、index.htmlを読み込みつつ、String変数のwebPageに入れてしまいます。
Arduino IDEでのディレクトリは、data/index.htmlでしたが、ESP8266内では/index.htmlで読み込めます。
あとはこのままメインのプログラムと一緒に「マイコンボードに書き込む」でアップロードすればOK。

外部ファイルの確認や消去方法：
外部ファイルがアップロードされているのかどうかなど確認するには、SPIFFSのGitに詳しく書かれているので参考にするといいと思いますが、実際確認してみるプログラムを書いてみました。

#include "FS.h"

int val;
String filename;

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

void loop(){
  if(Serial.available()>0){
    val=Serial.read();
    if(val=='a'){//ファイル名やサイズの確認
      Dir dir = SPIFFS.openDir("/");
      while (dir.next()) {
        filename=dir.fileName();
        Serial.println("File Name: "+dir.fileName());
        File f = dir.openFile("r");
        Serial.println(f.size());
      }
      Serial.println("---a end");
      Serial.println("");
    }else if(val=='b'){//ファイルが存在するかどうか？
      if(SPIFFS.exists(filename)){
        Serial.println("File exists");
      }else{
        Serial.println("not exists");
      }
      Serial.println("---b end");
      Serial.println("");
    }else if(val=='c'){//ファイル削除
      SPIFFS.remove(filename);
      Serial.println("File removed");
      Serial.println("---c end");
      Serial.println("");
    }
  }
}

外部ファイルをアップロードしたESP8266に、このプログラムをアップロードします。この場合、inoファイルに書かれているプログラムはこれだけなので、もうすでに何らかのプログラムが書き込まれている場合は上書きされてしまうため要注意。
シリアルモニタを開いて、
a を入力でファイル名、サイズ（---a endで終了）
b を入力でそのファイルが存在するかどうか？（---b endで終了）
c を入力でそのファイルを削除（---c endで終了）
という感じです。
特にaはサンプルとほぼ同じですが、　while(dir.next())があるため、複数ファイル（html、css、jsファイルなど）あるならば、順次複数出力するのだと思います。

以下がシリアルモニタの出力結果の画面。

最初に、aでファイル名（ディレクトリも含め）、8765バイト（Macのファイルの「情報を見る」と同じ結果）。
次に、bで/index.htmlファイルが存在するかどうか？File existsで存在確認。
そして、cで/index.htmlファイルを削除。File removedで消去済み。
ファイル削除後、bで/index.htmlファイルの存在の再確認。もちろんnot existsで不在確認。
ちなみに、aを入力すると特に返答なし（ファイルがないため）。

たまに、複数あるESP8266にどの外部ファイルがアップロードされているか（あるいはアップロードされていないか）忘れてしまうときがあります。そのようなときには、内容確認としてこのようなことができれば便利かと。
さらに、ファイルの中身まで確認したいというなら、
File f=SPIFFS.open("/index.html","r");
String contents=f.readString();
Serial.println(contents);
などとすればいいのかもしれません。