jQueryを使いQRコードをページのURL毎に生成して表示する方法

サイトのURLに合わせて自動でQRコードを生成することができると、ページ毎に作成することなく楽です。ということで、ページ毎にQRコードを生成する方法について書きます。

QRコードをページ毎に自動で生成する方法

QRコードを生成するのにjqeury-qrcodeを使用します。
ダウンロード：jquery-qrcode

解凍するとフォルダの中に「jquery.qrcode.min.js」ファイルがあるので使用するサイトの適当フォルダ（jsフォルダ等）に配置します。

htmlの中にheadタグ内に以下のjQueryとjquery-qrcodeを読込むスクリプトタグを設定します。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.qrcode.min.js"></script>

※jquery-qrcodeのsrcの設定は、サイト構造が階層になるときでも有効な絶対パスを使うと良いです。

QRコードを生成するために下のコードをhtmlのheadタグの中に記述します。widthやheightの値は表示したい大きさに合わせて変更してください。

<script>
$(function() {
	$('#qrcode').qrcode({width:100, height:100, text:location.href});
});
</script>

生成されたQRコードをサイトで表示するために、bodyタグの中でQRコードを表示したい箇所に下のdivタグを追加します。

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

これでQRコードがページ毎に表示されるようになります。