jQueryでのQRコード生成方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでのQRコード生成方法について、簡単に解説していきます。

プラグイン読み込み

jQueryにはjquery.qrcode.jsというプラグインがあります。

これを使うことで、簡単にQRコードを生成することができます。

<script src="https://cdn.jsdelivr.net/npm/jquery.qrcode@1.0.3/jquery.qrcode.min.js"></script>

まず、上記のように、scriptタグでプラグインのjsファイルを読み込みます。

HTML

HTMLのサンプルを以下に示します。

<div id="qr_code"></div>

QRコード表示用の要素を用意するだけです。

今回の場合、qr_codeというidのdiv要素を配置します。

jQuery

jQueryのサンプルを以下に示します。

$('#qr_code').qrcode("https://google.com/");

上記のようにQRコード表示用の要素に対して、qrcodeメソッドを実行します。

qrcodeメソッドは、引数に指定した文字列からQRコードを生成し、QRコード表示用の要素に表示させます。