【この記事を読むのに必要な時間は約 8 分です。】
QRコードを自分のブログやサイトに表示するjqueryプラグインを3つ紹介する。「jquery.qrcode.js」「ClassyQR」「jQuery.qrcode 0.7.0」だ。個人的にお勧めは「jQuery.qrcode 0.7.0」。
3回目として、「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>
デモ
実際に上記のとおりに設定して以下のように表示される。
デモ1-デフォルト表示
デモ2-div形式表示
デモ3-canvas形式ラベル表示
デモ4-img形式ラベル表示
「jQuery.qrcode 0.7.0」プラグインの紹介はおしまい。
今回をあわせて都合3回にわたりQRコードを生成するjqueryプラグインを紹介した。以上