つまるところ
- 先日M5Stackのハンズオンに参加したらなんかChromeで使える標準APIで「Web Serial API」っていうのがあるらしく、ブラウザだけでシリアル通信できるらしい
- それだよそれ！それ使ったらキーボードの入力モードやらによらなくて便利に爆速な入力ができるようになりそう！やったぜ
HIDなバーコードリーダーはツライよ
ここに文句を死ぬほど書く
- HIDなバーコードリーダー、それはそれで便利なんだが動作が遅いし逆に入力速すぎてOSだかが取りこぼしたりもしてイマイチなところ結構ある
- ウェブの入力フォームだと日本語入力の制御もしづらいし、日本語ON・OFFさせるのも全角で入力されても問題なくするのとかあほらしくてしょうがねえよ
今回の動作環境
仕事で何台か買ってみたが、できるやつとできないやつがあるみたい。とりあえず今回は以下の組み合わせでできた。
- macOS 15.2 Sequoia
- NetumScanハンドヘルドUSBQRバーコードスキャナ
- Chrome バージョン: 131.0.6778.205（Official Build） （arm64）
USB QR バーコードスキャナをシリアル通信モードにする
付属のマニュアルに「このバーコードを読むと、そのモードに切り替わるよ」というバーコード一覧が載っており、これをスキャンすると「USB-KBWモード(HIDモード)」から「USB COMモード」に切り替わるらしい。おお確かにかわっている。
before
after
シリアルポートを確認する
なるほど。 /dev/tty.usbmodemAPP_0000000001 がそうらしい。
# まずスキャナをUSBから抜く
[pharaohkj] $ ls -l /dev/tty* > ttylist1.txt
# そしてスキャナをUSBに挿す
[pharaohkj] $ ls -l /dev/tty* > ttylist2.txt
# diffをみる
[pharaohkj] $ diff ttylist1.txt ttylist2.txt
11a12
> crw-rw-rw- 1 root wheel 0x9000014 1 7 18:29 /dev/tty.usbmodemAPP_0000000001
69c70
< crw--w---- 1 pharaohkj tty 0x10000008 1 7 18:28 /dev/ttys008
---
> crw--w---- 1 pharaohkj tty 0x10000008 1 7 18:29 /dev/ttys008
このシリアルポートに接続して試す
以下のコマンドで接続して、適当にバーコードを読んでみる。おおバッチリ読めてる。screenを抜けるのは Ctrl+a 後 k。
[pharaohkj] $ screen /dev/tty.usbmodemAPP_0000000001
このシリアルポートにブラウザからアクセスする
このページ にアクセスすればなんでも乗ってるしできる。その通りにやる。
と、その前に、Chromeを起動して chrome://device-log/ を開く。おお。なんか便利そう。この無骨さがいい。
さて、そしたらこの画面にて、デベロッパーツールを開き、 Console タブを選択して、jsのコンソールに入る。
ブラウザからポートの選択
で以下のコードを実行すると、なんと接続できるポート一覧がでてきて、選べばよい。すげー便利やん。これなら本番導入時も楽そう。↑で調べたデバイスを選択しておく。
const requestedPort = await navigator.serial.requestPort();
↑で↓こんなのがでる。
ポートから読む
上記Googleのページに乗ってるサンプルどおりやればOK。
器機選択から続けて以下を実行すると、何事もなかったようにawaitされており、バーコードリーダーでバーコードを読めばよい。
await requestedPort.open({ baudRate: 9600 });
const textDecoder = new TextDecoderStream();
const readableStreamClosed = requestedPort.readable.pipeTo(textDecoder.writable);
const reader = textDecoder.readable.getReader();
// Listen to data coming from the serial device.
while (true) {
const { value, done } = await reader.read();
if (done) {
// Allow the serial port to be closed later.
reader.releaseLock();
break;
}
// value is a string.
console.log(value);
}
おお、読めてる読めてる。QRコードもバッチリよめる。そしてめっっっちゃはやい。エディッタを開いてHIDで入力すると、入力しそこねとかあったりするが、全然そんなのなさそう。
あとはこれを console.log(value) せずに、いい感じの入力欄に setText(value) してやればよかろう。やったぜ。