ブラウザ上で簡単にQRコードを生成できるjQueryプラグイン”jquery.qrcode.js”│株式会社シーポイントラボ

QRコードをWebサイトなどで動的に生成して表示したい場合に、実現する方法としてはいろいろありますが、今回はバックエンド側でめんどくさい処理を書くことなく、フロントエンド(Webブラウザ側)でURLをサクッとQRコード化したいときに使えるjQueryプラグインをご紹介したいと思います。

このプラグインを使用すると、ルールに従って2,3行追加するだけで、ページ上の好きな部分にQRコードを挿入してくれます。

なお、jQueryプラグインなので単体では動かず、プラグインを読み込む前にjQuery本体を読み込んでおく必要があります。

jQuery本体の入手方法や使い方についてはこちらのサイトを参考にしてください。

まず、jquery.qrcode.jsを使用するための準備を行います。

GitHubからjquery.qrcode.jsのzipファイルを取得します。

ダウンロード後、解凍して出てきたフォルダの中に

jquery.qrcode.min.js

というファイルがあるかと思いますので、これをQRコードを表示したいページで呼び出されるように指定します。

例えば、

ドキュメントルート/path/to/js

にjQuery本体とjquery.qrcode.min.jsを格納する場合、headタグ内か、ファイル末尾のいずれかに

<script src="/path/to/js/jquery.min.js"></script>
<script src="/path/to/js/jquery.qrcode.min.js"></script>

のように指定します。

この際、先にも書いたように先にjquery本体が必ず読み込まれるようにします。

準備はこれで完了です。

次に、QRコードを表示したい場所に次のようなタグを置きます。

<div id="qrimg"></div>

そして、先程入れたjquery.qrcode.min.jsの記述以下に<script>タグを置き、次のように記述します。

<script>
    $('#qrimg').qrcode("QRコードの内容");
</script>

これだけで、先程指定したid=”qrimg”が入ったタグがある部分に、生成されたQRコードが表示されるようになります。

なお、上記の書き方ではQRコードの大きさなどがデフォルト値になってしまいますが、

<script>
    $('#qrimg').qrcode({width: 64,height: 64,text: "QRコードの内容"});
</script>

とすることで、横と縦の大きさを指定することも可能です。

また、テキストの部分を変数にすることで、動的にQRコードを作成することも可能となっています。

QRコードをサクッと実装したい、という方は是非試してみてください。

ブラウザ上で簡単にQRコードを生成できるjQueryプラグイン”jquery.qrcode.js”