サイトにQRコードを動的に埋め込む方法をご紹介します。



無料でQRコードを自動生成してくれるサイト（サイト: QR Code Generator）があるのでそちらを利用させていただきます。URLが常に固定で動的に変える必要がないということであれば、同サイト内で埋め込みコード生成ツールがあるので是非そちらを利用してみてください。

今回紹介するのは、ブログのフッタやメニューなどに一律表示しておいて、ページが遷移するたびにQRコード自体が動的に"現在表示されているページ"のURLに切り替わるようにしたいときに使えるコードです。ちょうどこのブログ（PC版）の右上に表示してあるQRコードのような動きになります。TOPページを表示しているときはTOPの、記事ページを表示しているときは記事ページのQRコードに変化します。

JavaScriptを使ったURL埋め込み

さっそくQR Code Generatorで公開されているAPIを利用して、現在のURLをJavaScriptで埋め込んでみましょう。

location.href

が今回のポイント。
ここで ”現在表示されているページ” のURLを取得しQR Code Generatorのパラメーターに動的に渡します。

<script type="text/javascript">
  var url = '';
  url += 'https://api.qrserver.com/v1/create-qr-code/?data=';
  url += encodeURIComponent(location.href);
  // 背景の色
  url += '&bgcolor=FFFFFF';
  // バーコードの色
  url += '&color=000000';
  // 余白
  url += '&qzone=0'; 
  // こっちも余白
  url += '&margin=0';
  // エラー訂正レベル
  url += '&ecc=L';
  // サイズ
  url += '&size=150x150';
  document.write('<img src=\"' + url + '\" />');
</script>

基本的にはこれをこのまま貼り付ければ使えます。みなさんのサイトやブログに合わせてカスタマイズできるのはピンクの文字の部分です。bgcolor から size までの行はデフォルト値でよければ、行ごと削除しちゃってもOKです。

各オプションパラメータの説明

■ bgcolor と color
それぞれバーコードの背景色とバーコード自体の色です。
※ デフォルト値は、背景＝白、バーコード＝黒

■ margineもqzone
どっちも余白です。margineはpixelでの指定で、qzoneは0〜10までの段階で指定するようです。
※ デフォルト値はいずれも0

■ ecc
エラー訂正レベルを指定します。ECC（=Error Collection Code）といってQRコードには汚れたり欠損したりしたときに、誤りを自己修復するしくみが備わってます。ここに指定するレベルを高くすると修復能力は向上しますが、データ量が増えコードは複雑化します。

（レベル低）L → M → Q → H（レベル高）

の4段階で指定します。汚れが多い工場なんかではQやHで運用することが多いようですが、ネットの場合汚れたりはしないので、僕は最低レベルの ”L” で使ってます。
※ デフォルトはL

■ size
バーコードの画像サイズを指定します。
※ デフォルトは 250 x 250