今この世の中は様々なカードが出回っており、企業でも「入出用カード」「勤怠管理カード」「SuicaやPasmo」「プリンタセキュリティ印刷用カード」などなど様々なカードが存在します。これらのカードはFelica(NFC Type F)やNFCと呼ばれ、中にidmと呼ばれる一意の情報が入っています。

これらのカード情報を利用して現在、Accessで書籍管理アプリを作り運用していますが、使用しているSheepSmartCard.dllが64bit VBAに対応しておらず、64bit主流の現在これを用いてVBAを使ったプログラムを作る事が出来ません。そこで今回、Electronを利用してカードリーダを作成し、64bit環境で活用できる書籍管理アプリを作りなおしてみようと思います(貸出と返却の2機能)。

今回のプログラムは前回のElectronでMySQLへ接続するアプリを作るの続編となります。大多数のコードやモジュールはと同じです。それらについては前回の記事を参考にインストールしてみてください(特にkeytarは注意が必要です)。

今回使用するものとライブラリ

カードリーダーとドライバー

Node.jsモジュール

  • keytarモジュール – OS標準のパスワード管理システムを利用して、安全にパスワード等のやり取りをする
  • electron-store – 各種設定情報を格納する為のモジュール
  • Promise-MySQLモジュール – Promiseが使えるMySQLへアクセスする為のモジュール
  • jQueryモジュール – ElectronでjQueryを使えるようにする為のモジュール
  • electron-rebuildnfc-pcscモジュールをリビルドするために使用します。
  • nfc-pcsc – Node.jsでPC/SC規格準拠のカードリーダーを読み書きする為のモジュール

※ただし注意点があって、nfc-pcscのライブラリであるpcscliteが原因で、Windows10 32bitでは、electron-rebuildを行ってもきちんと動作せずアプリ自体が起動しません(electron v3.0.0で検証してます)。これについての解決法は後述(nfc-pcscのモジュールをリビルドするを参照)。

HTML側で利用するライブラリ

事前準備

今回導入するnfc-pcscモジュールですが、RC-S380の読み書きの為のモジュールで、Windowsでは認識しましたが、Macでは認識せず・・・nfcpyでは使えましたが….

ということなので、今回のElectronアプリはWindows専用として構築します。他のカードリーダー(例:ACR122)などの場合には、macOSでもnfc-pcscが利用できるかもしれません。RC-S380はPC/SC規格準拠していても、nfc-pcscでは利用できませんでした。

図:nfcpyだときちんと認識するんです・・・

NFCモジュールを追加する

まずは、プロジェクトファイル作成、package.json作成、index.htmlおよびindex.jsを作成して置きます。ターミナルを起動して以下のコマンドで今回利用する予定のモジュールを入れておきましょう。

これだけで、RC-S380リーダーを接続し、FelicaのカードやSuicaのカードをかざせば、idm情報が取得出来ます。

図:非接触でidmの取得が出来ました。

モジュールをリビルドする

nfc-pcscモジュールはNode.jsではそのまま利用が可能ですが。Electronではそのままですとエラーが出て利用が出来ません。そこで、electron-rebuildを用いてリビルドをする必要があります。あらかじめこちらのサイトを参照して、electron-rebuildをインストールをしておきましょう。

リビルドする手順は以下の通り

  1. ターミナルを起動する
  2. プロジェクトフォルダに入る
  3. electron-rebuild -w nfc-pcscを実行し、リビルドする

ただし、Windows10 32bitではこれでは足りず、以下の作業を行う必要があります。pcscliteというモジュールがエラーの原因です。

  1. ターミナルを起動する
  2. プロジェクトフォルダに入り、node_modules⇒@pokusew⇒pcscliteに入る
  3. node-gyp configureを実行する
  4. プロジェクトフォルダ直下に戻り、electron-rebuild -w pcscliteを実行する
  5. リビルドが完了したら、RC-S380を接続した状態で、electron .を実行すること(未接続だと延々にアプリは起動しない)。
  6. Windows10 64bitでは同様の症状は確認されていない。32bitだけ挙動が異なるようだ。

使用するDBファイルとプロジェクトファイル

  • 前回使用したuseridテーブルfelica列(VARCHAR型)を追加し、各人のidm情報を格納しています。idmが一致しないと書籍を借りることができません。必ず全ユーザ分登録が必要です。
  • 新たに貸出記録用のテーブルであるrent_booksテーブルを追加しています。
  • また、書籍を廃棄する時に記録するdisp_booksテーブルを追加しています。
  • 貸し出せる書籍の様々な情報を格納したbookmasterテーブルを追加しています。

今回新規に追加したMySQL用のテーブルデータはこのファイルです。今回はHeidiSQLにてエクスポートしています。データの中身は空っぽです。

図:useridテーブルにfelica列の追加とidmの登録を忘れずに

fontawesomeについて

