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

Ads by Google

QR code - QRコード

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

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

「Google Chart 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」の4種類。
このうち「text」の値は必須項目になります。

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

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

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

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

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

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

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です