概要
社内のイベントなどで来場者の受付をしてどの人が来たか把握します。現行では把握するためにQRCodeを読み取って来場したかチェックしており、システム自体はすでにあるパッケージ製品を利用しています。パッケージ製品を利用するのはイイんですが、そもそもこれ自分たちで作れるのではという話が挙がり、今回いろいろお試しでやってみた内容を記載します。
既存システムの仕様
どういう製品を使っているなどは詳しく見たことはありません。傍から見たカンジの仕様を以下に記載します。
■ QRCode読み取りの仕様
- レジなどにあるポスのような機械でQRCodeを読み取る
- 読み取ったら誰が来たのかQRCodeの内容でわかる
- QRCode読み取り後何らかのDBのようなモノに登録する？
■ QRCodeの発行
- メールに各参加者にQRCodeが送付される
- メール自体に画像が埋め込まれているわけではなくQRCodeが表示されるURLを送付
- QRCode自体の情報を確認してみるとURLやリンクなどではなく、ただのランダムな文字列
QRCodeを作成する機能の検証
JavaScriptでQRCodeを生成するライブラリがいっぱいありますので、それを使わせていただきます。あとURLごとにQRCodeの内容が変わる必要があるためURLのパラメータを受け取ってQRCodeを作成する形にしました。idというURLパラメーターで渡せば、パラメーターの内容でQRCodeを作成します。QRCodeの生成については、Javascriptにはいろんなライブラリがあり、良さげなモノをチョイスしました。
この機能を使えばメールでQRCode生成のURLを送付すれば要件を果たせると思います。今はパラメーターの値がそのままQRCodeのテキストになりますが、社員番号などを直接格納する形になりそうです。今回作成したモノはテキストボックスの内容でQRCodeの内容を更新できます。パラメーターだけで制御したい場合はテキストボックスをReadOnlyにするとイイと思ってます。
■ 作成したモノ
※IDのパラメータでQRCodeを作成する場合
「10001」というテキスト情報のQRCode
「10009」というテキスト情報のQRCode
■ 懸念点
パラメーターの内容がそのままQRCodeのテキストになるので、若干セキュリティ的にどうなのというカンジはあります。既存の製品ではQRCodeの内容はランダムな文字列で、そういった暗号化する工夫は必要かもしれません。AWSなどのウェブサービス系のFunctionで暗号化・復号化するような仕組みを作るのはアリかもしれません。
ただ、結局のところ暗号化してもQRCodeの画像を保存されたら物理的にどうしようもなく、なりすましなどへの対策は意味がなさそうです。暗号化・復号化のメリットはあまりないかもしれません。
■ 参考にしたページ
QR Code Generation Using JavaScript
QRCodeを読み取る機能の検証
QRCodeをカメラで撮影して読み取る機能を作成しました。当初はスマートフォンにインストールして使うネイティブアプリを考えたりしましたが、最近はWebでもカメラなど制御できるのでウェブサービスで作ってみました。すでにQRCodeを読み取るJavaScriptのライブラリがあり、デモやサンプルと参考にVue.jsと連携させてSPA(Single Page Application)として作成しました。こういったライブラリはフレームワークに上手く組み込めないことがあるんですが、今回はイイカンジに落とし込めたと思います。
生成したQRCodeを画像として認識しテキスト情報を読み取ります。今回は出欠のシステムということで、予め配列に社員番号と氏名を連想配列として持った状態にしています。連想配列だったらJSON形式なので、NoSQL系のデータベースなどの切り替えもある程度は対応できそうです。
実際に作成したものですがChromeなどのブラウザで開くとカメラが起動します。カメラの起動が許可されれば、ブラウザにカメラの映像が出力されます。カメラにQRCodeが映り認識されれば画像としてQRCodeの情報を読み取ります。
■ 作成したモノ
参考にしたページ
QRCode読み取り機能を拡張する
予め配列に社員番号と氏名を設定していますが、このままだとカスタマイズして利用することができません。そのため、CSVでインポート・エクスポートする機能とデータを保存（維持する？）機能を追加で実装します。
データを保存する機能は通常なら外部のデータベースとかを使用すべきですが、とりあえず保存できればいいのでローカルストレージを採用しました。何かしらのデータの更新があればローカルストレージに保存するようにしました。ただし、ローカルストレージの場合はブラウザによって保存できる容量が限られているので、あまりにもデータ量が多いと使用できなくなります。
またインポートで取り込んだ状態を確認するための画面も用意しました。ここらへんはVue.jsさまさまな感じです。
予めCSVでデータを作っておけばQRCodeで出欠を管理できます。ただし、あまりにも人数が多いとローカルストレージの容量が不足して使えなくなったりします。また、複数の端末で利用しだすと、後でCSVを結合してデータを整理する必要もあるので注意が必要です。
※サンプルデータの名前は以下のサイトで作成しました
それっぽい名前ジェネレータ
上記サンプルデータによるスクリーンショット
最終的にどういった構成が検討できるか？
■ QRCode読み取り
- とりあえず上記で作成したモノでよさそう
- 暗号化についてはメリットについて考えてやるべき
■ QRCodeの発行
- 外部のデータベースを使わなければ上記の内容でほとんど大丈夫
- もっと閉じた環境で使用したいなら端末でウェブサーバーとして起動するかElectronなどもよさそう
- 静的なページなのでそのままElectronに移行可能（実際にやってみたがカメラも無事起動しデータの連携も問題なし）
- Electronだと外部に公開されないので外部データベースのセキュリティもそこまで深く考えなくても大丈夫かもしれない
外部のデータベースを連携する場合はローカルストレージに保存する仕組みを移行すればよさそうです。AWSの場合はCloudFrontに静的なページを設置しdynamoDBやRDSなどを利用することになります。個人的にはFirebaseが好きで、静的なページにCDNで記述して利用する場合、Firebase側で書き込み制限のルールを記述すれば、外部に公開しても何とかなりそうです。
メールを送付する機能は？
GAS（Google App Script）が理想的。社内はGmailを利用しておりGoogle SheetsでGASを利用すればメールを送信する仕組みはできそう。別でウェブサービスを作るよりかは良さそうな気がします。ウェブサービスで作っても結局使いづらいモノだったりするのでExcelベースで利用できる仕組みの方がイイかもしれません。
定型文と上記で作成したQRCode生成機能のパラメーターを変えたモノを別々に送付すれば要件を満たせると思います。