プログラム的には全く必要ないのですが、ちょっとだけ格好よくする為に、今回fontawesomeを導入しています。テキストボックスの中にバーコードのアイコンを表示したい為です。fontawesome free for the webをクリックしてダウンロードして作業をします。

  1. cssフォルダにall.cssを入れます。
  2. index.htmlと同じフォルダ内にwebfontsフォルダをコピーしておきます。
  3. index.htmlのヘッダに1.をロードするコードを追記します(<link rel=”stylesheet” href=”css/all.css” rel=”stylesheet”>
  4. 以下のスタイルシートを追加しておきます。

これで、classがfontaweのものにバーコードのアイコンが入るようになります。アイコンはcontentにバックスラッシュ付きでUnicode指定してあげます。

図:バーコードがテキストボックスに表示された

flipclock.jsについて

これもプログラム的には全く必要のないものですが、時計の表示をする為に用いてるもので、昔のパタパタめくれる時計表記を実現するライブラリです。

  1. 今回は、exampleのtwenty-four-hour-clock.htmlを利用してみました。
  2. jsおよびcssフォルダにそれぞれファイルをflipclock.jsとflipclock.cssを格納しておく
  3. index.htmlにそれぞれロードするコードを追記
  4. 初期化コードは以下のようなもの。また、表示を大きくするために追加のスタイルシートを追記

追記するCSSで表示倍率等を調整

このライブラリはヘッダではなくbody以下にscriptタグでロードさせる必要がある点に注意。

コマンドプロンプトの日本語が文字化け

普段はWindowsではなくmacOSで開発を行っているので、気にしていなかった事なのですが、Windowsのコマンドプロンプトで作業をしていると、console.logで出した文字や、サーバから受け取ったデータが文字化けます。これは、コマンドプロンプトの文字コードがUTF-8ではない事が原因で、以下のコマンドを入力して文字コードを変更してからであれば、正しく表示されます。

元のShift-JISに戻す場合には

でオッケー。ただ毎回入れるのも面倒なので、自分はcmd.exeのショートカットに以下の細工をしてデフォルトでUTF-8にしています。

  • リンク先は%windir%\system32\cmd.exe /K “chcp 65001”とする
  • 作業フォルダは%HOMEDRIVE%%HOMEPATH%とする

図:ショートカットの設定

図:文字化けるとこうなる

DATETIME型のフィールドにNULL値を入れるのを許可する

MySQLはDATETIME型フィールドにNull値許可をしても、そのままでは空ではデータをInsertすることが出来ずにエラーとなります。これは初期値が厳格なモードになっており、おかしな日付形式とみなされ拒否されているからです。これを解除する方法は以下の通り。

  1. mysqld.cnfの中にsql_mode = ”を追記する
  2. 再起動する

これだけです。

反映させる前に、ターミナルからMySQLにログインして確認してみると良いです。確認するコマンドは以下の通り。

これが設定値を加えて再起動すると空になり、Nullでも入力ができるようになります。厳格モードがあることには一定の意味があるので、個人的にはダミーの日付とか入れていますが、利便性が悪いのは事実なので、この設定を入れておき、必ずUI側できっちりvalidationしておくことをお忘れなく。

ソースコード

NFC読み書き部分

  • 今回のメインディッシュ部分。とってもシンプル。常に後ろで待機しているので、レンダラプロセス側で何もせずとも、NFCカードリーダにFelicaをかざせば、自動応答し、レンダラプロセス側にダイアログが出る仕組みにしています。
  • Electron起動後にカードリーダを接続・取り外しを行うと、メインプロセス側で認識し応答しますので、それぞれのイベントに記述をしておくと良いでしょう。
  • idmなどのデータは、JSONでcardに返ってくるので、この中からuidを拾えば、idm情報を取得可能です。

メインプロセス側(index.js)

  • データベース接続は前回同様、promise-mysqlによる同期処理で接続させています。
  • ISBNコード登録の有無チェック、NFCのidm登録の有無チェック、貸出中書籍の有無チェックなどが入っています。
  • このプログラムには書籍検索、書籍登録、書籍廃棄の3つの機能はまだ未実装です。
  • keytarモジュールおよびnfc-pcscモジュールがきちんとネイティブ環境用にrebuildされていれば、パスワード取得、NFCカード情報取得が動きます。このあたりで止まってる場合、きちんとrebuildされていないのが原因です。
  • NFCであればFelicaでなくともidmの読み取りは可能だと思います。
  • rent_booksテーブルに登録時には、返却日データもダミーで登録しています。rentflgにて返却済みかどうかを判定させています。

レンダラプロセス側(index.html)

  • ボタンなどを配置せず、テキストボックス1個だけのシンプル仕様です。
  • バーコードリーダーでISBNコードを読み取った後、NFCリーダーにFelicaをかざすとスタートです。
  • ISBNコードのValidationが正しければ、貸出・返却用のダイアログが出てきます。
  • 正しくメインプロセス側で貸出と返却の処理がなされれば、メインプロセス側からメッセージが出て、ダイアログは閉じます。
  • 事前に接続設定にて、サーバアドレスやID、パスワード、データベース名を登録する必要があります。
  • パスワードはkeytarによって、資格情報マネージャへ格納されます。

関連リンク

共有してみる: