概要

社内のイベントなどで来場者の受付をしてどの人が来たか把握します。現行では把握するために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にするとイイと思ってます。

■ 作成したモノ

QRCodeツクール

※IDのパラメータでQRCodeを作成する場合
「10001」というテキスト情報のQRCode
「10009」というテキスト情報のQRCode

■ 懸念点

パラメーターの内容がそのままQRCodeのテキストになるので、若干セキュリティ的にどうなのというカンジはあります。既存の製品ではQRCodeの内容はランダムな文字列で、そういった暗号化する工夫は必要かもしれません。AWSなどのウェブサービス系のFunctionで暗号化・復号化するような仕組みを作るのはアリかもしれません。
ただ、結局のところ暗号化してもQRCodeの画像を保存されたら物理的にどうしようもなく、なりすましなどへの対策は意味がなさそうです。暗号化・復号化のメリットはあまりないかもしれません。

■ 参考にしたページ

Javascript でURLのパラメータを取得する方法

QR Code Generation Using JavaScript

QRCodeを読み取る機能の検証

QRCodeをカメラで撮影して読み取る機能を作成しました。当初はスマートフォンにインストールして使うネイティブアプリを考えたりしましたが、最近はWebでもカメラなど制御できるのでウェブサービスで作ってみました。すでにQRCodeを読み取るJavaScriptのライブラリがあり、デモやサンプルと参考にVue.jsと連携させてSPA(Single Page Application)として作成しました。こういったライブラリはフレームワークに上手く組み込めないことがあるんですが、今回はイイカンジに落とし込めたと思います。

生成したQRCodeを画像として認識しテキスト情報を読み取ります。今回は出欠のシステムということで、予め配列に社員番号と氏名を連想配列として持った状態にしています。連想配列だったらJSON形式なので、NoSQL系のデータベースなどの切り替えもある程度は対応できそうです。

実際に作成したものですがChromeなどのブラウザで開くとカメラが起動します。カメラの起動が許可されれば、ブラウザにカメラの映像が出力されます。カメラにQRCodeが映り認識されれば画像としてQRCodeの情報を読み取ります。

■ 作成したモノ

QRCodeリーダー

参考にしたページ

[HTML5] QRコードリーダーを作成する

QRCode読み取り機能を拡張する

予め配列に社員番号と氏名を設定していますが、このままだとカスタマイズして利用することができません。そのため、CSVでインポート・エクスポートする機能とデータを保存（維持する？）機能を追加で実装します。

データを保存する機能は通常なら外部のデータベースとかを使用すべきですが、とりあえず保存できればいいのでローカルストレージを採用しました。何かしらのデータの更新があればローカルストレージに保存するようにしました。ただし、ローカルストレージの場合はブラウザによって保存できる容量が限られているので、あまりにもデータ量が多いと使用できなくなります。

またインポートで取り込んだ状態を確認するための画面も用意しました。ここらへんはVue.jsさまさまな感じです。

予めCSVでデータを作っておけばQRCodeで出欠を管理できます。ただし、あまりにも人数が多いとローカルストレージの容量が不足して使えなくなったりします。また、複数の端末で利用しだすと、後でCSVを結合してデータを整理する必要もあるので注意が必要です。

CSVサンプルデータ（ダミーデータ）

※サンプルデータの名前は以下のサイトで作成しました
それっぽい名前ジェネレータ

上記サンプルデータによるスクリーンショット

最終的にどういった構成が検討できるか？

■ QRCode読み取り

とりあえず上記で作成したモノでよさそう
暗号化についてはメリットについて考えてやるべき

■ QRCodeの発行

外部のデータベースを使わなければ上記の内容でほとんど大丈夫
もっと閉じた環境で使用したいなら端末でウェブサーバーとして起動するかElectronなどもよさそう
静的なページなのでそのままElectronに移行可能（実際にやってみたがカメラも無事起動しデータの連携も問題なし）
Electronだと外部に公開されないので外部データベースのセキュリティもそこまで深く考えなくても大丈夫かもしれない

外部のデータベースを連携する場合はローカルストレージに保存する仕組みを移行すればよさそうです。AWSの場合はCloudFrontに静的なページを設置しdynamoDBやRDSなどを利用することになります。個人的にはFirebaseが好きで、静的なページにCDNで記述して利用する場合、Firebase側で書き込み制限のルールを記述すれば、外部に公開しても何とかなりそうです。

メールを送付する機能は？

GAS（Google App Script）が理想的。社内はGmailを利用しておりGoogle SheetsでGASを利用すればメールを送信する仕組みはできそう。別でウェブサービスを作るよりかは良さそうな気がします。ウェブサービスで作っても結局使いづらいモノだったりするのでExcelベースで利用できる仕組みの方がイイかもしれません。
定型文と上記で作成したQRCode生成機能のパラメーターを変えたモノを別々に送付すれば要件を満たせると思います。