【jQuery】自動でQRコードを生成する［jquery.qrcode.js］が便利だった！

本日ご紹介するのは自動でQRコードを出力するjQueryライブラリ［jquery.qrcode.js］です。

同じようにQRコードを出力する方法として、だいぶ以前に「Google Chart API を使用するテクニック」を紹介しましたが、その代替案として有力な選択肢の１つです。

「Google Chart API」→「QR Code Generator API」を使ってQRコードを生成する方法。

まずは公式サイトより［jquery.qrcode.js］本体をダウンロード。
下記GitHubから入手してきましょう。

https://github.com/jeromeetienne/jquery-qrcode

ダウンロードしたファイルはjQuery本体と共にHTMLの適当な箇所で読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="jquery.qrcode.min.js"></script>

続いてQRコードを出力するボックスを作ります。
ここでは仮に「id="qrcode"」と名付けます。

<div id="qrcode"></div>

この要素内にQRコードを出力するための［jquery.qrcode.js］の設定が以下。

<script>
jquery('#qrcode').qrcode({width: 64, height: 64, text: "information"});
</script>

オプションは「width」「height」「text」「render」の４種類。
このうち「text」の値は必須項目になります。

通常はcanvas要素でQRコードが出力されますが render : "table" を指定するとtable要素で描画されます。

実装したサンプルは下記サイトをご覧ください。

サンプル：https://on-ze.com/demo/jquery-qrcode.js/

こちらのサンプルサイトでは次のような設定にしています。

<script>
$('#qrcode').qrcode(location.href);
</script>

ここではlocation.hrefで現在のページのURLを取得させています。

かなり簡単に使えるプラグインなので、初心者の方でも難なく導入できるはずです。
ぜひお試しください。