4-2.SPIFFSによるファイル操作

2019年8月20日

SPIFFSによるファイル操作1

ESP32-DevKitC(ESP-WROOM-32)には4MByteのフラッシュメモリが内蔵されていてSPIで接続されています。このフラッシュメモリをファイルシステムとしてストレージのように利用する事ができます。この機能をSPIFFS (SPI Flash File System)といいます。
SPIFFSは数MByteまで利用できますので、ファイルなどの比較的大きなデータでも保存できます。ESP32-DevKitC(ESP-WROOM-32)の場合はEEPROMもSPIFFSもフラッシュメモリに保存されますが、設定値など小さなデータはEEPROMを利用する方が扱いやすいため用途によって使い分けて利用します。

スケッチ(制御ソフトウェア)

SPIFFSを読み書きするスケッチを以下に示します。

①でSPIFFSのライブラリを読み込み、③でSPIFFSの利用を開始し、この2つ宣言でSPIFFSが利用できるようになります。
SPIFFSはファイルを読み込みする場合は⑥SPIFFS.openでファイルを書き込みモード”w”で開いています。開いたファイルを扱うために変数fwに格納しています。⑦fw.printlnでファイルに書き込みを行なっています。書き込む内容は⑤で定義した変数witeStrに保存されている内容となっています。書き込みが完了したので⑧でファイルを閉じています。
次に読み込みですが⑩SPIFFS.openでファイルを読み込みモード”r”で開いています。⑪で開いたファイルをreadStringUntil(‘\n’)で読み込んでいます。’\n’は改行を表していますのでUntilで改行まで読み込むということですので、一行分を読み込んでいるということになります。読み込みが完了したので⑫でファイルを閉じています。
⑬で読み込んだ内容を下図のようにシリアルモニタに表示しています。

SPIFFSによるファイル操作2

事前に作成したHTMLファイルをSPIFFSデータとしてESP32-DevKitC(ESP-WROOM-32)に保存しWebサーバで利用する方法を紹介します。
3-2.Webサーバ機能ではテキストデータをプログラムに記載し端末へ送信していましたが、今回は保存されたHTMLファイルをWebサーバが送信するように変更します。
SPIFFSデータとしてESP32-DevKitC(ESP-WROOM-32)に保存するためには、SPIFFSデータアップローダーが必要となりますのでインストール方法を以下に説明します。

SPIFFSデータアップローダーをインストール

アップローダーのインストールを以下の通り実施して下さい。
(1)アップローダーのサイトを開きます。こちらにアクセスし「release page」をクリックします。

(2)最新のアップローダーをダウンロードします。
(以下の場合は「ESP32FS-1.0.zip」が最新となりますので、こちらをクリックしダウンロードします。)

(3)ダウンロードしたファイルを解凍します。

(4)ArduinoIDEの「ファイル」から「環境設定」を選択しArduinoフォルダ「スケッチブックの保存場所」を取得(下図)し、そのフォルダ配下に「tools」というフォルダを作成します。

(5)ダウンロードし解凍したフォルダ「ESP32FS」を作成した「tools」フォルダに入れます。

以上で、アップローダーが使えるようになりましたので、ArduinoIDEを終了し再度、起動してください。

SPIFFSデータのアップロード(書き込み)方法

(1)予め表示させるHTMLファイルをパソコン上に作成します。
パソコン上にメモ帳などのテキストエディタを開き、以下の内容でhtmlファイルを作成し「hello.html」で保存します。

(2)ArduinoIDEでスケッチディレクトリを開きます。メニューの「スケッチ」の「スケッチのフォルダを表示」を選択するとスケッチのあるフォルダが表示されます。

(3)スケッチディレクトリに「data」フォルダを作成します。

(4)(1)で作成した「hello.html」ファイルをスケッチフォルダのdataフォルダ内に保存します。

(5)dataフォルダ内のデータを、ESP32-DevKitC(ESP-WROOM-32)に書き込みます。
書き込みはArduinoIDEの「ツール」をクリックし「ESP32 Sketch Data Upload」を選択してください。

注意)エラーが表示された場合は、ツールの「シリアルポート」が選択されていること。また、シリアルモニタ画面を閉じていることを確認して下さい。

書き込みが始まるとArduinoIDEのステータス欄「SPIFFS Uploading Image…」と表示され、完了すると下図のように「SPIFFS Image Uploaded」と表示されます。

以上でSPIFFSデータの書き込みが完了しました。次に書き込んだファイルを利用するスケッチを説明します。

スケッチ(制御ソフトウェア)

3-2.Webサーバ機能で作成したスケッチと多くの内容が同じため、SPIFFSのデータファイルを利用する変更部分について説明します。
(スケッチ全体はダウンロードし確認ください。)
以下のように、SPIFFSの利用開始には①SPIFFSライブラリ「SPIFFS.h」の読み込み、setup関数内でSPIFFSを利用する宣言として「SPIFFS.begin();」が必要となります。
また、SPIFFSファイルを送信する関数⑰sendHtmlを新たなに定義し、⑭で”/”にアクセスがあった場合に sendHtml関数を呼び出す設定を以下のように変更します。

⑰sendHtml関数でファイルを送信しますが、⑱の「request->send(SPIFFS, “/hello.html”, “text/html”);」で”/hello.html”ファイルを送信するようにしています。

変更が完了したらスケッチを書き込みし、プログラムを実行してください。Webブラウザで「http://192.168.1.123」にアクセスし以下のように表示されれば正常に動作しています。