Serial

Web Serial API の Serial インターフェイスは、ウェブページがシリアルポートを検出し、接続するためのプロパティやメソッドを提供します。

インスタンスメソッド

Serial.requestPort()

ユーザーが選んだデバイスを表す SerialPort のインスタンスで解決するか、デバイスが選択されなかった場合は拒否される Promise を返します。

このメソッドは、ユーザーによる有効化に伴って呼ぶ必要があります。

Serial.getPorts()

接続されており、かつオリジンにアクセス許可があるシリアルポートを表す SerialPort の配列で解決する Promise を返します。

イベント

SerialPort からのイベントバブリングにより、Serial では以下のイベントが利用可能です。

SerialPort connect イベント

デバイスにポートが接続された時に発火するイベントです。

SerialPort disconnect イベント

デバイスからポートが切断された時に発火するイベントです。

例

この例では、利用可能なポートを調べ、ユーザーが他のポートへのアクセスを許可できるようにする方法を示します。

load イベントの受信時に connect および disconnect イベントにリスナーを追加することで、デバイスが接続された時や切断された時にサイトが反応できるようにします。getPorts() メソッドを呼ぶことで、接続されたポートが既にサイトからのアクセスが許可されたものかどうかを調べることができます。

接続されたポートの中にサイトからアクセスできるものが無い場合、ユーザーが有効化するのを待つ必要があります。この例では、このためにボタンの click イベントハンドラーを用います。requestPort() に USB ベンダー ID を入れたフィルターを渡し、ユーザーに提示するデバイスのリストを特定の生産者によって作られた USB デバイスのみに絞り込んでいます。

navigator.serial.addEventListener("connect", (e) => {
 // `e.target` に接続する、すなわち利用可能なポートのリストに加えます。
});
navigator.serial.addEventListener("disconnect", (e) => {
 // `e.target` を利用可能なポートのリストから外します。
});
navigator.serial.getPorts().then((ports) => {
 // ページの読み込み時、`ports` を用いて利用可能なポートのリストを初期化します。
});
button.addEventListener("click", () => {
 const usbVendorId = 0xabcd;
 navigator.serial
 .requestPort({ filters: [{ usbVendorId }] })
 .then((port) => {
 // `port` に接続する、すなわち利用可能なポートのリストに加えます。
 })
 .catch((e) => {
 // ユーザーがポートを選択しませんでした。
 });
});

仕様書

ブラウザーの互換性