webUSBやwebSerialの苦労話


半年ほど前、アンドロイドタブレット専用のポケットCO2センサーの開発機に触れる機会があり使ってみたのだけど、パソコンにでもぶっさせて使えたらいいのになーと思っていた。そんなある日、100円ショップでUSB-typeA to Micro-Bの変換ケーブルを売っているのを見かけて、「あ、接続できるならできるんじゃね」と思ったのが艱難辛苦の始まりだった。

結論から書くと、Google ChromeブラウザのwebSerial APIを使うことで、パソコンなどに接続したUSB機器の読み書きが行えるようになる。USBメモリであったり、USBで接続しているキーボードやマウスであったりするのだが、それがブラウザ、つまりJavascriptでのちょっとした実装だけでブラウザにデータ取得できるしそのままデータをサーバー側で集計することもできのである。

いまのところ、うちのお店でも取り扱っている二酸化炭素センサーにおまけとしてURLを案内している。用途が用途だし、ボランティアで気まぐれに実装したものなので、うち以外から買ってもらった人も使ってもらってもかまわないので、ご自由につかってくださいって開発元(?の大学のセンセイ)にお渡ししたので、もしかしたらそのうち公式でも使えるようになるかもしれない。

二酸化炭素センサーはどうせならうちが扱っているやつをご購入いただけると、センサー精度的にもデータ・ストレージ拡張性とかもあるのでおすすめ。というかおすすめだから紅茶屋がわざわざ扱っているんだけど。

二酸化炭素ポケットCO2センサー Lite

item.rakuten.co.jp/hagurachaya/co2lite-627/

store.shopping.yahoo.co.jp/hagurachaya2/co2lite-627.html

USBがブラウザから操作できるというのは、組織のシステム管理者からすると悪夢のような話しではあるが、セキュリティと利便性はバーターであると考えると、その応用性の高さについては、技術者なら一考するべきなのではないかとおもう。Androidやraspberry pi、micro:bitのようなもの、はたまた今回のようなチップを積んだ二酸化炭素センサー、IOTをブラウザからあれこれ操作できるのは純粋にいろいろ便利。

webUSBを初めて知ったのはHTML5が勧告されたころであったろうか。とんでもない仕様が出てきたなとおもったが使う機会も予定もなかったためスルーしていた。

ミュージックハッカソンなるものがお気に入りで年1ぐらい参加していたのだが、3年めぐらいのときだろうか、あるときウェブミュージックハッカソンなるものに参加した。たしか会場は六本木のGoogleさんだったとおもう。4~5年ぐらい前だろうか?その時の即席チームで作ったのは、webカメラで捉えた映像からステップ・シーケンサー的にタイルを読み取ってMIDI楽器から音を鳴らそうというものだった。

WEBカメラから取得した動画をキャプチャして色調で階調化しモザイクタイル化し、それを音階と音調にするところまでは自分が担当して作ったのだけど、音をどうやってならすん?ってなったときに、チームメンバーがMIDI楽器をつなげて制御してくれるのを作ってくれた。そのとき使われた技術がweb USBの兄弟、web MIDIなるもので、そんな変態的なAPIがあるんかいな!?と顎が抜けたのを覚えている。USBでつないだローカルのMIDI楽器をブラウザ経由で操作できるのだ・・・。実際それで音がなったのでびっくりしたもんだ。
ミュージックハッカソンではヤマハのネットデュエットみたいなセッションをするためにどんだけ通信ディレイをなくせるかみたいなところに注力されがちだったけど、webRTCとかでブラウザ間通信で付属の楽器まで遠隔で操作できたら確かにそんな未来もあるかもしれない。って、まだそんな未来は来てないけどな。

まあ、そんなこんなで、webUSBの存在は知っていたので、データ取れたらラッキー程度の心持ちで、ケーブルを買って夜な夜な取り組みだしたわけである。

web USB
wicg.github.io/webusb/

で、あれこれ試したのだが、マウスやキーボードはwebUSBの環境をつくってやればコネクトできたのだが肝心の二酸化炭素センサーが見えない。

Micro-B to Type-Aのケーブルでパソコンと繋げても、ディバイスマネージャーからもなぜか接続が確認できない。ガジェット側のLEDランプはついているので接続はできているはずなのにと苦悶した。

Windows側、Microsoftの公式アドオンアプリに「usbview.exe」なるものがあると知り、いれてみる。みれない。mac air M1はtype-cなので、system_profiler SPUSBDataTypeやらls -l /dev/tty.* やらをやって・・・。あれ、見れる??はて?なんでTYPE-Aだと見れないんだと、ふと、ケーブルが入っていた袋をみる。

なんと、バッテリーデリバリー専用のケーブルでした・・・!!?
世の中こんな恐ろしいものがあるんですね。正直一連のあれで一番苦労したのはこれでした。

今更だけどtype-Aとかtype-b Micro-B、type-Cとかの基礎をお勉強した。

micro-B to Type-Aのケーブルなんて、考えたらモバイルバッテリー用とか他にも何本ももってたのによりにもよって新しく100円ショップで買ってきたケーブルでやり始めたのが大きな不運だった。
だが、これのおかげで完全に意地になった。

