QRコードを生成するjqueryプラグイン3選-その3「jQuery.qrcode 0.7.0」

【この記事を読むのに必要な時間は約 8 分です。】

QRコードを自分のブログやサイトに表示するjqueryプラグインを３つ紹介する。「jquery.qrcode.js」「ClassyQR」「jQuery.qrcode 0.7.0」だ。個人的にお勧めは「jQuery.qrcode 0.7.0」。
3回目として、「jQuery.qrcode 0.7.0」について説明する。

1 各jqueryプラグインの特徴
2 jQuery.qrcode 0.7.0の設置

各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 0.7.0の設置

ホームページ

こちらがjQuery.qrcode 0.7.0のホームページ。詳細な利用方法が解説されている。

ダウンロードとサーバーへのアップロード

ホームページの「0.7.0 DOWNLOAD」またはGitHubのページの「Download ZIP」をクリックしてダウンロードする。
ダウンロードファイル：jquery.qrcode-0.7.0.zip
解凍後、必要ファイルjquery.qrcode-0.7.0.min.jsをサーバーへアップロードする。
必要ファイル：jquery.qrcode-0.7.0.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.qrcode07 -->
<script type="text/javascript" src="http://（ファイルのアップロード先URLを記載する）jquery.qrcode-0.7.0.min.js"></script>
<!-- /jquery.qrcode07 -->

利用方法とオプション

ヘッダー部分への記載

オプションはサイズと色の変更、加えてラベル付けが可能。また角を丸くすることもできる。
ヘッダー部分（<head>と</head>の間）に上記に続けて以下のように記載する。なお、セレクターとなるIDは自分のわかりやすいようにつければ良い。今回は、「#07qrcode1」「#07qrcode2」「#07qrcode3」「#07qrcode4」としている。

<!-- setting -->
<script type="text/javascript">
$(document).ready(function(){   //デフォルト形式
    $('#07qrcode1').qrcode({
    text: 'http://jump-up.info'
    });

    $('#07qrcode2').qrcode({      //div形式はラベルを付けられない
	render: 'div',                //div指定（canvas,div,imgが指定できる）デフォルトはcanvas
	size: 200,                    //サイズ指定　デフォルトは200
	fill: '#33aa33',              //表示色指定
	background: '#ffffff',        //背景色指定
	text: 'http://jump-up.info'   //生成される内容
    });

    $('#07qrcode3').qrcode({      //canvas形式でラベルを付けてみた
	render: 'canvas',             //canvasはデフォルトなので指定しなくても良い
	size: 200,                    //サイズ指定　デフォルトは200
	fill: '#ff1493',              //表示色指定
	background: '#66cdaa',        //背景色指定
	text: 'http://jump-up.info',  //生成される内容
	mode: 1,                      //0,1,2,3,4でデザインモードが指定できる
	label:'JUMP-UP.INFO',         //ラベルを付けることが可能
	fontname: 'ubuntu',           //ラベルのフォント
	fontcolor: '#ffa500',         //ラベルの色
    });

    $('#07qrcode4').qrcode({      //img形式でラベルを付けてみた
	render: 'image',              //img指定（canvas,div,imgが指定できる）デフォルトはcanvas
	size: 150,                    //サイズ指定　デフォルトは200
	fill: '#ff1493',              //表示色指定
	background: '#66cdaa',        //背景色指定
	text: 'http://jump-up.info',  //生成される内容
	mode: 1,                      //0,1,2,3,4でデザインモードが指定できる
	label:'JUMP-UP.INFO',         //ラベルを付けることが可能
	fontname: 'ubuntu',           //ラベルのフォント
	fontcolor: '#ffa500',         //ラベルの色
	radius: 0.5                   //角を丸くできる（0.0～0.5）
    });
});
</script>
<!-- /setting -->

ボディ部分への記載

上記セレクターで指定したIDでハイライト部分のように囲むだけだ。divタグの間には何も記載する必要はない。ボディ部分（<body>と</body>の間）に以下のように記載する。

<!-- 次のデモの部分をそのまま入れている -->
<h5>デモ1－デフォルト表示</h5>
<div id="07qrcode1"></div>
<h5>デモ2－div形式表示</h5>
<div id="07qrcode2"></div>
<h5>デモ3－canvas形式ラベル表示</h5>
<div id="07qrcode3"></div>
<h5>デモ4－img形式ラベル表示</h5>
<div id="07qrcode4"></div>