こんにちは、Rcatです。
今回は過去に動画でチラっと取り上げていますが、ESP32にHTMLやJSを埋め込む方法について紹介します。
「ただStringに代入するだけだろ」という方はちょっとお待ちください
今回やるのは圧縮掛けますので、直に書くよりサイズが小さくなります。
また、圧縮してバイナリにしてしまう都合上日本語が使えます。
なお、本記事はWEBサーバーとして使う前提です。まぁこれを調べる時点でそうだとは思いますが。

ただの埋め込みとの違いは?

以下はンプルのコピペです。
普通にHTMLを返そうとすると大体以下のように文字列を直接書き込むか、一旦Stringに代入するかのどちらかになると思います。

void handleRoot() {
  server.send(200, "text/plain", "hello from esp32");
}

一方今回紹介するのは以下。
周辺情報が完全に抜けているのでこれだけでは動きませんが。
まぁ分かる人にはもうばれていると思いますが、文字列じゃなくてバイナリ配列を返しているんですね。

void Rcat_Toppage() {
  server.sendHeader(F("Content-Encoding"), "gzip");
  server.send_P(200, "text/html", (const char *)HTML, sizeof(HTML));
}

埋め込み手順

今回は以下の"webexplorer.html"を埋め込みます。
ちなみにこの画像のフォルダにあるデータは配布しているスケッチに埋め込んであるものです。

まずは圧縮します
今回は"7z"を使います。
圧縮方法は"gzip"です。問題ないようなので超圧縮にしました。

圧縮後はこんな感じ。
約1/4ほどのサイズになりました。

次はこれを配列としてArduinoスケッチに書き込めばOK!

スケッチに埋め込むときは以下のようにします。
PROGMEMを使用することで膨大な配列をメモリに読み込むことがなくなるのでメモリ使用を削減できます。

unsigned char WEBExplorerHTML[] PROGMEM = {
  0x1f, 0x8b, 0x8, 0x8, 0x10, 0x82, 0x68, 0x64, 0x2, 0x0, 0x77, 0x65, 0x62, 0x65, 0x78, 0x70,
  0x6c, 0x6f, 0x72, 0x65, 0x72, 0x2e, 0x68, 0x74, 0x6d, 0x6c, 0x0, 0xcd, 0x1a, 0xd7, 0xae, 0xd3 
  ..............
};

void WEBEx_Toppage() {
  server.sendHeader(F("Content-Encoding"), "gzip");
  server.send_P(200, "text/html", (const char *)WEBExplorerHTML, sizeof(WEBExplorerHTML));
}

GZIPバイナリをC言語配列形式のテキストに変換する

GZIPまでは簡単にできますが、埋め込みの前準備であるテキスト化はちゃんと考えないとまず無理です。
基本的に何かしらのスクリプトを書いて変換することになります
以下は私が使用しているPythonスクリプトの変換部分となります。
以下を使うことで紹介したサンプルのようなテキストが出力されます。