React RC-S380 接続

インストール

npm i @types/w3c-web-usb
npm i rc_s380_driver

設定

ts.config.json

"types": ["vite-plugin-svgr/client", "vitest/globals", "@types/w3c-web-usb"],

piyoko

const onClick = async () => {
    const device = await navigator.usb.requestDevice({ filters: [] })
    await device.open()
}

こんな画面が表示される。

piyoko

ココにかいてあるが、httpsでないとダイアログが表示されない。

なのでAWSの静的サイトで試すときは、CloudFrontでhttpsアクセスする必要がある。

WEB APIの対応ブラウザ
Microsoft Edge は（Windows）環境でしか使えないかもしれない。

piyoko

他に、SONY製のSDK for NFC Web Clientを使用する方法もある。
ココから評価版をダウンロードできる。

値段は120,000/年
内部でWEB API を使用しているので、対応ブラウザはWEB APIと同じ
Google Chrome、Microsoft Edge（Windows）

piyoko

デバイス一覧にRC-S380だけを表示する。

const onClick = async () => {
    const filter = { vendorId: 0x054c }　// RC-S380のベンダーID
    const device = await navigator.usb.requestDevice({ filters: [ filter ] })
    await device.open()
}

こんな画面が表示される。

RC-S380のベンダーIDを調べる（Windows）

デバイスマネージャー > NFC Port > NFC Port/PaSoRi 100 USB を右クリックプロパティ

詳細タブ＞プロパティで「ハードウェア ID」を選択

VID・・・デバイスのメーカーに対して割り振られたID
PID・・・メーカーにより製品に対して割り当てられたID

製品まで固定したいのであれば、PIDを指定するほうがいいのかもしれない。
ただ RC-S380 と RC-S380/S で同じPIDかどうかわからないのでVIDだけ指定しておくことにする。

const onClick = async () => {
    const filter = {  vendorId: 0x054c,  productId: 0x06c3 } 
    const device = await navigator.usb.requestDevice({ filters: [ filter ] })
    await device.open()
}

piyoko

表示されたデバイス一覧でRC-S380を選択して「接続」をクリックすると
Uncaught (in promise) DOMException: Failed to execute 'open' on 'USBDevice': Access denied.
が発生する。

Windowsでは、WinUSBドライバがデバイスにロードされていない場合に、このエラーが発生するらしい。

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

RC-S380のドライバをすでにインストールしている場合はアンインストールする。

SONYのページから「NFCポートソフトウェアリムーバー」をダウンロードし実行する。
NFCポートソフトウェアリムーバー

RC-S380にWinUSBドライバをインストールする

SONYのページから NFCポートソフトウェアをダウンロードする。
NFCポートソフトウェア

2.コマンドプロンプトでドライバをダウンロードしたフォルダへ移動し「NFCPortWithDriver.exe /WinUSB」を実行して、ドライバーをインストールする

3.NFCポート自己診断（ドライバ切り替え）を起動する
「自己診断」タブ > カードリーダーにカードを置いて、「次へ」クリックし

カードが読み取れるか確認する。

「設定」タブ > 「WinUSB」を選択して「更新」クリック