【この記事を読むのに必要な時間は約 6 分です。】
QRコードを自分のブログやサイトに表示するjqueryプラグインを３つ紹介する。「jquery.qrcode.js」「ClassyQR」「jQuery.qrcode 0.7.0」だ。個人的にお勧めは「jQuery.qrcode 0.7.0」。
初回として、「jquery.qrcode.js」について説明する。
目次
＝＝各jqueryプラグインの特徴＝＝
jquery.qrcode.js
おそらく最も多く利用されているオーソドックスなjqueryプラグイン。
設置、利用とも簡単。ただし、日本語テキストは未対応。
canvasモードで描画を行うため、IEはIE9.0以降で対応。
デフォルトのサイズは256×256px。
QRコード生成ライブラリQR Code Generator（MIT License）。
ホームページ：http://jeromeetienne.github.io/jquery-qrcode/
GitHubダウンロードページ: https://github.com/jeromeetienne/jquery-qrcode
ClassyQR
設置、利用とも簡単。ただし、日本語テキストは未対応。
画像（png）ファイルを生成する。MIT License。
ホームページ：http://www.class.pm/
ダウンロードページ：http://www.class.pm/#projects
jQuery.qrcode 0.7.0
個人的にお勧め。カスタマイズ度が非常に高い。
設置、利用とも簡単。ただし、日本語テキストは未対応。
canvas/div/image(pngファイル)モードが用意されている。
QRコード生成ライブラリQR Code Generator（MIT License）。
ホームページ: http://larsjung.de/qrcode/
GitHubダウンロードページ: https://github.com/lrsjng/jQuery.qrcode
＝＝jquery.qrcode.jsの設置＝＝
ホームページ
こちらがjquery.qrcode.jsのページ。簡単な利用方法が解説されている。
ダウンロードとサーバーへのアップロード
GitHubのページから「Download ZIP」をクリックしてダウンロードする。
ダウンロードファイル：jquery-qrcode-master.zip
解凍後、必要ファイルjquery.qrcode.min.jsをサーバーへアップロードする。
必要ファイル：jquery.qrcode.min.js
設置方法
jQuery本体とjquery.qrcodeのjsファイルを呼び出す設定をする。
ヘッダー部分（<head>と</head>の間）に以下のように記載する。なお、jQuery本体はGoogle AJX APIのホスティングを利用している。
<!-- jquery本体 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- /jquery本体 -->
<!-- jquery.qrcode.js -->
<script type="text/javascript" src="http://（ファイルのアップロード先URLを記載する）jquery.qrcode.min.js"></script>
<!-- /jquery.qrcode.js -->利用方法とオプション
ヘッダー部分への記載
基本的なオプションはサイズ（width,height）のみ。
ヘッダー部分（<head>と</head>の間）に上記に続けて以下のように記載する。なお、セレクターとなるIDは自分のわかりやすいようにつければ良い。今回は、「#qcdemo1」「#qcdemo2」としている。
<!-- setting -->
<script type="text/javascript">
$(document).ready(function(){
$('#qcdemo1').qrcode("http://jump-up.info"); //demo1:そのままテキストを入れる、今回は当サイトのURL
$('#qcdemo2').qrcode({ //demo2:幅や高さを指定する場合
width:100, //QRコードの幅
height:100, //QRコードの高さ
text:'http://jump-up.info' //QRコードの内容
});
});
</script>
<!-- /setting -->ボディ部分への記載
上記セレクターで指定したIDでハイライト部分のように囲むだけだ。divタグの間には何も記載する必要はない。ボディ部分（<body>と</body>の間）に以下のように記載する。
<!-- 次のデモの部分をそのまま入れている -->
<h5>デモ1－デフォルト表示</h5>
<div id="qcdemo1"></div>
<br />
<h5>デモ2</h5>
<p>サイズを100px四方に変更した。</p>
<div id="qcdemo2"></div>デモ
実際に上記のとおりに設定して以下のように表示される。
デモ1－デフォルト表示
デモ2
サイズを100px四方に変更した。
「jquery.qrcode.js」プラグインの紹介はおしまい。
次回は、「ClassyQR」プラグインを紹介する。以上
