他の投稿はこちら
ブラウザでICカードを読み込む場合、IEでActiveXを使用し、FeliCaリーダーに接続する方法が一般的です。
また最近では、WebUSBでFeliCaリーダーに接続する方法も出てきました。
今回は、WebUSBもActiveXも使用せずに、ブラウザからFeliCaリーダーに接続する方法を紹介します。
概要
構成は以下の通りです。
- FeliCaリーダーを読み込むネイティブアプリを作成する
- ネイティブアプリ上でWebSocketサーバーを立ち上げる
- ブラウザからネイティブアプリのWebSocketサーバーにローカルホスト接続する
- ネイティブアプリでFeliCaリーダーからICカードを読み込み、WebSocketサーバーを通して、情報をブラウザに送信する。
デモ
今回はネイティブアプリ部分をC#で作成しました。
Nfcの読み取り部分はTomoSoft様のwinscard.dllラッパーを使用させて頂きました。
メリット
カード読み取り機能がネイティブアプリとしてブラウザから独立しているため
WebSocket通信が可能なら、どんなブラウザでも動きます。
上記のデモはChromeで撮影していますが
Firefoxでも
Edgeでも
IEでも
動きます。
まとめ
このように、ネイティブアプリ上に立ち上げたWebサーバーに、ブラウザからローカルホスト接続することで
Webアプリにネイティブアプリの機能を追加することが出来ます。
従来のハイブリッドアプリは、ネイティブアプリ内にWebViewを内包しますが
今回紹介した構成は、ネイティブアプリとブラウザが独立して並列に稼働します。
この構成を、従来のハイブリッドアプリに対して、「パラレルハイブリッドアプリ」と呼んでいます。
パラレルハイブリッドアプリは、ネイティブアプリとブラウザの接点がWebSocket通信部に限られるため
従来のWebView方式に比べて独立性が高く、セキュリティ面、設計面の問題が起きにくくなっています。
パラレルハイブリッドアプリの詳細な説明はこちら
Webアプリとの連携において、通信内容を暗号化したい場合はこちら
サンプル＆ソース
サンプル＆ソースはこちら。
（動作確認にはFeliCaリーダーが必要です）