QRコードをブラウザ内で作成・画像から読み取る
入力をサーバーへ送信せず、QRコード生成と画像読取を同じページで確認できます。
QRコード画像を読み取る結論：元画像を直接読み込み、結果をRaw文字列で確認してから利用する
PNG、JPEG、WebP、GIF、BMPを選択、Drop、Clipboard貼り付けし、QRコードを解析できます。画像は端末内で処理されます。
現行ツールはCamera Streamを直接読み取りません。カメラで撮る場合は端末のCameraで画像を保存してから読み込みます。
生成できたこと、画像から読めたこと、安全に利用できることは、それぞれ分けて確認してください。
画像のDecodeとQRのDecodeを段階的に確認する
Browserが画像をPixelへ展開し、BarcodeDetectorを試し、必要なら同梱jsQRへImageDataを渡します。透明背景は白で合成し、白黒反転も試します。
HEICは直接対象ではありません。iPhone写真がHEICで読めない場合は画像変換ツールでPNGまたはJPEGへ変換してから再試行します。
| 確認対象 | 確認方法 | 判断 |
|---|---|---|
| File | 対応拡張子・MIME | PNG/JPEG/WebP/GIF/BMP |
| Image | QR全体と余白 | 切れていない |
| Result | Raw Text | 元Data一致 |
| URL | Domain・Scheme | 自動Openしない |
QRコード作成・読み取りツールで確認する手順
- QRコード画像を選択、Drop、またはClipboardから貼り付けます。
- 自動解析または「QRコードを読み取る」を実行します。
- 読み取り結果をRaw文字列として確認し、必要ならCopyします。
- URLの場合はURL解析ツールでDomain・Path・Queryを確認します。
読み取った文字列はHTMLとして実行せず、URLも自動で開かない設計です。
画像読取で確認する順序
| 症状 | 最初の確認 | 次の対応 |
|---|---|---|
| 画像を選べない | 形式 | PNG/JPEGへ変換 |
| 検出なし | 余白・Size | 元画像で再試行 |
| 文字が違う | Raw文字列 | 元データ・Encoding確認 |
| URLが怪しい | Domain・Query | URL解析 |
Version・セル・余白・誤り訂正を分けて考える
| 要素 | 意味 | 実務上の確認 |
|---|---|---|
| Version | 1～40。Version 1は21×21、Version 40は177×177セル | データ量・文字種・誤り訂正に応じて必要Versionが変わる |
| セル | QRコードを構成する黒白の最小単位 | 画像化・印刷後も各セルが均一に判別できるか |
| Quiet Zone | QRコード周囲の何も置かない領域 | 四辺に4セル幅以上を確保する |
| 誤り訂正 | 汚れ・欠損からデータを復元するL・M・Q・Hの段階 | 上げるほど万能ではなく、データ量・密度とのTrade-offになる |
QRコードの最大文字数を一つの数値で決めつけません。格納量はVersion、数字・英数字・Byte・漢字等のデータ種別、誤り訂正レベルで変わります。同じ物理サイズへ多くのデータを入れるほどセルが細かくなり、読取条件は厳しくなります。
公開前・配布前に行う読取テスト
- 生成したPNGまたはSVGを現行ツールの画像読取へ戻し、元データと一致するか確認する
- 同じLibraryだけでなく、実際に利用するスマートフォンやReaderでも確認する
- Web表示、Screenshot、印刷物を用途どおりのサイズと距離で確認する
- 四辺のQuiet Zone、背景とのContrast、ぼやけ、セルの歪み、Logoや文字の重なりを確認する
- 日本語・絵文字・URLの%・+・&・改行・末尾Spaceを含む場合はRaw結果を比較する
同じツールで読めたことは有用な自己テストですが、すべての端末・カメラ・印刷条件で読める保証ではありません。利用環境が決まっている場合は、その環境での回帰テストを完成条件に含めます。
読み取り成功とURLの安全性は別に確認する
Readerの役割は画像のQRコードから文字列を復号するところまでです。https://で始まる文字列でも、正規サイト、到達可能、安全、フィッシングではない、という判定にはなりません。短縮URL、似た文字のDomain、意図しないQuery、javascript:やdata:等のSchemeへ注意します。
- 読取結果をRaw文字列のまま確認し、勝手にTrim・Normalizeしない
- URLを自動で開かず、Domain・Path・Queryを確認してから利用者が明示操作する
- Wi-Fi Password、認証情報、個人情報は読取可能な平文として扱う
- QR内容をAnalytics、Log、外部APIへ送らない
現行のQRコード作成・読み取りツールで確認できる範囲
| 項目 | 現行ツールの対応 |
|---|---|
| 生成内容 | テキスト、URL、Wi-Fi、メール、電話番号、SMS |
| 生成設定 | 誤り訂正L・M・Q・H、128～2048px、4～16セル余白、前景色・背景色 |
| 生成結果 | 自動選択されたVersion・セル数・UTF-8バイト数、PNG・SVG保存、PNG画像コピー |
| 画像読取 | PNG、JPEG、WebP、GIF、BMPの選択・ドロップ・Clipboard貼り付け |
| 読取結果 | 復号したRaw文字列の表示とコピー。リンクの自動Openはしない |
| 未対応 | カメラ直接読取、Camera選択、Logo合成、Version固定、HEIC直接読取、URL安全性判定 |
生成・画像解析・Copy・Downloadはブラウザ内で処理し、入力文字列と画像をDevelopToolsのサーバーへ送信しません。読み取れたURLが安全であることは保証しないため、文字列を確認してから別途URL解析などを行ってください。
一次情報とブラウザ仕様を確認する
- DENSO WAVE：QRコードの情報量とVersion
- DENSO WAVE：誤り訂正機能
- DENSO WAVE：コード領域を決めるポイント
- MDN：MediaDevices.getUserMedia()
- jsQR公式Repository
QRコードのVersion・Quiet Zone・誤り訂正はDENSO WAVE等の一次資料、Camera PermissionとSecure ContextはWeb仕様・MDN、Library APIは使用Versionの公式Documentationを優先します。記事例と現行ツール実装を混同しません。
具体例：メール添付のScreenshotをPCで読む
QR全体と周囲の余白が残るようにScreenshotを保存し、画像読取へDropします。
URLを勝手に開かず、文字列を確認してから必要な操作を選べます。
- 元画像保存
- Drop
- Raw結果確認
- URL構造確認
Screenshotを再圧縮したSNS画像ではセル境界がぼやける場合があります。可能なら元画像を使用します。
よくある質問
- QRコードには余白が必要ですか？
- はい。QRコードの四辺には4セル幅のQuiet Zoneを確保します。文字、枠、画像、背景模様を近づけると読み取りに影響する可能性があります。
- 誤り訂正レベルはHにすれば最も読みやすくなりますか？
- 必ずしもそうではありません。復元能力は上がりますが誤り訂正データも増え、同じ大きさではセルが細かくなる可能性があります。用途、汚れ、データ量、サイズを合わせて選びます。
- 読み取れたURLは安全ですか？
- 読み取り成功は安全性の判定ではありません。Domain、Path、Query、Schemeを確認し、必要ならURL解析ツールで分解してから開いてください。