wasmを使いQRコードを発行するライブラリをつくりたい。

概要

wasmを使い、QRコードをフロントエンド完結で発行するライブラリを作りたい。

モチベーション

QRコードを利用するタイミングがいくつかある。

• SNSにシェアをしたい時
• キャッシュレス決済でQRコードを使いたい時
• イベントの参加、チェックイン
• フィードバックフォームへの誘導
  これらをするときにQRコードがより高速で吐き出されるといいなと思った。

ゴール

自作ライブラリを作り、パッケージを公開する。

ムーンショットとして、話題になったりしたらいいなと思う。

ロードマップ

1. 先行しているライブラリの調査
2. 技術選定
3. 実装
   a. QRコード生成アルゴリズムの実装
   b. Rustコードの作成
   c. wasmへのコンパイル
   d. JavaScriptラッパーの作成
   e. パフォーマンス最適化
   f. テストとデバッグ
   g. ドキュメント作成
   h. パッケージ化とリリース

このスクラップでかくこと

調査内容の記録や、詰まった箇所、工夫した点などを記載していく。

先行ライブラリ調査

qrcode-rust

Rustで実装されたQRコード生成ライブラリ
wasmにコンパイル可能
メリット

• Pure Rustで実装されており高速
• 様々なQRコードバージョンをサポート

デメリット

• 機能が限定的

zxing-cpp-emscripten

C++のZXingライブラリをEmscriptenでwasmにコンパイルしたもの
メリット

• 多機能で成熟したライブラリ

デメリット

• ファイルサイズが大きくなりがち
• C++からの変換のため最適化の余地がある

qrcode-generator

JavaScriptで実装されたQRコード生成ライブラリ
wasmバージョンも提供
メリット

• 軽量
• 使いやすい

デメリット

• 高度な機能は限られる

libqrean

C言語で実装されたQRコード生成/読み取りライブラリ
wasmにコンパイル可能
メリット

• 軽量
• 生成と読み取りの両方に対応

デメリット

• ドキュメントが少ない

先行ライブラリを調べての考察

自分がやりたいことは大抵他の人がやっているなという当たり前の感想を得た。
ただ、ライブラリ事にメリデメがあるようにどこかでオリジナリティを出せたら良さそう。

まずは限定的な機能で最低限を満たして、その後アップデートを続ける方針で行こうと思う。
デザイン性の向上をしてカラーにしたりとか、ロゴが埋め込めるようにできたら面白いかも?

QRコード生成アルゴリズムの実装についてフォローアップ

実はQRコードの生成アルゴリズムがナニモワカラナイなので、ちょっと寄り道してフォローアップをする。

AIに聞いてみたところ以下のステップを踏む模様

データエンコーディング
入力データを適切なモード（数字、英数字、バイト、漢字）に変換します1。
データをビット列に変換し、モード指示子と文字数指示子を追加します。
必要に応じて、パディングビットを追加してデータを所定の長さにします。
エラー訂正コードの生成
リード・ソロモン符号を使用してエラー訂正コードを生成します1。
データコードワードとエラー訂正コードワードを結合します。
マトリックス配置
QRコードのバージョンに応じたマトリックスを作成します。
機能パターン（位置検出パターン、位置合わせパターン、タイミングパターン）を配置します。
データコードワードとエラー訂正コードワードをマトリックスに配置します。
マスクパターンの適用
8種類のマスクパターンを生成し、それぞれを適用したマトリックスを作成します。
各マスクパターンに対してペナルティスコアを計算し、最適なものを選択します5。
形式情報と型番情報の追加
誤り訂正レベルとマスクパターン情報を含む形式情報を生成し、マトリックスに追加します。
バージョン7以上の場合、型番情報を生成してマトリックスに追加します。
これらのステップを実装することで、QRコードを生成することができます。実装の詳細は複雑ですが、オープンソースライブラリを活用することで、効率的に開発することができます