WebUSBでICカード取り込みを試す

はじめに

初めまして、ntthuatと申します。ラクスに入社して3年目になりました。時間が過ぎるのは早いですね。

さて、2020年12月末にFlashのサポートが終了するという話は皆さんもご存知かと思います。今回、私が開発担当している「楽楽精算」で、Flashの代わりにWebUSBという技術を用いて、ICカード履歴を取り込む機能をリリースすることになりました。
この記事ではそのWebUSBについて試したことを一部ご紹介させていただきます。

はじめに
動作確認環境
WebUSBとは
PaSoRi RC-S380/Sのドライバーをインストールする
WebUSBの動作確認
おわりに

動作確認環境

以下の環境でWebUSBの動作を確認します。

Windows 10
Google Chrome 83
PaSoRi RC-S380/S

WebUSBとは

簡単に言うと、WebUSBはjavascriptで書かれているAPIです。
WebUSBはPCに接続されたUSBデバイスにChromium系ブラウザ（Chromeなど）から直接アクセスすることができる技術です。 USBデバイスの認識、読み出しなどを行うことができます。 EdgeはChromiumベースで開発していますのでEdgeでもWebUSBが使用できます。

ChromeのDeveloper ToolsでWebUSBのAPIを実行してみましょう。

await navigator.usb.requestDevice({'filters': []})

ドライバーをインストールせずにブラウザ自体のみでUSBデバイスを認識できます。

今回はPaSoRi RC-S380/S経由でWebUSBの動作を確認しますのでPaSoRi RC-S380/Sのドライバーのドライバーが必要です。

PaSoRi RC-S380/Sのドライバーをインストールする

で評価版をダウンロードできます。

Sonyサイトでのマニュアルのとおり実行します。

コマンドプロンプト等で、NFCポートソフトウェアを以下のオプションを指定してインストールしてください。
NFCPortWithDriver.exe /WinUSB　

注意点： NFCPortWithDriver.exeをダブルクリックすると、WinUSBを含めないドライバーをインストールしてしまいますので、WinUSBに付けて実行してください。

ドライバーインストールが完了したら、NFCポート自己診断(ドライバ切り換え)でWinUSBドライバーに切り換えができます。

WinUSBに切り替えしてください。

WebUSBの動作確認

PaSoRi RC-S380/S経由でICカードを取り込みを確認しましょう。

ソニーのサポートサイトで提供されているサンプルプログラムを実行してみます。
サンプルプログラムのソースコードにつきましては、詳しくはSonyサイトでご覧ください。

PaSoRi RC-S380/SをPCに繋げてExecuteボタンをクリックすると、デバイスを選択するダイアログが出て、RC-S380/Sを認識してICカード履歴を読み取りできます。

実行結果は以下のようです。

レスポンスのデータはhexのフォーマットですが、分析して日付や距離、金額などを取得できます。

おわりに

Flashのドアーが閉まるとWebUSBのドアーが開かれますね。(^_^)
WebUSBでブラウザからUSBデバイスを読取りできて素晴らしかったです。

エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。

https://career-recruit.rakus.co.jp/career_engineer/
カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
rakus.hubspotpagebuilder.com
ラクスDevelopers登録フォーム

https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/
イベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！