0Pricing
Arduino & IoT Academy · レッスン

Web更新ページをホストする

ブラウザーのフォームからファームウェアをアップロードします。

「Web更新ページをホストする」はCoddyKit上の無料Arduino & IoT Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはArduino & IoT Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Arduino & IoT Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Update From a Browser

Sometimes you want to flash a device without the Arduino IDE at all. A web update page lets anyone upload firmware from a browser.

The Board Becomes a Server

Your ESP32 runs a tiny web server that serves an upload form, so a phone or laptop can send it a new binary.

Bring In the Libraries

You combine a web server with the Update library, which knows how to write incoming bytes into flash memory.

#include <WebServer.h>
#include <Update.h>
WebServer server(80);

Serve an Upload Form

The root page returns a simple HTML form with a file picker and a submit button for the firmware file.

server.on("/", []() {
  server.send(200, "text/html",
    "<form method='POST' action='/update' enctype='multipart/form-data'><input type='file' name='fw'><input type='submit'></form>");
});

Where Did .bin Come From?

In the IDE, Sketch then Export Compiled Binary creates the .bin file you will pick in that upload form.

Open the Update Stream

When the upload starts, you tell the chip how big the image is so Update.begin() can reserve flash space for it.

Update.begin(UPDATE_SIZE_UNKNOWN);

Write the Incoming Chunks

Firmware arrives in pieces. You feed each chunk to Update.write() as it lands, building the new image in flash.

Update.write(upload.buf, upload.currentSize);

Finish and Verify

When the last byte arrives, Update.end(true) checks the image is complete and valid before marking it ready to boot.

if (Update.end(true)) Serial.println("Update OK");

Reboot Into New Code

A successful update needs a fresh start. Call ESP.restart() so the board boots into the firmware you just uploaded. 🔄

ESP.restart();

Guard the Page

Anyone who reaches this page can reflash your device, so add a login or token check before accepting any upload.

Keep the Server Alive

Just like OTA, the web server needs attention. Call server.handleClient() in loop so it can accept the upload request.

void loop() { server.handleClient(); }

Quick Check

Think about which library actually writes firmware to flash.

Recap

Run a web server that serves an upload form, feed the .bin to the Update library, verify it, then restart, all guarded behind a login. 🌐

よくある質問

「Web更新ページをホストする」レッスンは無料ですか？

はい。「Web更新ページをホストする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Arduino & IoT Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Arduino & IoT Academyコースには全4レッスンが含まれています。

「Web更新ページをホストする」で何を学びますか？

ブラウザーのフォームからファームウェアをアップロードします。 ブラウザで直接実行するハンズオンコードでArduino & IoT Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Arduino & IoT Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのArduino & IoT Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「Web更新ページをホストする」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このArduino & IoT Academyレッスンでコードを書いて実行できますか？

はい。すべてのArduino & IoT Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 現場でOTAが重要な理由
  2. ArduinoOTAを有効にする
  3. Web更新ページをホストする
  4. 失敗した更新をロールバックする
← Arduino & IoT Academyに戻る