Web serial | Frontend Practical Guide

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`api.Navigator.serial` 実験的	89	89			138
DOM API
`Serial` 実験的 WebSerialAPI の Serial インターフェイスは、ウェブページがシリアルポートを検出し、接続するためのプロパティやメソッドを提供します。	89	89			138
`getPorts` 実験的 Serial インターフェイスの getPorts() メソッドは、接続されており、かつオリジンにアクセス許可があるシリアルポートを表す SerialPort の配列で解決する Promise を返します。	89	89			138
`requestPort` 実験的 Serial インターフェイスの Serial.requestPort() メソッドは、ユーザーが選んだデバイスを表す SerialPort のインスタンスで解決するか、デバイスが選択されなかった場合は拒否される Promise を返します。	89	89			138
`requestPort (allowedBluetoothServiceClassIds option)` 実験的 allowedBluetoothServiceClassIds`オプション	117	117			138
`requestPort (filters bluetoothServiceClassId)` 実験的 filters` `bluetoothServiceClassId` プロパティを指定する。	117	117			138
`SerialPort` 実験的 SerialPort はウェブシリアル API のインターフェイスで、ホスト機器のシリアルポートへのアクセスを提供します。	89	89			138
`close` 実験的 SerialPort インターフェイスの SerialPort.close() メソッドは、ポートを閉じる処理が完了したら解決する Promise を返します。	89	89			138
`connect_event` 実験的 SerialPort インターフェイスの connect イベントは、ポートがデバイスに接続された時、発火します。このイベントは、USB で接続されたデバイスなどの取り外し可能なデバイスに関連付いたポートに関してのみ発火します。	89	89			138
`connect_event (bluetooth rfcomm)` 実験的 Bluetooth RFCOMM シリアルポートは `connect` イベントをディスパッチします。	130	130			138
`connected` 実験的 SerialPort インターフェイスの Connected 読み取り専用プロパティは、ポートがデバイスに論理的に接続されているかどうかを示すブール値を返します。	130	130			138
`disconnect_event` 実験的 SerialPort インターフェイスの disconnect イベントは、ポートがデバイスから切断された時、発火します。このイベントは、USB で接続されたデバイスなどの取り外し可能なデバイスに関連付いたポートに関してのみ発火します。	89	89			138
`disconnect_event (bluetooth rfcomm)` 実験的 Bluetooth RFCOMM シリアルポートは `disconnect` イベントをディスパッチする。	130	130			138
`forget` 実験的 SerialPort インターフェイスの SerialPort.forget() メソッドは、ポートを閉じ、忘れる処理が完了したら解決する Promise を返します。	103	103			138
`getInfo` 実験的 SerialPort インターフェイスの getInfo() メソッドは、デバイスのベンダー ID とプロダクト ID をプロパティとするオブジェクトを返します。	89	89			138
`getInfo (bluetoothServiceClassId)` 実験的 bluetoothServiceClassId` 戻り値のプロパティ	117	117			138
`getSignals` 実験的 SerialPort インターフェイスの SerialPort.getSignals() メソッドは、ポートの制御信号の現在の状態が入ったオブジェクトで解決する Promise を返します。	89	89			138
`open` 実験的 open() は SerialPort インターフェイスのメソッドで、ポートを開く処理が完了したら解決する Promise を返します。既定では、ポートは 8 ビットのデータ、1 ビットのストップビット、パリティチェックなしで開かれます。baudRate 引数は必須です。	89	89			138
`readable` 実験的 SerialPort の読み取り専用プロパティ readable は、ポートに接続されたデバイスからデータを受信する用の ReadableStream を返します。このストリームから読み出せるチャンクは、Uint8Array のインスタンスです。このプロパティは、ポートが開かれており、かつ致命的なエラーが起きていない限り、null にはなりません。	89	89			138
`setSignals` 実験的 SerialPort インターフェイスの setSignals() メソッドは、ポートの制御信号を設定し、完了したら解決する Promise を返します。	89	89			138
`writable` 実験的 SerialPort の読み取り専用プロパティ writable は、ポートに接続されたデバイスにデータを送信する用の WritableStream を返します。このストリームに書き込むチャンクは、ArrayBuffer, TypedArray, DataView のいずれかのインスタンスでなければなりません。このプロパティは、ポートが開かれており、かつ致命的なエラーが起きていない限り、null にはなりません。	89	89			138
`serial` 実験的 serial は WorkerNavigator インターフェイスの読み取り専用プロパティで、 Serial オブジェクトを返します。これはWeb Serial API へのエントリーポイントを表してます。	89	89			138
その他
`html.elements.iframe.allow.serial` 実験的	89	89			89
`http.headers.Permissions-Policy.serial` 実験的 HTTP の Permissions-Policy ヘッダーにおける serial ディレクティブは、現在の文書が、シリアルポートに直接接続されたシリアル機器、またはシリアルポートをエミュレートする USB または Bluetooth 機器と通信するためにWeb Serial API を使用できるかどうかを制御します。	89	89			89

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });
const reader = port.readable.getReader();
const { value } = await reader.read();
console.log('Received:', new TextDecoder().decode(value));

実務での使いどころ

Web serial の活用

Experimental: これは実験的な機能です。

注意点

一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

対応ブラウザ

基本構文

実務での使いどころ

Web serial の活用

注意点

アクセシビリティ

参考リンク