QRコードの段階的な生成方法
(nayuki.io)QRコード生成の段階的な過程
このJavaScriptデモアプリケーションは、テキスト文字列がQRコードのバーコードシンボルへエンコードされる過程を詳しく可視化する。このページの内容は、QRコード生成ライブラリが内部でどのように動作するかを説明し、その妥当性を示す。
ユーザー入力
- テキスト文字列: "Hello world"
- 誤り訂正レベル: 低、中、四分位、高
- 最小バージョンの強制: 1から40の間
- マスクパターンの強制: 自動(-1)または手動(0から7)
QRコード出力
段階的な過程
0. Unicode文字の解析
- 入力テキスト文字列のコードポイント数: 17
- 各文字の詳細:
- インデックス、文字、Unicodeコードポイント、数字モード、英数字モード、バイトモード、漢字モードでエンコード可能かどうか
1. データセグメントの生成
- 各文字をビットへ変換
- バイトモードでは文字が8、16、24、32ビットを生成
- 生成された単一セグメント:
- モード: バイト
- 個数: 17バイト
- データ: 136ビット長
2. バージョン番号への適合
- セグメント一覧を表現するために必要な総ビット長
- バージョンおよび誤り訂正レベルに応じたQRコードのデータコードワード容量
3. セグメントの連結、パディング追加、コードワード生成
- さまざまなビット文字列を結合
- セグメントモード、文字数、データ、終端子、ビットパディング、バイトパディング
4. ブロック分割、ECC追加、インターリーブ
- すべてのブロックに関する統計
- データコードワードを短いブロックと長いブロックに分割した後、ECCコードワードを計算して追加
5. 固定パターンの描画
- 水平および垂直のタイミングパターンを描画
- 3つの角にファインダパターンを描画
- アライメントパターンのグリッドを描画
- 仮の形式ビットを描画
- バージョン情報ブロックを描画
6. コードワードと余りの描画
- ジグザグ走査を計算して、まだ埋まっていないすべてのモジュールを訪問
- データ/ECCモジュールを、ジグザグ走査順とコードワードのビット値に従って描画
7. 各マスクの適用を試行
- マスクパターンを適用
- データ、ECC、余りモジュールにマスクXORを適用
- 実際の形式ビットを描画
8. ペナルティパターンの検出
- 同じ色の水平および垂直モジュールの連続
- 2×2の同色モジュールの箱
- 水平および垂直のファインダパターン
- 暗/明モジュールのバランス
9. ペナルティポイントを計算し、最適なマスクを選択
- ペナルティポイントの計算方法
- 最低の総ペナルティポイント: マスクパターン3
追加情報
- QRコード設計に関するWikipediaおよびその他の資料へのリンクを提供
このWebアプリケーションのソースTypeScriptコードおよびコンパイル済みJavaScriptコードは閲覧可能。
1件のコメント
Hacker Newsのコメント
QRコードに関するオンライン解説では、Reed-Solomon誤り訂正コードの計算が省かれていることが多いのが残念
VeritasiumのQRコードに関する動画 "I used to hate QR codes. But they're actually genius" がある
著者が受け取るフィードバックが面白い
QRコードデコーダーについても似たような解説を見てみたい
RustでQRコードを実装したことがある
記事タイトルに年をタグ付けするのは良い慣行である（この場合は2018年）
QRコードの動作原理を学ぶことは長い間やることリストに入っていたが、これは良い入門記事だった
QRコードをすばやく作りたかったが、広告の多いサイトや「使うには登録」が必要なサイトのせいで苦労した
さらに多くのオプションを追加することもできるが、ほとんどのユーザーには必要ないだろうと思う
QRコードの仕組みが分かったので、SQLクエリでも使える