QRコードを自動で生成するjQueryプラグイン「jquery.qrcode.js」の使い方

Tweet

238

jQueryプラグイン「jquery.qrcode.js」でQRコードを表示させる

携帯電話やスマートフォン等のカメラ付き端末で、簡単に文字列を読み取ることが出来るQRコードをjQueryのプラグイン「jquery.qrcode.js」を使って表示させる方法です。

プラグインのダウンロードはgifhubより

STEP 1 jQueryとプラグインを読み込む

<!-- jQueryの読み込み -->
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<!-- qrcodeの読み込み -->
<script src="jquery.qrcode.min.js"></script>

まずは、HTMLファイルでjQueryとjQueryプラグインを読み込みます、それぞれのパスは環境に合わせて変更してください。

STEP 2 QRコードを表示したいタグを作っておく

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

QRコードを表示させたいところに、タグを作ってQRコードとわかるようにID、もしくはCLASSを付けておきます。このタグがimgタグに入れ替わるようなイメージをしてもらえればいいかと思います

STEP 3 QRコードの生成の指定

<script>

$(window).on("load",function(){
  $('#qrcode').qrcode("文字列を入れる");
});

</script>

単純には、これで完成です。オプションも指定可能で、サイズや古いIEにも対応させるのかどうか等の設定が出来ます。

オプション サイズ指定をする

$('#qrcode').qrcode({width: 64,height: 64,text: "文字列を入れる"});

widthに横幅、heightに高さを指定します、単位は不要です。textのところには文字列を入れます、ダブルクォーテーションは消してはいけません。

オプション 旧IEにも対応した table モード

$('#qrcode').qrcode({render : "table",text : "文字列を入れる"});

render で table を指定することでtableモードで実行します。通常はcanvasモードで実行されます。

プラスアルファ 現在表示中のページのURLで自動生成する

$('#qrcode').qrcode(location.href);

このようにすることで、javascriptで現在の表示中のページのURLを取得しますので生成されるQRコードは表示中のページのURLになります。jQueryを使っていますので、他にもtitleの取得なども手軽に行うことが出来ます。

Tweet

短縮URL:

2016年01月26日 WEB制作系 コード・プラグイン jQuery