以下の記事を見かけて、記事のトピックの 1つになっている「Web Serial API」がとても気になり、それをサクッと試したくなって進めた手順のメモです。
●Webアプリがジョイコンなどに対応する「WebHID」、NFCタグを読み書きする「Web NFC」、シリアルポートで通信する「Web Serial」など、Chrome 89ベータではデフォルトで有効に － Publickey
https://www.publickey1.jp/blog/21/webwebhidnfcweb_nfcweb_serialchrome_89.html
準備
とりあえず、シリアル通信で文字列か何かの値を送る元を準備して、そのデバイスと PC をつなぎ、以下のサンプルページを利用すれば最速で試せるだろう、と思って進めました。
https://googlechromelabs.github.io/serial-terminal/
PC にデータを送る元として使えるものは、うちにあるものだと M5Stackシリーズや Arduino系のデバイスもありましたが、プログラムをサクッと準備して書き込める micro:bit を今回は利用することにしました。
それと Web Serial API について、冒頭に掲載した記事の記載で、ベータ版で提供されている Chrome の release 89 にならないとデフォルトで使えない（2021年2月3日時点）という話がありました。
それについて、「Chrome Platform Status」の該当箇所を見ると、その通りの情報が書かれているのも再確認できました。
安定版は release 88 でデフォルトで利用できるバージョンではないものの、この機能を有効化するための手順を踏めば良いというのはありましたが。
自分は別の選択肢となる、release 89 で提供されているベータ版を使って試す、というやり方にしました。
micro:bit にプログラムを書き込む
micro:bit でシリアル通信を実行するためのプログラムを用意します。
micro:bit にプログラムを書き込むために「Microsoft MakeCode for micro:bit」を使いました。ブラウザ上でプログラム作成からプログラム書き込みまで手軽に行うことができるためです。
プログラムの内容はシンプルに、加速度センサーの値をシリアル通信で一定時間ごとに書き出す、というものにしました。
このプログラムを micro:bit に書き込みます。
動作している様子
micro:bit の準備ができたら、それを PC に USB につないだままにして、冒頭に記載していた以下の URL にアクセスします（今回は Chrome のベータ版 にて）。
https://googlechromelabs.github.io/serial-terminal/
あとは、画面左上の「Connectボタン」を押して、その後に出てきた画面で micro:bit のつながったシリアルポートを選択します。
そうすると、以下のツイートの動画のように、Chrome で開いた Webページ上で、一定の時間間隔で数字が表示されていきます。
さらに、micro:bit を傾けると、その数値が変化しているのが分かるかと思います。
Web Serial API のサンプルを試してみるだけの動画。
— you (@youtoy) February 3, 2021
micro:bit からシリアル通信で、加速度センサーの値を書きだしたものを、Web上に表示している。 pic.twitter.com/fkRzXfOz0J
無事に試すことができました。
その他
後で見てみる！
●Getting started with the Web Serial API
https://codelabs.developers.google.com/codelabs/web-serial#0
追記
その後、Web Serial API の仕様を読んで、必要そうな処理を抜き出してきて、以下のように書き込み処理を実装してみました。
●Web Serial API を使った micro:bit への値の書き込み - Qiita
https://qiita.com/youtoy/items/f77dc205e817f31a4e18
↓こちらの仕様を読みました
●Web Serial API
https://wicg.github.io/serial/
追記2
読み取り処理の実装も試して、うまくいきました。
●Web Serial API を使って micro:bit からセンサーの値を読み取る（途中段階まで） - Qiita
https://qiita.com/youtoy/items/9606c58369796a65f8f5
●Web Serial API を使って micro:bit からセンサーの値（XYZ）を読み取る＆リアルタイムなグラフ化 - Qiita
https://qiita.com/youtoy/items/6394a5570ddd54a2ce87