- API連携
Web Serial APIの使い方
- その他
目次
Web Serial APIとは
【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc. 詳細はこちらから＞
ウェブサイト上でシリアルデバイスを操作(データ送信, データ受信)するためのAPI。
シリアルデバイスとはシリアルポートで接続されたデバイスのこと。
Web Serial APIが使えるデバイス
デバイス固有のドライバをインストールすることができるデバイス。
※実体験からの予想を含むので正しくない場合がある。
例えば、
LINE EYEのSI-35 USB(インターフェースコンバータUSB⇔RS-422/485)の場合、
初めて繋いだときドライバが自動でインストールされなかった。
そこでWindowsのデフォルト?のUSBデバイス用のドライバであるWinUSBをインストールした。
(固有のドライバではない)
Web Serial APIでデバイスを認識しなかった。
次にデバイスの製品情報のWebサイトから
デバイス固有のドライバをインストールした。
Web Serial APIでデバイスを認識した。
※補足:
WinUSBのドライバの場合、Web Serial APIとは別のWeb USB APIでは認識したが、
意図した通り信号を送ることができなかった…。
WebSerialAPI 使用例と解説
プログラムの内容
デバイスを選択して
デバイスとの接続を確立して、
デバイスに情報を送信して、
デバイスからの電文を受信して、
デバイスとの接続を切断する。
プログラム全文
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// デバイスが接続されているシリアルポートを選択する 2const device = await navigator.serial.requestPort() 3 4// デバイスとの接続を確立する 5// ボーレートや伝送ケーブルのバッファサイズも指定可能(下記ではボーレートを9600に指定している.バッファサイズのデフォルトは256) 6await device.open({ baudRate: 9600 }) 7 8// 各機器の命令フォーマットに従い命令を作成する(下記は例用の意味のない命令なので注意!!) 9const encodedCommand = new TextEnco// デバイスが接続されているシリアルポートを選択する const device = await navigator.serial.requestPort() // デバイスとの接続を確立する // ボーレートや伝送ケーブルのバッファサイズも指定可能(下記ではボーレートを9600に指定している.バッファサイズのデフォルトは256) await device.open({ baudRate: 9600 }) // 各機器の命令フォーマットに従い命令を作成する(下記は例用の意味のない命令なので注意!!) const encodedCommand = new TextEncoder().encode("Sample Command") const command = Uint8Array.of(...commandNoTerminator) // シリアル通信の送信者 const writer = device.writable.getWriter() // 送信者にロックがかかる await writer.write(command) // 命令を送信 writer.releaseLock() // 送信者にロックを開放 // シリアル通信の受信者 const reader = device.readable.getReader() // 受信者にロックがかかる const response = await reader.read() //デバイスからの電文を受信 reader.releaseLock() // 受信者にロックを開放 //デバイスとの接続を切断する await device.close()der().encode("Sample Command") 10const command = Uint8Array.of(...commandNoTerminator) 11 12// シリアル通信の送信者 13const writer = device.writable.getWriter() // 送信者にロックがかかる 14await writer.write(command) // 命令を送信 15writer.releaseLock() // 送信者にロックを開放 16 17// シリアル通信の受信者 18const reader = device.readable.getReader() // 受信者にロックがかかる 19const response = await reader.read() //デバイスからの電文を受信 20reader.releaseLock() // 受信者にロックを開放 21 22//デバイスとの接続を切断する 23await device.close() |
デバイスを選択
|
1 2 |
// デバイスが接続されているシリアルポートを選択する const device = await navigator.serial.requestPort() |
画像のようなポップアップが表示されるので、接続したいデバイスを選択する。
requestPortメソッドに対するoption引数でベンダーIDやプロダクトIDを使って、選択できるデバイスを制限することができる。
デバイスとの接続を確立
|
1 2 3 |
// デバイスとの接続を確立する // ボーレートや伝送ケーブルのバッファサイズも指定可能(下記ではボーレートを9600に指定している.バッファサイズのデフォルトは256) await device.open({ baudRate: 9600 }) |
デバイスに情報を送信
|
1 2 3 4 |
// シリアル通信の送信者 const writer = device.writable.getWriter() // 送信者にロックがかかる await writer.write(command) // 命令を送信 writer.releaseLock() // 送信者にロックを開放 |
あるポートに対して情報の送信者は常にひとりである必要がある。
そのため、シリアル通信の送信者の取得時に他の場所から同時に情報が送られないようにロックがかかる。
3行目で命令を送信して、4行目で送信者のロックを開放する。
デバイスからの電文を受信
|
1 2 3 4 |
// シリアル通信の受信者 const reader = device.readable.getReader() // 受信者にロックがかかる const response = await reader.read() //デバイスからの電文を受信 reader.releaseLock() // 受信者にロックを開放 |
あるポートに対して情報の受信者は常にひとりである必要がある。
そのため、シリアル通信の受信者の取得時に他の場所から同時に情報が受信されないようにロックがかかる。
3行目で電文を受信して、4行目で受信者のロックを開放する。
デバイスとの接続を切断
|
1 2 |
//デバイスとの接続を切断する await device.close() |
シリアル通信の送信者、受信者のロックを開放していない状態で接続を切断するとエラーになるので注意!!
参考サイト
Web Serial API – Web API | MDN
【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc. 詳細はこちらから＞
