How to change HTML content when ESP32 (M5Camera etc.) starts HTTP server.
Click [here](https://github.com/saka-guchi/M5Camera_ChangeHTML "How to change HTML in sketch example "ESP32>Camera>CameraWebServer"") for English commentary and sample code.

#前提
下記については説明を省略します。

Arduino IDEでのESP32（M5Camera含む）の開発環境の構築
C言語の基礎知識

#解決する課題

スケッチ例の「ESP32>Camera>CameraWebServer」を使用したときに表示されるHTMLを自由に変更したい！

変更前後のイメージ（Qiita風＆日本語化）

#手順概要

ベースとなるHTMLを用意する（初回のみ）
変更したいHTMLをGZIP形式に変換する
GZIP形式のデータをコードに移植する

#手順詳細

1. ベースとなるHTMLを用意する

CameraWebServerのスケッチをロード
シリアルモニタに表示されたアドレスにアクセス
ブラウザでHTMLを保存

💡 最新のスケッチ例ではM5CameraのVersion.Bに対応しているのでオススメ

CameraWebServer.ino

//#define CAMERA_MODEL_WROVER_KIT // Has PSRAM
#define CAMERA_MODEL_M5STACK_V2_PSRAM // M5Camera version B Has PSRAM

2. 変更したいHTMLをGZIP形式に変換する

※ここではCyberChefというオンラインツールを利用します

CyberChef (HTML to GZIP)にアクセス
Input欄に変更したいHTMLを貼り付け
右下のOutput欄をコピー
「To Hex」と「Split」の右側の停止アイコンをクリック
Output欄のlengthをコピー

3. GZIP形式のデータをコードに移植する

以上です。お疲れさまでした。
慣れれば変更には1分も掛からないと思います。

余談

CyberChefはGZIP圧縮だけでなく解凍もできる

CyberChef (GZIP to HTML)にアクセス
Input欄に「camera_index.h」の配列の値を貼り付け
右下のOutput欄にHTMLコードが表示される

※スケッチ例の「index_ov2640_html_gz[]」は何故かエラー
**　「index_ov3660_html_gz[]」の方は正しく出力されるのでバグっぽい**

CyberChefのダウンロード版

速度が速くて快適ですが、オンライン版と異なる出力が出てきたので使っていません。