SPIFFSの使い方、フラッシュメモリに簡単データ保存 ESP32

#include <SPIFFS.h>

void setup() {
  SPIFFS.format(); // 初回フォーマット時のみ有効にする（次回書き込みからは無効にする）

  // ・・・その他の初期設定・・・
}

#include <M5StickCPlus2.h>
#include <SPIFFS.h>

/*************************** ファイル作成関数 ***************************/
void createFile() {
  // ファイル作成
  File file = SPIFFS.open("/file.txt", FILE_WRITE); // ファイルを作成して開く
  if(!file){  // ファイルが開けなければ
    M5.Lcd.println("Failed to create file"); // エラー表示
    return;
  } else {    // ファイルが開ければ
    M5.Lcd.println("Create file"); // ファイル作成実行表示
  }
  // ファイルにデータを書き込む
  String text = "Hello World!";   // 書き込む文字列を準備
  file.println(text);             // 文字列書き込み実行
  file.printf("%dms", millis());  // 実行時間書き込み
  file.close(); // ファイルを閉じる
}

/************************** ファイル読み込み関数 **************************/
void readFile() {
  M5.Lcd.fillScreen(BLACK); // 背景色
  M5.Lcd.setCursor(0, 0);   // 座標設定(x, y)

  String file_name = "/file.txt";  // ファイル名の指定
  if (SPIFFS.exists(file_name)) {  // ファイルが存在すれば
    // ファイルを開く
    File file = SPIFFS.open(file_name, FILE_READ); // ファイルオープン
    if(!file){  // ファイルが開けなければ
      M5.Lcd.println("Failed to open file"); // エラー表示
      return;
    } else {    // ファイルが開ければ
      M5.Lcd.println("Open file to read");   // 読み取り実行表示
    }
    // ファイルの内容を読み取り表示
    M5.Lcd.setTextColor(WHITE, BLACK); // (文字色, 背景)
    while(file.available()){  // ファイルのデータ分繰り返す
      char c = file.read(); // ファイルから1バイトずつデータを読み取り
      M5.Lcd.print(c);      // 液晶へ表示
    }
    M5.Lcd.setTextColor(ORANGE, BLACK); // (文字色, 背景)
    M5.Lcd.print("\n");                 // 改行
    // ファイルを閉じる
    file.close(); 
  } else {  // ファイルが存在しなければ
    M5.Lcd.println("File does not exist");  // エラー表示
  }
}

// 初期設定 -----------------------------------------
void setup() {
  auto cfg = M5.config();  // 本体初期設定
  StickCP2.begin(cfg);

  // 画面の初期設定
  M5.Lcd.fillScreen(BLACK); // 背景色
  M5.Lcd.setRotation(3);    // 画面向き設定（USB位置基準 0：下/ 1：右/ 2：上/ 3：左）

  M5.Lcd.setFont(&fonts::Font4);      // フォント
  M5.Lcd.setCursor(0, 0);             // 座標設定(x, y)
  M5.Lcd.setTextColor(ORANGE, BLACK); // (文字色, 背景)
  M5.Lcd.println("SPIFFS TEST");      // タイトル表示

  SPIFFS.format(); // 初回フォーマット時のみ有効にする（次回書き込みからは無効にする）
  
  // SPIFFS の初期化
  if(!SPIFFS.begin()){
    M5.Lcd.println("SPIFFS initialization failed!");  // エラー表示
    return;
  }
}

// メイン -----------------------------------------
void loop() {
  M5.update();  //本体ボタン状態更新
  // ボタンA（ファイル作成）
  if (M5.BtnA.wasPressed()) {
    createFile(); // ファイルの作成
  }
  // ボタンB（ファイル読込）
  if (M5.BtnB.wasPressed()) {
    readFile(); // ファイルの読み込み
  }
  delay(200); // 遅延時間
}

#include <SPIFFS.h>

void setup() {
  SPIFFS.format(); // 初回フォーマット時のみ有効にする（次回書き込みからは無効にする）
  SPIFFS.begin();  // SPIFFSの初期化

  // ・・・その他の初期設定・・・
}

