JavaScriptでQRコードを作成【jQuery】

JavaScriptでQRコードをサクッと作成してWebサイトに表示したい。

そんなときにすぐに使える「jQuery.qrcode.js」を紹介します。

QRコード内の日本語も文字化けしないように対策します。

jQuery.qrcode.jsの利用方法
設定のオプション

jQuery.qrcode.jsの利用方法

jQuery.qrcode.jsとは

簡単な手順でQRコードを生成し、SVGで表示してくれます。

■jquery-qrcode【GitHub】
https://github.com/jeromeetienne/jquery-qrcode

SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、読んで字のごとく、拡大縮小（スケーラブル）に対応したVector形式の画像フォーマットです。
Vector形式とは、画像やグラフィックスを描写するための数値情報まとめたもので、画面に表示する際にその数値情報を元に描写するため、拡大縮小してもぼやけたり潰れたりして画像が劣化することなく、大きな画像でもファイルサイズが軽くなるのが特徴です。
ちなみに、「ベクター形式、ベクタ形式、ベクトル形式」などと呼ばれますが全て同一です。

サイトに直接アップロードして利用する場合

jQueryとjQuery.qrcode.jsをダウンロードして任意の場所（※例としてjsフォルダ）にアップロードしましょう。

■jQueryダウンロードぺージ
https://jquery.com/download/

最新のJQueryを右クリック→「名前を付けてリンク先を保存」でダウンロードしましょう。

■jquery-qrcode【GitHub】
https://github.com/jeromeetienne/jquery-qrcode

「Clone or Download」をクリック→「Download ZIP」にてzipファイルをダウンロードします。

zipファイルを解凍し、「jquery-qrcode-master」フォルダ内にある「jquery.qrcode.min.js」を利用します。

「jquery-3.4.1.min.js」と「jquery.qrcode.min.js」をサーバーの「js」フォルダにアップロードすればjQuery.qrcode.jsを利用する準備は完了です。

以下がHTMLソースです。

<html>
<head>
<script src="js/jquery-3.4.1.min.js"></script> 
<script src="js/jquery.qrcode.min.js"></script> 
<script type="text/JavaScript"> 
    $(function(){
      var qrtext = "ここにQRコード化したいテキストを入力";
      var utf8qrtext = unescape(encodeURIComponent(qrtext));
      $("#img-qr").html("");
      $("#img-qr").qrcode({text:utf8qrtext}); 
    });
    </script>
</head>
<body>
<div id="img-qr"></div>
</body>
</html>

<html>

<head>

$(function(){

var qrtext = "ここにQRコード化したいテキストを入力";

var utf8qrtext = unescape(encodeURIComponent(qrtext));

$("#img-qr").html("");

$("#img-qr").qrcode({text:utf8qrtext});

});

</script>

</head>

<body>

</body>

</html>

CDNを利用する場合

CDNでも利用できますのでこちらの方が便利です。

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> 
<script type="text/JavaScript"> 
    $(function(){
      var qrtext = "ここにQRコード化したいテキストを入力";
      var utf8qrtext = unescape(encodeURIComponent(qrtext));
      $("#img-qr").html("");
      $("#img-qr").qrcode({text:utf8qrtext}); 
    });
    </script>
</head>
<body>
<div id="img-qr"></div>
</body>
</html>

<html>

<head>

$(function(){

var qrtext = "ここにQRコード化したいテキストを入力";

var utf8qrtext = unescape(encodeURIComponent(qrtext));

$("#img-qr").html("");

$("#img-qr").qrcode({text:utf8qrtext});

});

</script>

</head>

<body>

</body>

</html>

コードの解説

7行目でQRコード化するテキストを入力します。

8行目で日本語が文字化けしないように対策してあります。

それ以外は「jQuery.qrcode.js」を利用する際の基本的なコードです。

デモ

See the Pen
voVgyE by Ketsunosuke (@onoredekaiketsu)
on CodePen.

上のデモのQRコードを読み込んでも、日本語は文字化けせずにちゃんと表示されています。

設定のオプション

生成されるQRコードの大きさ（width、height）をピクセル単位で指定できます。

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> 
<script type="text/JavaScript"> 
    $(function(){
      var qrtext = "ここにQRコード化したいテキストを入力";
      var utf8qrtext = unescape(encodeURIComponent(qrtext));
      $("#img-qr").html("");
      $("#img-qr").qrcode({width:160,height:160,text:utf8qrtext}); 
    });
    </script>
</head>
<body>
<div id="img-qr"></div>
</body>
</html>