Serial
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
Web Serial API の Serial インターフェイスは、ウェブページがシリアルポートを検出し、接続するためのプロパティやメソッドを提供します。
インスタンスメソッド
Serial.requestPort()-
ユーザーが選んだデバイスを表す
SerialPortのインスタンスで解決するか、デバイスが選択されなかった場合は拒否されるPromiseを返します。このメソッドは、ユーザーによる有効化に伴って呼ぶ必要があります。
Serial.getPorts()-
接続されており、かつオリジンにアクセス許可があるシリアルポートを表す
SerialPortの配列で解決するPromiseを返します。
イベント
SerialPort からのイベントバブリングにより、Serial では以下のイベントが利用可能です。
SerialPortconnectイベント-
デバイスにポートが接続された時に発火するイベントです。
SerialPortdisconnectイベント-
デバイスからポートが切断された時に発火するイベントです。
例
この例では、利用可能なポートを調べ、ユーザーが他のポートへのアクセスを許可できるようにする方法を示します。
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) => {
// ユーザーがポートを選択しませんでした。
});
});
仕様書
| Specification |
|---|
| Web Serial API # serial-interface |