web USBでやろうとしたのだけど、windowsの汎用デバイスドライバが先に掴んでしまっていて、ドライバの書き換えなしには難しそうであったのでWeb Serial Apiに切り替えた。そしてWeb Serialの沼に落ちるのである。

Web Serial API
wicg.github.io/serial/

Web SerialはChrome version 80以上しか実装していないうえ、ごくごく最近まで手をいれられ続けているものなので、目下開発中な感じのApiだ。ちょっと検索しただけで死屍累々、スタックオーバーフロー四暗刻(何か技術的検索をしてstackoverflowの質問が検索結果上位4つ以上を埋めること)であった。

まず、つまずくのが

chrome://flags/
#enable-experimental-web-platform-features

とか

chrome://device-log

とか、見たことない画面への遭遇である。いや、まあここらへんはwebUSBでも必要だっけか。

そして、次につまづくのは、公式サンプルコードすら動かないというところだ。
ふふふ。笑える。

何故か?
port.open()のoptionの値が間違っているからだ。
そりゃスタックフロー四暗刻になるわと思いながら、正直、まあ、ここまでやろうと環境をつくれてる人は突破できるであろう程度の壁でしかない。リファレンスを読めばわかるので、もしかしたら、ScriptKiddy封じのためわざとそうしているのかもしれないので、ここでは詳細には触れずにキャメルやないかい!とだけ言っておく。

で、それで動くかっちゅうと、まだ動かんのですよ。
そもそも使えないブラックリストがあるとかってんで確認したりなんだり。まあ自分の場合、javascriptをよくわかっていないので、asyncやらawaitとかここらへんどうすんだべと悩んだり、名前空間つかえるのか!と実装しようとしてconstの名前空間はどうしたらいいんだろうとか、そういういらんことでつまづいたりしりした。vue.jsに手を出そうとしてこれがやりたいわけじゃねぇやとjQueryに戻ってきたりなんだり。

寄り道はしたけど、実際openしてデータストリームを受け取れるようになった後も、一行でほしいデータセットが3回ぐらいにわかれて送られてきたり、数行分おくられてきたりして、行終端がわからなかったりして、これbaudrateか??とか、javascript側からみると終端に\rしかいなくて、なんで???となったり、あれやこれや。

最近だとLite版とPro版でコマンドの実装がちょいと違って、wiresharkのお世話になった。
そう、wireshark、今USBの通信もキャプチャできるようになったんだって。便利だね。

まあ、そんなわけで、できるってわかればあっさりできちゃうこともあるよね。

他にも登ろうとした山

Androidの開発環境つくりかけてた

PCで正常系の環境再現したいなと素人ながらに考えて、何故かAndroid studioを入れた。
というのもGooglePlayからアプリを入れられるAndroid筐体で自由になるものが手元になく、仮想環境でつくろうと浅はかな知恵をしぼったのだ。だが、これもAMD系のCPUだと仮想環境が動かんのでなにやらBIOSから触らなきゃいけない嫌な感じであった。

そして、これがすこしできるようになってきたところで、登ろうとしている山の高さに気が付き、あれ、おれなにやってるんだろうと、くじける。

Android OTG デバイス給電

ひとにあったりするごとにAndroidの実機を借りて動かしてみたのだけど、最近のスマフォはUSB type-cになっていて、OTGの仕様が機種多様に山程あることにすこし躓いた。・・・これ普通のひと切り替えられないんじゃ説。

USB シリアル接続

触らさせてもらっていた実証実験用の実験機はUSBシリアルで設定をせねばならず、windowsやmacから行う必要があるものだった。まあ、黒い画面をひらいてシリアル通信ができるひとならできるだろうけど、ふつうの人には難しいとおもう。正直、商店街のおじさん達には無理なので自分で協力店を探して設定してまわったのだが、これがwindows exeになったからといって、キャリブレーションとかの意味をサポートなしでわかるひとどれくらいいるんだろうかと不安になったりしている。

流通している二酸化炭素センサー

なんかコロナ禍前は二酸化炭素がらみのセンサーを探すのに苦労してたのに、この数ヶ月で意味のわからん商品だらけになってて怖いです。

スタイリッシュなのが売れ行き好調なようです。まあモニタついていて安いしね。うちのは検索にひっかかりもしません。

とある製品を購入しました。人間の吐き出す吐息は2~3万ppmあるわけです。息を吹きかけても値がほとんど動かんので、ろうそくが消えるまで密閉空間にぶっこんでみたんですよ・・・。他のセンサーが2万とかを刻んでるところ、こわい結果になったのもあったりしました。おっかないですね。
国産って書かれてるのもあるけど、なんか、一年前はシンガポールから送られてきてたやつやないかい?というような気がしてるのもあったりします・・・、まあ、いろいろもやもや。おっかないですね。

他、webSerialの迷えるこひつじのためのURL

github.com/google/web-serial-polyfill/blob/master/demo.html
glitch.com/edit/#!/remix/web-serial-codelab-start


コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください