【jQuery】QRコードが簡単に生成できるjquery.qrcode.jsの使い方を解説

どうも、ジョージです。

今日は、jQueryでQRコードを簡単に生成することができるプラグイン

jquery.qrcode.jsのご紹介です。

jquery.qrcode.jsの準備

ファイルをダウンロードして利用する

早速準備していきましょう。

まずは、jQueryをダウンロードして読み込ませます。

jQuery公式サイト

<script src="js/jquery-3.4.1.min.js"></script>

上の記述はjsフォルダにjQueryファイルが入っているという記述です。

次にjquery.qrcodeの公式Githubから

ファイルをダウンロードしjsファイルを読み込ませます。

jquery.qrcodeの公式Github

読み込ませるファイルはjquery.qrcode.min.jsです。

先ほどのjQueryの下に記述します。

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery.qrcode.min.js"></script>

こちらも先ほどのjQueryと同様に

jsフォルダにjquery.qrcode.min.jsが入っているという記述です。

次にjQueryを記述していきます。

先ほどのjQueryとjquery.qrcode.jsの下に記述します。

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery.qrcode.min.js"></script>
<script>
jquery('#qrcode').qrcode("https://georgeweblog.com/");
</script>

この記述の場合、https://georgeweblog.com/のQRコードが生成されます。

次にHTMLを記述していきます。

bodyタグの中にこちらを記述してください。

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

HTMLはこれだけです。

このid=”qrcode”がある箇所にQRコードが生成されます。

以上の記述でQRコードを生成することができます。

全ての記述を一つのhtmlファイルにまとめるとこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>QRコード生成</title>
</head>
<body>
    <div id="qrcode"></div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/jquery.qrcode.min.js"></script>
    <script>
    $('#qrcode').qrcode("https://georgeweblog.com/");
    </script>
</body>
</html>

このソースコードの

サンプルサイトはこちらです。

QRコードは生成されてますでしょうか？

表示されていれば成功です。

jquery.qrcode.jsのオプション

jquery.qrcode.jsには設定を変更できるオプションも用意されています。

オプションは以下のものなどがあります。

$(function(){
    $('#qrcode').qrcode({
	width: 64, //QRコードの横の長さ
	height: 64,　//QRコードの縦の長さ
	text: "information",　//QRコードで表示するテキスト
	render : "table",　//QRコードを表示する要素
	background : "#fff", //背景色
	foreground : "#000" //線の色
    });
});

今まではページが読み込まれるとすぐにQRコードが生成されていましたが

毎回、ファイルを開いて任意のテキストを書き換えてブラウザで開くのは面倒なので入力した任意のテキストでQRコードを生成できるようにしてみます。

まず、HTMLは以下の通りです。

<input id="text" value="" placeholder="https://www.">
<button onclick="createQRcode();">QRコードを生成する</button>
<div id="qrcode">ここにQRコードが生成されます。</div>

テキストを入力する必要があるので、inputタグでQRコードを生成したい文字列の入力欄を作っています。

次にQRコードを生成するためにbuttonタグをonclickするとcreateQRcode()が呼び出されるようになっています。createQRcode()の内容はこの後記述します。

最後に、QRコードが生成される箇所が、id=”qrcode”がついているdivタグの所になります。

次にjQueryを記述します。

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery.qrcode.min.js"></script>
<script>
function createQRcode(){
    var qrtext = $('#text').val();
	$(function(){
        $('#qrcode').qrcode({
            text: qrtext,
            width: 200,
            height: 200,
            background : "#fff",
            foreground : "#000",
        });
    });
	$('#qrcode').html('<div></div>');
};
</script>

HTMLの記述にあったcreateQRcode()を作っています。

inputタグのvalueの値をqrtextとしてオプションのtextに入れています。

ただ、それだけだとボタンをクリックする度にQRコードが生成されてしまうので最後にdivタグを追加しています。

この記述を元にしたサンプルサイトはこちらになります。