これは何？
Web USBで接続したNFCカードリーダからSuicaの情報を読み取ってWebアプリに入力するデモです。
入力先のWebアプリは開発者向けのアカウントを用意してくださっているサイボウズ社のkintoneを利用しました。
経緯
1年ほど前にSuicaを読む[Webアプリ] [Blog] を公開しています。今回はその続編で「現実的なユースケース」を入れてより身近に感じられるようにしてみた、という感じです。
あっ、それからGoogle I/O 2021にも刺激されて「何かしたい」と感じたのも1つの経緯ですね（汗）この辺りを観て刺激されています。
- What’s new for the web platform | Keynote
- Excalidraw and Fugu: Improving core user journeys | Session
「NativeアプリでできることをWebでも可能にしたい！」という考えで動いている Project Fugu🐡（Web Capabilities Project） は個人的にとても良いなー、っていつも思っています。Web MIDIに思い入れが強いし、Web＆デバイスが好きだからこそかもしれませんけど、とにかくWebの未来を感じるしワクワクしますw
ちなみに、Project Fuguの現在の状況はこんな感じです → Fugu API Tracker
デモ動画
デモの中ではSony社のRC-S380/sというカードリーダを使っていまして、入力は以下の3ステップ。
- カードリーダを接続
- 読み込みたいカードをカードリーダに乗せる
- kintoneアプリ内の読み込みボタンをタップ
- 入力したいテキストエリアにフォーカスして、入力したい項目をクリック
扱いはとても簡単です。こんな機能が出張精算のアプリにに組み込まれたら便利だなー、と思います。
「現代は多くの人がモバイルSuicaだよねーっ！」という難点はありますw
動画内の右上のカメラの映像は@massie_gの「WebRTCに使うデバイスを選択するには（＋おまけ）」に書いてあったWebアプリを使わせていただきました。PinPもできてすごく便利でした！ありがとうございました！
感想
いろいろありコードが公開できないのが残念ですが、Webの未来が少しでも見てもらえたなら嬉しいです。
そして、Web USBじゃないけど、、、kintoneの柔軟性に驚きました。JavaScriptを使うことはできるけど、何か制約があってWeb USBとか使えないかも、、、と思ってましたがあっさり動作してビックリ。kintoneは業務用途のアプリケーションプラットフォームなので、バーコードを読むハンディースキャナとか、その他のデバイスをWeb USBだったり、Web Bluetoothなどを経由して使えるようになると、もっともっと業務効率化のネタが出てきてをおもしろいんじゃないかな？なんてWebとデバイス好きな自分は感じました。