void createFile() {
  File file = SPIFFS.open("/file.txt", FILE_WRITE); // ファイルを作成して開く

  // ファイルにデータを書き込む
  String text = "Hello World!";   // 書き込む文字列を準備
  file.println(text);             // 文字列書き込み実行
  file.printf("%dms", millis());  // 実行時間書き込み

  file.close(); // ファイルを閉じる
}

void readFile() {
  String file_name = "/file.txt";  // ファイル名の指定

  if (SPIFFS.exists(file_name)) {  // ファイルが存在すれば
    File file = SPIFFS.open(file_name, FILE_READ); // ファイルを開く

    // ファイルの内容を読み取り表示
    while(file.available()){  // ファイルのデータ分繰り返す
      char c = file.read(); // ファイルから1バイトずつデータを読み取り
      M5.Lcd.print(c);      // 液晶へ表示
    }
    file.close(); // ファイルを閉じる
  }
}

void spiffsInfo() {
  M5.Lcd.fillScreen(BLACK);  // 背景色
  M5.Lcd.setCursor(0, 0);    // 座標設定(x, y)

  File file = SPIFFS.open("/");            // ルートディレクトリを開く
  size_t totalBytes = SPIFFS.totalBytes(); // 総容量を取得
  size_t usedBytes = file.size();          // 使用中の容量を取得

  M5.Lcd.print("Total :  "); // 総容量
  M5.Lcd.println(totalBytes);
  M5.Lcd.print("Used :  ");  // 使用中の容量
  M5.Lcd.println(usedBytes);
  M5.Lcd.print("Free :  ");  // 空き容量
  M5.Lcd.println(totalBytes - usedBytes);
}

spiffsInfo();  // フラッシュメモリの容量確認関数呼び出し

void spiffsFileList() {
  M5.Lcd.fillScreen(BLACK);  // 背景色
  M5.Lcd.setCursor(0, 0);    // 座標設定(x, y)

  File file = SPIFFS.open("/"); // ルートディレクトリを開く

  // ファイル名、サイズの表示
  while (true) {
    File entry = file.openNextFile(); // ファイルを1つづつ開く
    if (!entry) { // ディレクトリの末尾に達したら終了
      break;
    }
    M5.Lcd.print(entry.name()); // ファイルまたはディレクトリの名前を表示
    M5.Lcd.print("  ");         // スペースを表示
    M5.Lcd.println(entry.size()); // ファイルのサイズを表示
    
    entry.close(); // 使い終わったファイルを閉じる
  }
}

