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 APISerial インターフェイスは、ウェブページがシリアルポートを検出し、接続するためのプロパティやメソッドを提供します。

EventTarget Serial

インスタンスメソッド

Serial.requestPort() Experimental

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

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

Serial.getPorts() Experimental

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

イベント

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

SerialPort connect イベント

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

SerialPort disconnect イベント

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

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

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

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

js
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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Serial
Experimental
getPorts
Experimental
requestPort
Experimental
allowedBluetoothServiceClassIds option
Experimental
filters bluetoothServiceClassId property
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.