ブラウザでランダムなQRコードを生成するツールを作った話

サマリ

ブラウザで動作するランダムQRコード発行ツールを作成しました。

成果物

こちらにアクセスするだけで使えます。ソースコードもOSSでどうぞ。

開発モチベーション

先日作成したQRコードのReaderのパフォーマンステストをしたいなと思い、自動でかつ、いろいろなサイズでQRコードが発行されるツールが欲しくなりました。テスト結果も上々でした↓。

QRコードをランダムに自動生成するツール作ってiPhone 11 Proで確かめてみたけど、かなり良いパフォーマンスで読み込めている事がわかった。 pic.twitter.com/4kUXCE866U

— Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) February 16, 2020

使い方

1. ツールにアクセスするだけで、OKです。すぐにQRコードが発行されると思います。
2. 下記の設定が可能です。
   3. リフレッシュレート( 0.2 Hz - 10 Hz)
   4. Min/Max version ( Version 1 - Version 40. QRコードのサイズの事です)
   5. エラー訂正レベル (L/M/Q/H)

SWのポイント

QRコード読み取りライブラリ

こちらの記事を参考に、node-qrcode @oldairを使用することにしました。
使い方もすごく簡単です。

index.html

<script src="https://cdn.jsdelivr.net/npm/qrcode@latest/build/qrcode.min.js"></script>
<canvas id="QRCode"></canvas>

index.js

const QRCodeCanvas = document.getElementById( "QRCode" );

// generateRandomData() はランダムにデータ生成する自前関数
QRCode.toCanvas( QRCodeCanvas, generateRandomData(), {
 margin: 2,
 scale: 3,
 errorCorrectionLevel: getErrCorrectionLevel()
} );

とするだけで、canvasへQRコードを描画してくれます。

所感と考察

• 今回の目的であるパフォーマンス測定には十分使えたので大変良かった。また、これにより読み取りツール側のバグらしき挙動も見つけた。
  • 特大サイズ(Level19以上)になってくると読めない、特定のデータサイズ(特に各レベルのデータ最大境界値付近)で生成したQRが読めないなど。
• 図らずも、Generative artのようなものが産まれた

  • QR codeのテスター作ってたら、図らずもgenerative artみたいになった。 pic.twitter.com/hITIEAaZwY

    — Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) February 16, 2020

• 今回のQRコード生成をきっかけにいくつかのアイディアを思いついたので、時間を見つけて検証していきたい。