Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Web Serial API を最短の手順で試したくてやったこと(micro:bit を利用)

以下の記事を見かけて、記事のトピックの 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/
serial.jpg

PC にデータを送る元として使えるものは、うちにあるものだと M5Stackシリーズや Arduino系のデバイスもありましたが、プログラムをサクッと準備して書き込める micro:bit を今回は利用することにしました。

それと Web Serial API について、冒頭に掲載した記事の記載で、ベータ版で提供されている Chrome の release 89 にならないとデフォルトで使えない(2021年2月3日時点)という話がありました。
それについて、「Chrome Platform Status」の該当箇所を見ると、その通りの情報が書かれているのも再確認できました。

利用可能なバージョン.jpg

安定版は release 88 でデフォルトで利用できるバージョンではないものの、この機能を有効化するための手順を踏めば良いというのはありましたが。
自分は別の選択肢となる、release 89 で提供されているベータ版を使って試す、というやり方にしました。

micro:bit にプログラムを書き込む

micro:bit でシリアル通信を実行するためのプログラムを用意します。

micro:bit にプログラムを書き込むために「Microsoft MakeCode for micro:bit」を使いました。ブラウザ上でプログラム作成からプログラム書き込みまで手軽に行うことができるためです。

プログラムの内容はシンプルに、加速度センサーの値をシリアル通信で一定時間ごとに書き出す、というものにしました。
マイクロビットのプログラム.jpeg

このプログラムを micro:bit に書き込みます。

動作している様子

micro:bit の準備ができたら、それを PC に USB につないだままにして、冒頭に記載していた以下の URL にアクセスします(今回は Chrome のベータ版 にて)。
 https://googlechromelabs.github.io/serial-terminal/

あとは、画面左上の「Connectボタン」を押して、その後に出てきた画面で micro:bit のつながったシリアルポートを選択します。
そうすると、以下のツイートの動画のように、Chrome で開いた Webページ上で、一定の時間間隔で数字が表示されていきます。
さらに、micro:bit を傾けると、その数値が変化しているのが分かるかと思います。

無事に試すことができました。

その他

後で見てみる!

●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

youtoy
プライベートでの活動で、ビジュアルプログラミング・IoT・ロボットトイを扱う技術コミュニティを単独・共同で主催したり、登壇をしたりしています。Qiitaの記事で書いていることは、このプライベートでの活動に関することです。また、普段は通信会社の研究所で働いていて、ガジェットが大好きです。
http://yo-to.hatenablog.com/
kddi
KDDIは、通信を中心に周辺ビジネスを拡大する「通信とライフデザインの融合」をより一層推進し、国内はもとよりグローバルにおいても、5G/IoT時代における新たな価値創造を実現し、お客さまの期待を超える新たな体験価値の提供を追求してまいります。
http://www.kddi.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away