今回の内容
さて、第0回では自己紹介、第1回では開発動機と使用技術についてまとめてみました。
第2回の今回は、使用技術の中で皆さんに最も馴染みのないであろう「Web Serial API」の概要と、基本的な使い方について、ごく簡単なサンプルとともに解説してみたいと思います。
Web Serial APIとは？
正確な情報は mozilla.orgのWeb Serial APIに関するドキュメント をご確認ください。
ごく簡単にまとめると、「操作者が許可したシリアルポートへ、ブラウザを通じてJavaScriptから読み書きを行うAPI」です。
基本的にはChromiumベースのPCブラウザで利用可能です。AndroidやiOS上のブラウザ、あるいはFirefoxでは使用できませんが、WindowsだけでなくmacOSでも動作します。
私自身は未確認ですが、ARMで動作するLinuxでも使用できるという情報もあります。
ただし以下のような制限があります。
- 実行元が
localhost、または正しい証明書を持つHTTPSサイトである必要がある -
file://で開いたローカルHTMLファイルや、いわゆる「オレオレ証明書」のHTTPSサイトでは動作しない
私は、ローカル環境でのテストには VSCode の Live Server 拡張機能 を使っています。
Web Serial APIの基礎の基礎
ごく簡単なコード（HTML+JavaScript）を GitHub に置いてありますので、そちらも確認しながらお読みください。
まず、Web Serial API を使用可能なブラウザでは、navigator.serial というオブジェクトが存在します。以下のようにして、APIの利用可否を確認できます。
if (!navigator.serial) {
alert("Web Serial APIはこのブラウザでサポートされていません。");
return;
}
次に、
const port = await navigator.serial.requestPort();
とすると、ブラウザが利用者に対して「このWebページのJavaScriptにどのシリアルポートの使用を許可するか？」と尋ねるダイアログを表示します。
※「COM11」は環境によって変化します。
このダイアログで許可を出すと、そのポートに関する情報を持つSerialPortインスタンスが、変数portに格納されます。
※非同期処理なのでawaitを忘れないようにしましょう！
このSerialPortインスタンスを用いて、ボーレートを指定しながらシリアルポートを開いたり、データの読み取り用にReaderオブジェクト、データの書き込み用にWriterオブジェクトを生成したりします。
今回のサンプルコードでは、ポートの情報を取得するgetInfo()メソッドを呼び出し、Web Serial API が正常に動作していることのみを確認しています。
次回の予定
次回は、実際に Web Serial API からシリアルポートを介して、REPL に対して読み書きを行ってみる予定です。