QRコードの生成と埋め込み方法

Webアプリケーションに QRコードを追加する必要があります。決済フロー、共有可能なリンク、イベントチケットなど、用途はさまざまです。問題は QRコードを使うかどうかではなく、スキャンの問題やセキュリティ上の問題を引き起こすことなく、ブラウザ内で確実に生成する方法です。

本記事では、JavaScript によるクライアントサイドの QRコード生成について説明し、SVG と Canvas 出力をいつ使用すべきかを解説し、スキャンの信頼性に影響する実用的な制約について取り上げます。

QRコード生成とスキャンの理解

コードを書く前に、生成とスキャンという2つの別々の問題を区別してください。

生成は完全にあなたの制御下で行われます。JavaScript ライブラリを使用してデータを QRコード画像にエンコードします。これはすべての最新ブラウザで確実に動作します。

スキャンは異なります。QRコードを読み取るためのネイティブブラウザ API(Barcode Detection API など)は実験的なままであり、普遍的なサポートが不足しています。アプリケーションでスキャンが必要な場合は、フォールバックを計画してください—通常はカメラベースの JavaScript ライブラリまたは手動入力フィールドです。

本記事は生成に焦点を当てています。実装を計画する際に、この2つを混同しないでください。

JavaScript で QRコードを生成する方法

フロントエンド作業用の QRコード生成を処理する JavaScript ライブラリがいくつかあります。一般的な選択肢には、クライアントサイドとサーバーサイドの両方の生成をサポートする qrcode、軽量な純粋 JavaScript エンコーダーである qrcode-generator、そして古いながらも広く使用されている、シンプルな Canvas または DOM 出力用の QRCode.js があります。これらのどれも「標準」ではありません—それぞれバンドルサイズ、出力形式、カスタマイズオプションにトレードオフがあります。

一般的なパターンは次のようになります:

1. 選択したライブラリをインポートする
2. エンコードしたいデータ(URL、テキスト、vCard データ)を渡す
3. 出力形式と寸法を指定する
4. DOM 要素にレンダリングするか、データ URL として抽出する

ほとんどのライブラリは、エラー訂正レベル(L、M、Q、H)の設定を受け付けます。レベルが高いほど、コードがスキャン可能な状態を保ちながら損傷を受けられる範囲が広がります—ロゴをオーバーレイしたり、テクスチャのある表面に印刷したりする場合に便利です。

QRコード:SVG vs Canvas

Web に QRコードを埋め込む場合、通常は SVG、Canvas、PNG/データ URL の3つの出力形式から選択します。

SVG 出力

SVG は通常、Web 埋め込みに最適な選択肢です。ベクター形式は無限にスケールしてもピクセル化せず、レスポンシブレイアウトや印刷アプリケーションに理想的です。表示寸法に関係なくファイルサイズは小さいままです。CSS スタイリングも自然に機能します。

SVG を使用する場合:

• QRコードがさまざまなサイズで表示される
• 印刷品質が重要
• CSS ベースのスタイリングやアニメーションが必要

Canvas 出力

Canvas は特定の解像度でビットマップにレンダリングします。これは、ピクセルレベルの制御が必要な場合や、QRコードを他のグラフィックスとプログラマティックに合成する予定がある場合に適しています。

Canvas を使用する場合:

• ダウンロード用の画像を生成している
• ピクセルを直接操作する必要がある
• 他の Canvas ベースのグラフィックスと統合している

PNG/データ URL

データ URL を使用すると、QRコードを base64 エンコードされた画像文字列として埋め込むことができます。これにより追加の HTTP リクエストが不要になりますが、HTML ペイロードサイズが増加します。メールテンプレートや外部リソースが信頼できないコンテキストで便利です。

スキャンの信頼性に影響する実用的な制約

正しく見える QRコードでも、スキャンに失敗する可能性があります。次の問題に注意してください:

クワイエットゾーン: QRコードは境界線の周りに空白スペースが必要です—通常は4モジュール幅です。このマージンをトリミングするとスキャンが機能しなくなります。

コントラスト: 仕様では、明るい背景に暗いモジュールを想定しています。反転色や低コントラストの組み合わせは信頼性を低下させます。少なくとも 4:1 のコントラスト比を目指してください。

サイズ: スキャン可能な最小サイズは、視距離とカメラの品質に依存します。画面表示の場合、最新デバイスでは小さいサイズでも機能する可能性がありますが、結果は視距離とカメラの品質に依存します。印刷の場合は、予想されるスキャン距離に基づいて計算してください。

ロゴのオーバーレイと過度なスタイリング: 中央にロゴを追加することはエラー訂正を利用します—スキャナーはロゴを損傷として扱い、データを再構築します。これは高いエラー訂正レベル(Q または H)でのみ機能し、積極的なスタイリングは回復可能な限界を超える可能性があります。徹底的にテストしてください。

セキュリティと UX の考慮事項

URL をエンコードする QRコードはフィッシングの機会を生み出します。ユーザーはスキャンする前に宛先を検査できません。アプリケーションがユーザー入力から QRコードを生成する場合は、その入力を検証およびサニタイズしてください。コードと並べてエンコードされた URL を視覚的なテキストとして表示することを検討してください。

アクセシビリティのために、常にエンコードされた情報を代替形式で提供してください。QRコードの横に表示されるリンクは、スキャンできない、またはスキャンしないユーザーに役立ちます。

サーバーサイド生成

本記事はクライアントサイドのアプローチに焦点を当てていますが、サーバーサイド生成には正当な用途があります:クライアントバンドルサイズの削減、生成されたコードのキャッシュ、または JavaScript のない環境でのコード生成です。Node.js、Python、Go、およびその他のほとんどのバックエンド言語用のライブラリが存在します。出力形式の考慮事項は同じままです。

結論

QRコード生成の技術的な実装は簡単です。エンコードロジックをゼロから構築するのではなく、確立された JavaScript ライブラリを使用してください。スケーラブルな Web 埋め込みには SVG を、プログラマティックな画像操作には Canvas を選択してください。QRコードの信頼性は制約を尊重することから生まれます:クワイエットゾーンを維持し、適切なコントラストを確保し、実際のスキャンデバイスでテストしてください。アクセシビリティとセキュリティの両方の目的で、常に視覚的なフォールバックを提供してください。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.