Javascriptで簡単にQRコードを生成できる「jquery.qrcode.js」

QRコードを簡単に生成できるjQueryプラグイン「jquery.qrcode.js」のを紹介します。

導入の仕方

ダウンロード

GitHubへアクセスして、Zipファイルをダウンロードしてください。
zipファイルを展開して、jquery.qrcode.min.jsをコピーして適当なディレクトリに配置します。

コード

まず、jquery本体とプラグインを読み込みます。

<!--jquery本体 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<!--プラグイン本体 -->
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

QRコードを表示したい場所にHTMLタグを埋め込みます。

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

QRコードを表示するスクリプトを記述します。
色など指定できるのですが、一番簡単な記述を紹介します。

jQuery('#qrcode').qrcode("http://program-memo.com/");

たったこれだけでQRコードを生成できます。

[btn class=”rich_pink”]デモ確認[/btn]

各種設定

とりあえず一番簡単な記述を紹介しましたが、QRコードのサイズや色を変えたいこともあると思うので、よく使いそうな各種設定も紹介します。

QRコードのサイズ

デフォルトでは256px×256pxのサイズで生成されます。
もっと小さくしたい場合や、大きくしたい場合は以下の引数を指定するとサイズ変更できます。

jQuery('#qrcode').qrcode({
    width:100,//横幅
    height:100,//高さ
    text: "http://program-memo.com/",
});

[btn class=”rich_pink”]デモ確認[/btn]

色変更

QRコードの背景色とQRコード自体の色を設定できます。
色は16進数で設定してください。

jQuery('#qrcode').qrcode({
    background:"#ffffff",//QRコードの背景色
    foreground: "#FF0000", //QRコードの色
    text: "http://program-memo.com/",
});

[btn class=”rich_pink”]デモ確認[/btn]