ITで遊ぶ

Web Serial API

(2024年12月に書き換え)ブラウザーからUSB経由で他デバイスとシリアル通信をする、Web Serial APIというものがあります。

最近はArduinoのファームの書き換えなどにも使われていて、安定した感じがします。

長い目で見ると、ブラウザーのOS化の一環かな、とも思いますが、Visual BasicやPythonのTkinterなんかでデスクトップアプリケーションを書くよりも、HTMLで書いたほうがいいであろうとは思います。

時々、なんの危機感もなく使用され拡張されているデスクトップアプリ(こんなの)を見ると「これからどうするつもりなんだろう?」と他人事ながら気になります。
下手に権力をもって小遣い稼ぎをしていると、他の人がWebベースの後継アプリを作って使ってもらおうとしても妨害されるでしょうから、作者がボケるか死ぬまで待つしかありません。こんな話はいたるところに転がっていそうです。

さて、正式ドキュメントはWeb Serial APIのようです。チラ見しましたが、さっぱりわからん。正式ドキュメントって厳密かつ大事なこともどうでもいいことも並列してきちんと書いてなきゃいけないから、わかりづらいのは当然なんですが、なんとかならんかね?

近頃はChatGPTなどのAIがサンプルコードなんか瞬時に書いてくれます。以下はArduinoからのデータをGoogleスプレッドシートに書くサンプルとしてChatGPTが作ってくれたコードです。(Javascript部分だけ)

    let port;
    let reader;

    // Google Sheets API関連の設定
    const SHEET_ID = "YOUR_GOOGLE_SHEET_ID"; // Google Sheets ID
    const API_KEY = "YOUR_GOOGLE_API_KEY";   // Google APIキー
    const RANGE = "Sheet1!A1"; // 書き込みたい範囲

    async function connectToArduino() {
      try {
        port = await navigator.serial.requestPort();
        await port.open({ baudRate: 9600 });

        reader = port.readable.getReader();
        document.getElementById("status").textContent = "Arduino connected!";
        document.getElementById("logDataButton").disabled = false;
      } catch (err) {
        console.error("Failed to connect to Arduino:", err);
      }
    }

    async function logDataToSheets() {
      if (!reader) return;

      try {
        const { value, done } = await reader.read();
        if (done) {
          console.log("Stream closed");
          reader.releaseLock();
          return;
        }

        const sensorData = new TextDecoder().decode(value).trim();
        console.log("Sensor data:", sensorData);

        // Google Sheetsにデータを送信
        await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/${RANGE}:append?valueInputOption=USER_ENTERED&key=${API_KEY}`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            values: [[new Date().toLocaleString(), sensorData]],
          }),
        });

        console.log("Data logged to Google Sheets");
      } catch (err) {
        console.error("Error reading from Arduino or logging data:", err);
      }
    }

    document.getElementById("connectButton").addEventListener("click", connectToArduino);
    document.getElementById("logDataButton").addEventListener("click", logDataToSheets);

 

Arduino側はこんな感じ。

void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(115200);
}

// the loop routine runs over and over again forever:
void loop() {
  Serial.println("Hello");
  delay(300);
  Serial.println("World");
  delay(300);
  Serial.println("");
  delay(300);        // delay 300 ms
}

これで作るアプリも画面はひとつかふたつで、後はJavascriptでデータを画面に表示することになるでしょうね。
あと、HTMLでダイアログボックス作れればパーフェクトなんですけどねぇ。
いずれにしても、だんだん、CodeIgniterとかRuby On Railsから遠ざかる。。。

データベースは共通なもの(Read Only)はウェブ上にJSONデータをJavascriptとして用意すればいいでしょう。
個人のものはブラウザ内ですかね。
参考リンク

Local Storageとは

なんか、できそうな気がしてきた。

最近、GitとGithubの使い方もわかってきたし!

関連記事

  1. CakePHP(3)

  2. DOAの落とし穴

  3. Perl定石

  4. micro:bit + BLE + ChromeブラウザーそしてPro…

  5. GUIアプリケーションを書く時のオブジェクトの設計

  6. ロリポップでPHPエラーが出た時

  7. なんでもスマホへ

  8. 静的HTMLに他HTMLを読み込む方法