本日ご紹介するのは自動でQRコードを出力するjQueryライブラリ[jquery.qrcode.js]です。
同じようにQRコードを出力する方法として、だいぶ以前に「Google Chart API を使用するテクニック」を紹介しましたが、その代替案として有力な選択肢の1つです。
まずは公式サイトより[jquery.qrcode.js]本体をダウンロード。
下記GitHubから入手してきましょう。
ダウンロードしたファイルは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」の4種類。
このうち「text」の値は必須項目になります。
通常はcanvas要素でQRコードが出力されますが render : "table"
を指定するとtable要素で描画されます。
実装したサンプルは下記サイトをご覧ください。
こちらのサンプルサイトでは次のような設定にしています。
<script> $('#qrcode').qrcode(location.href); </script>
ここではlocation.href
で現在のページのURLを取得させています。
かなり簡単に使えるプラグインなので、初心者の方でも難なく導入できるはずです。
ぜひお試しください。