← ツールに戻る

About · How it works

このツールについて

「QR メーカー」がどんなライブラリを使い、内部でどんな処理をしているかをまとめたページです。入力した内容がどこへ行くのか（＝どこへも行かない）を含めて説明します。

---

使っている外部ライブラリ

QR コードの符号化にだけ、外部ライブラリを 1 つ使っています。描画・保存・UI はすべて素の JavaScript です。

元々は CDN（cdnjs）から読み込んでいましたが、外部依存をなくすためファイルを同じ S3 バケットに置き、自サイトから配信しています。CDN 側の障害・提供終了・改ざんの影響を受けません。読み込むのは index.html と qrcode.min.js の 2 ファイルだけで、それ以外の通信は発生しません。

QR ができるまでの流れ

1. 入力を読む：テキスト欄の URL / 文字列、誤り訂正レベル、色、形などの設定を取得します。
2. UTF-8 で符号化：日本語などマルチバイト文字も正しく扱えるよう、ライブラリのバイト変換を UTF-8 に設定しています。
3. QR データを計算：qrcode-generator が文字列とエラー訂正レベルから、必要なバージョン（サイズ）とモジュール配置を決めます。
4. 描画する：計算結果をもとに、Canvas（プレビュー・PNG 用）と SVG（印刷用）にマス目を描きます。
5. 書き出す：PNG / SVG としてダウンロード、または画像としてクリップボードにコピーします。

描画の仕組み

2 通りの描き方

• Canvas：画面プレビューと PNG 書き出しに使用。表示は端末の解像度（devicePixelRatio）に合わせて鮮明に描画し、保存は 512 / 1024 / 2048px から選べます。
• SVG：印刷用。ベクター形式なので拡大しても劣化しません。マス目は矩形や円のパスとして出力します。

モジュールの形

四角・角丸・ドットの 3 種類を、マスごとに図形を描き分けて表現しています。角丸は角の丸め半径、ドットは円で描画します。

ファインダーパターン

QR の三隅にある大きな四角（位置検出パターン）は、読み取り精度に直結するため通常のマスとは分けて描いています。外側の枠を 1 モジュール幅の線で、内側を塗りつぶしで描くことで、形状を変えても検出されやすい形を保ちます。

中央ロゴ

画像を中央に重ねられます。ロゴの下は背景色で四角く抜くことができ、QR の読み取りへの影響を抑えます。ロゴを重ねる場合はエラー訂正レベル H（約 30% まで復元可能）を推奨しています。

入力内容の扱い

生成はすべてブラウザの中だけで完結します。入力した URL や文字列、選んだロゴ画像がサーバーに送信されることはありません。ページを開いた後はネットワーク接続が切れても動作します。

ホスティング構成

配信

Amazon S3（非公開バケット）+ CloudFront

暗号化

HTTPS（TLS 1.2 以上）

アクセス経路

S3 へは CloudFront（OAC）経由のみ。バケットは直接公開していません。

外部依存

なし（ライブラリも自サイトから配信）

ライセンスと帰属

このツールは qrcode-generator（Copyright (c) 2009 Kazuhiko Arase）を MIT ライセンスのもとで利用しています。当サイトはこのライブラリ（qrcode.min.js）を自ホストして再配布しているため、MIT ライセンスの条件に従い、著作権表示とライセンス本文を掲示しています。

• ライセンス全文：LICENSE-qrcode-generator.txt
• qrcode.min.js の先頭にも著作権表示とライセンス情報をコメントとして記載しています。

QR コード規格そのものはデンソーウェーブの登録商標「QRコード」に基づきますが、規格自体は公開されており、コードの生成・利用に制限はありません。