ESP32（M5Cameraとか）でHTTPサーバを立ち上げたときのHTMLの内容を変更する方法

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風＆日本語化）

#手順概要

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

#手順詳細

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

1. CameraWebServerのスケッチをロード
2. シリアルモニタに表示されたアドレスにアクセス
3. ブラウザで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というオンラインツールを利用します

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

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

1. 「camera_index.h」の配列の値を先ほどのOutput欄のデータに置き換える
   
2. 先頭のカンマを取り除いて、配列サイズを先ほどのlengthの値に置き換える
   

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

余談

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

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

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

CyberChefのダウンロード版

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