【この記事を読むのに必要な時間は約 6 分です。】
QRコードを自分のブログやサイトに表示するjqueryプラグインを3つ紹介する。「jquery.qrcode.js」「ClassyQR」「jQuery.qrcode 0.7.0」だ。個人的にお勧めは「jQuery.qrcode 0.7.0」。
2回目として、「ClassyQR」について説明する。
目次
各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
ClassyQRの設置
ホームページ
こちらがclassyQRを提供してくれている方のホームページ。
ダウンロードとサーバーへのアップロード
作者が提供してくれているjqueryプラグインページにClassyQRも掲載されているので、ClassyQRの「Download」をクリックしてダウンロードする。
ダウンロードファイル:jquery-classyqr.zip
解凍後、必要ファイルjquery.classyqr.min.jsをサーバーへアップロードする。
必要ファイル:jquery.classyqr.min.js
設置方法
jQuery本体とClassyQRの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本体 -->
<!-- ClassyQR -->
<script type="text/javascript" src="http://(ファイルのアップロード先URLを記載する)jquery.classyqr.min.js"></script>
<!-- /ClassyQR -->
利用方法とオプション
ヘッダー部分への記載
imageタグとdivタグを利用するパターンがある。特にdivタグを利用する場合、create: 'true'
が必須なので注意が必要。
オプションはサイズ(size)エンコード(encoding)の他、記載内容の種類別に用意されている。
ヘッダー部分(<head>と</head>の間)に上記に続けて以下のように記載する。なお、セレクターとなるIDは自分のわかりやすいようにつければ良い。今回は、「#classy1」「#classy2」としている。
<!-- setting -->
<script type="text/javascript">
$(document).ready(function() {
$("#classy1").ClassyQR({
type: 'text', //デフォルト
text: 'welcome to my site', //内容は自由(日本語日対応)
});
$("#classy2").ClassyQR({
size: 100, //サイズを100に(デフォルトは230)
create: 'true', //divタグの場合必須
type: 'url', //タイプの指定(text/url/sms/email/call/location/wifi/contact,デフォルトはtext)
url: 'http://jump-up.info',
});
});
</script>
<!-- /setting -->
ボディ部分への記載
上記セレクターで指定したIDでハイライト部分のように囲むだけだ。divタグの場合とimgタグの場を示している。ボディ部分(<body>と</body>の間)に以下のように記載する。
<!-- 下のデモの部分をそのまま表示している -->
<h5>デモ1-imgタグを利用/デフォルト表示</h5>
<img src="#" id="classy1" alt="" />
<h5>デモ2-divタグを利用/サイズ変更</h5>
<p>サイズを100px四方に変更した。</p>
<div id="classy2"></div>
デモ
実際に上記のとおりに設定して以下のように表示される。
デモ1-imgタグを利用/デフォルト表示
デモ2-divタグを利用/サイズ変更
サイズを100px四方に変更した。
「ClassyQR」プラグインの紹介はおしまい。
次回は、「jquery.qrcode 0.7.0」プラグインを紹介する。以上