Arduino や ESP32 が USB シリアルに流している値を、このページだけで表示・グラフ化・CSV 保存できます。Chrome / Edge / Firefox 151 以降のデスクトップ版で動作し、インストールは不要です。実機がなくても「デモ開始」で動きを確かめられます。

🔌 使い方

  1. Arduino や ESP32 を USB でつなぎます（Arduino IDE のシリアルモニタは閉じておいてください。ポートは1つのアプリしか開けません）
  2. ボーレートをスケッチの Serial.begin() と同じ値に合わせます
  3. 「接続」を押すと、ブラウザがポート選択のダイアログを出します。使うポートを選んで許可します
  4. 受信した行がコンソールに流れます。行が数値の並びなら、上のグラフに折れ線として出ます

📊 グラフになるデータの形

改行区切りで、1行に数値を並べて送ってください。区切りはカンマ・タブ・スペースのどれでも構いません。

1.23,4.56,7.89
1.25,4.51,7.92

名前:値 の形にすると、凡例にその名前が出ます。

temp:23.5,hum:40.2

Arduino 側はこう書くだけです。

void setup() {
  Serial.begin(115200);
}

void loop() {
  int raw = analogRead(A0);
  float volt = raw * 5.0 / 1023.0;
  Serial.print("raw:");
  Serial.print(raw);
  Serial.print(",volt:");
  Serial.println(volt, 3);   // println で改行を送るのが大事
  delay(20);
}

数値として読めない行（Hello や Setup done など）はコンソールに表示されるだけで、グラフには影響しません。

🌐 対応ブラウザ

シリアルポートへの接続には Web Serial API を使っています。未対応のブラウザで開いてもページは壊れません（接続ボタンが無効になり、デモモードだけ使えます）。

ブラウザ 接続 デモモード
Chrome / Edge / Opera（デスクトップ版） ✅ 89 以降 ✅
Firefox（デスクトップ版） ✅ 151 以降 ✅
Safari ❌ 未対応 ✅ 使える
Android の Chrome △ 138 以降・Bluetooth 経由のみ ✅
iOS ❌ 未対応 ✅

Firefox は 2026年5月リリースの 151 から対応しました。初回だけ「サイトごとの許可アドオン」を入れる手順が挟まります。

💡 データはどこにも送信されません

受信データの処理・グラフ描画・CSV の生成は、すべてあなたのブラウザの中だけで行われます。サーバには何も送っていません。ポートを開く許可も、ブラウザがあなたに直接たずねる仕組み（ユーザーが選んだポートだけが見える）になっています。

🛠️ うまくいかないときは

症状 確認すること
ポート選択に何も出てこない ケーブルが充電専用ではないか／ドライバ（CH340・CP2102 等）が入っているか
「接続できませんでした」と出る Arduino IDE など他のアプリがポートを掴んでいないか
文字化けする ボーレートがスケッチの Serial.begin() と一致しているか
グラフが出ない 数値以外の文字が混ざっていないか／println で改行を送っているか
途中でグラフが増えた 行ごとに値の個数や名前が変わると、新しい系列として扱われます

🔗 関連