spiffsFileList();  // フラッシュメモリのファイル名確認関数呼び出し

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>M5StickCP2 Controller</title>
    <style>
      #container {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-top: 40px;}
      h1 {color: #666;}
      .button {width: 100px;height: 50px;border-radius: 5px;margin: 10px;cursor: pointer;font-size: 20px;font-weight: bold;color: white;text-align: center;line-height: 50px;}
      #on-button {background-color: green;}
      #off-button {background-color: red;}
    </style>
  </head>
  <body>
    <div id="container">
      <h1>M5StickCP2 Controller</h1>
      <div>
        <button id="on-button" class="button">ON</button>
        <button id="off-button" class="button">OFF</button>
      </div>
      <div><p id="led_state">　</p></div>
    </div>

    <script>
      const onButton = document.getElementById("on-button");
      const offButton = document.getElementById("off-button");
      const ledState = document.getElementById("led_state");

      onButton.addEventListener("touchstart", handleOnClick);
      onButton.addEventListener("click", handleOnClick);

      async function handleOnClick() {
        const response = await fetch("/get/btn_on");
        const text = await response.text();
        ledState.textContent = text;
        console.log(text);
      }

      offButton.addEventListener("touchstart", handleOffClick);
      offButton.addEventListener("click", handleOffClick);

      async function handleOffClick() {
        const response = await fetch("/get/btn_off");
        const text = await response.text();
        ledState.textContent = text;
        console.log(text);
      }
    </script>
  </body>
</html>

#include <M5StickCPlus2.h>
#include <SPIFFS.h>
#include <WebServer.h>    // サーバー設定用
#include <ESPmDNS.h>      // ドメインネームでIPアドレス取得用

#define LED 19  // 本体LED
WebServer server(80); // サーバー設定ポート80で接続

// Wi-Fiローカル接続先設定
const char ssid[] = "自宅のWi-FiルーターのSSIDを設定";         // 接続先SSID
const char pass[] = "自宅のWi-Fiルーターの接続パスワードを設定"; // 接続先パスワード
const char mdnsName[] = "logi0"; // mDNS Name（mdnsName.localで接続可能）

// 変数宣言
int count_data = 0; // ボタンON回数データ格納用

/************************** ファイル読み込み関数 **************************/
String readFile(const char* file_name) {
  M5.Lcd.fillScreen(BLACK); // 背景色
  M5.Lcd.setCursor(0, 0);   // 座標設定(x, y)
  M5.Lcd.setTextColor(ORANGE, BLACK); // (文字色, 背景)

  String html = "";                              //htmlデータ格納用文字列
  File file = SPIFFS.open(file_name, FILE_READ); // フラッシュメモリのhtmlファイルを開く

  if (SPIFFS.exists(file_name)) {  // ファイルが存在すれば
    // ファイル読み込み
    if (file) { //読込が成功したら
      M5.Lcd.println("Client connected!");  // エラー表示
      while (file.available()) { //読込可能な文字がある間繰返す
        char buff = file.read(); //buffへ1文字づつ読み出す
        html += buff;  //読み出した文字を1文字づつhtml文字列に追加
      }
    } else {
      Serial.println("Failed to open file");  // エラー表示
    }
    file.close(); //ファイルを閉じる
  } else {  // ファイルが存在しなければ
    M5.Lcd.println("File does not exist");  // エラー表示
  }
  return html;  // HTMLデータを返す
}

/*********************** Wi-Fi接続（mdns名設定）実行関数 ***********************/
void wifiConnect() {
  M5.Lcd.fillScreen(BLACK); // 背景色
  M5.Lcd.setCursor(0, 0);   // 座標設定(x, y)
  M5.Lcd.println(" Wi-Fi Search!");

  // Wi-Fi接続開始
  while (WiFi.localIP()[0] == 0) { // IPアドレスが取得されるまで繰り返し
    WiFi.begin(ssid, pass);        //ローカル Wi-Fi接続実行
    M5.Lcd.print("."); // 液晶表示
    delay(3000);       // 再接続待ち
  }
  // mDNS設定（mdnsName.localでアクセス）
  MDNS.begin(mdnsName);

  // 接続情報シリアル出力表示
  Serial.print("IP : ");
  Serial.println(WiFi.localIP());       // IPアドレス（配列）表示
  Serial.printf("mDNS : %S.local\n", mdnsName); // mDNS名表示

  // 液晶表示
  M5.Lcd.fillScreen(BLACK); // 背景色
  M5.Lcd.setCursor(0, 0);   // 座標設定(x, y)
  M5.Lcd.print(" IP : ");
  M5.Lcd.println(WiFi.localIP());  // IPアドレス（配列）表示
  M5.Lcd.printf(" mDNS :\n  %S.local\n", mdnsName);  // mDNS名表示
}

/******************サーバーリクエスト時処理関数 ******************/
// ルートアクセス時の応答（クライアントにWebページ[HTML]を返す）関数
void handleRoot() {
  String html = readFile("/index.html"); //htmlデータ取得関数
  server.send(200, "text/html", html);   //レスポンス200を返し、htmlデータ送信
  Serial.println("200, text/html, index.html");
}
// エラー（Webページが見つからない）時の応答関数
void handleNotFound() {
  server.send(404, "text/plain", "404 Not Found!");  //text送信
}
// ブラウザONボタン処理
void btnOn() {
  digitalWrite(LED, HIGH);  // 本体LED点灯
  server.send(200, "text/plain", "LED_ON");  //レスポンス200を返しhtml送信
  Serial.println("LED_ON"); // シリアルモニタ出力
}
// ブラウザOFFボタン処理
void btnOff() {
  digitalWrite(LED, LOW);   // 本体LED消灯
  server.send(200, "text/plain", "LED_OFF");  //レスポンス200を返しhtml送信
  Serial.println("LED_OFF"); // シリアルモニタ出力
}

/*********************** サーバー設定関数 ***********************/
void serverSetting() {
  server.on("/", handleRoot);         // ルートアクセス時の応答関数を設定
  server.onNotFound(handleNotFound);  // Webページが見つからない時の応答関数を設定
  server.on("/get/btn_on", btnOn);    // ボタンONリクエスト処理
  server.on("/get/btn_off", btnOff);  // ボタンOFFリクエスト処理
  server.begin();                     // Webサーバー開始
}

// 初期設定 ---------------------------------------------------
void setup() {
  auto cfg = M5.config();  // 本体初期設定
  StickCP2.begin(cfg);
  Serial.begin(9600);  // シリアル通信初期化

  // 出力端子設定
  pinMode(LED, OUTPUT);   // 本体LED赤
  digitalWrite(LED, LOW); // 本体LED初期値OFF（LOW）

  // 画面の初期設定
  M5.Lcd.fillScreen(BLACK); // 背景色
  M5.Lcd.setRotation(3);    // 画面向き設定（USB位置基準 0：下/ 1：右/ 2：上/ 3：左）

  M5.Lcd.setFont(&fonts::Font4);     // フォント
  M5.Lcd.setCursor(0, 0);            // 座標設定(x, y)
  M5.Lcd.setTextColor(WHITE, BLACK); // (文字色, 背景)

  // SPIFFS の初期化
  if(!SPIFFS.begin()){
    M5.Lcd.println("SPIFFS initialization failed!");  // エラー表示
    return;
  }
  wifiConnect();   // Wi-Fi接続（mdns名設定）実行関数
  serverSetting(); // サーバー設定関数
}

// メイン -----------------------------------------------------
void loop() {
  server.handleClient(); //クライアントからのアクセス処理
  M5.update();           //本体ボタン状態更新

  // ボタンA（ファイル作成、ボタンON回数+1）
  if (M5.BtnA.wasPressed()) {   // ボタンAが押されたら
    digitalWrite(LED, HIGH);  // 本体LED点灯
  }
  // ボタンB（ファイル読込）
  if (M5.BtnB.wasPressed()) {   // ボタンBが押されたら
    digitalWrite(LED, LOW);  // 本体LED消灯
  }
  delay(200); // 遅延時間
}

// Wi-Fiローカル接続先設定
const char ssid[] = "自宅のWi-FiルーターのSSIDを設定";         // 接続先SSID
const char pass[] = "自宅のWi-Fiルーターの接続パスワードを設定"; // 接続先パスワード
const char mdnsName[] = "logi0"; // mDNS Name（mdnsName.localで接続可能）

// ルートアクセス時の応答（クライアントにWebページ[HTML]を返す）関数
void handleRoot() {
  String html = readFile("/index.html"); //htmlデータ取得関数
  server.send(200, "text/html", html);   //レスポンス200を返し、htmlデータ送信
  Serial.println("200, text/html, index.html");
}

/************************** ファイル読み込み関数 **************************/
String readFile(const char* file_name) {
  M5.Lcd.fillScreen(BLACK); // 背景色
  M5.Lcd.setCursor(0, 0);   // 座標設定(x, y)
  M5.Lcd.setTextColor(ORANGE, BLACK); // (文字色, 背景)

  String html = "";                              //htmlデータ格納用文字列
  File file = SPIFFS.open(file_name, FILE_READ); // フラッシュメモリのhtmlファイルを開く

  if (SPIFFS.exists(file_name)) {  // ファイルが存在すれば
    // ファイル読み込み
    if (file) { //読込が成功したら
      M5.Lcd.println("Client connected!");  // エラー表示
      while (file.available()) { //読込可能な文字がある間繰返す
        char buff = file.read(); //buffへ1文字づつ読み出す
        html += buff;  //読み出した文字を1文字づつhtml文字列に追加
      }
    } else {
      Serial.println("Failed to open file");  // エラー表示
    }
    file.close(); //ファイルを閉じる
  } else {  // ファイルが存在しなければ
    M5.Lcd.println("File does not exist");  // エラー表示
  }
  return html;  // HTMLデータを返す
}