JavaScript jQueryでQRコードを表示する方法｜VB.NET-TIPS などプログラミングについて

2020/08/20

今回は QRコード を画面上に表示する方法について説明します。

QRコード と言えばトヨタ自動車系列の会社である株式会社デンソー（現在はデンソーウェーブ）が開発したマトリックス型の二次元コードです。このコードの中にはASCII（半角英数）で最大4296文字まで入るため、各種の情報を埋め込むことができます。
デンソーは敢えて普及のため QRコード の特許をオープンし特許権を行使していないため、自由に使用できます。

最近は非常に普及が進み、現在はスマホのカメラアプリにも QRコード の読み取りが標準で装備されていて、いろんなシーンで利用されています。テレビ画面にもスマホのためのURLが QRコード で表示され、このコードを見ない日が無いぐらいです。

さてこの QRコード をブラウザの画面上に表示する方法について話を戻します。

先ずはプログラムが必要無く HTML の IMG タグに直接指定する方法について説明します。
Google Chart Tools を使うのですが、チャートのタイプとして QRコード を指定し、コードの中身のテキスト文字列を指定するだけで QRコード の画像が表示されます。

■Google Chart Tools を使い QRコードを表示するHTMLファイル

<html>
<head>
<meta charset="utf-8">
<title>test qr code</title>
</head>
<body>
<img src="https://chart.apis.google.com/chart?cht=qr&chs=250x250&chl=this is test">
</body>
</html>

上記の QRコード の部分を実際に表示すると以下の様になります。

Google Chart Tools への URL は「https://chart.apis.google.com/chart?」でその後ろに生成する QRコード の情報を指定します。

<パラメータの指定方法>
cht=qr          : QRコードを指定（必須）
chs=<width>x<height>: QRコードのサイズを指定。width,height 共に同じ値（必須）
chl=<data>       : コードの中身のテキスト文字列（必須）
choe=<encoding>  : データをQRコードにエンコードする方法。 利用可能な値は次のとおりです。
			・UTF-8 [デフォルト]
			・Shift_JIS
			・ISO-8859-1
chld=<error_correction_level>|<margin>  :
			error_correction_level : 誤り訂正レベル
			・L-[デフォルト]最大7％の誤り訂正
			・M-最大15％の誤り訂正
			・Q-最大25％の誤り訂正
			・H-最大30％の誤り訂正
			margin : QRコードの周りの白い幅でピクセル値では無い([デフォルト:4])

このAPIにより返される画像データ形式は「PNG」の様です。「PNG」が表示できないブラウザでは QRコード が表示されませんので注意して下さい。（現状ではそんなブラウザは無いと思いますが）

なお、このAPIのGoogle の正式ページは以下の通りです。
⇒https://developers.google.com/chart/infographics/docs/qr_codes

このページの先頭には以下の注意書きがあります。

Warning: This API is deprecated. 
         Please use the actively maintained Google Charts API instead.
         See our deprecation policy for details.

「このAPIは非推奨になっています。代わりにGoogle Charts APIを使用してください。」とありますので、いつ使えなくなっても仕方ありません。現状では「Google Charts API」を見ても QRコード の項目は見当たらないので、代替の方法を考えなければと思います。

と言うことで、以下は QRコード用jQuery ライブラリを使った方法について説明します。
ここでは qrcode.js ライブラリを使用します。

■ qrcode.js ライブラリのダウンロード

qrcode.js ライブラリのダウンロードは以下のページから行えます。

⇒https://github.com/jeromeetienne/jquery-qrcode

ページ右上の「↓Code」ボタンをクリックしてさらに「Download ZIP」をクリックします。
ZIPファイルのダウンロードが始まりますので適当なフォルダを設定してダウンロードさせます。
ZIPファイルを解凍し「jquery.qrcode.min.js」をHTMLから参照できるところにコピーします。（今回のテストではHTMLファイルと同じフォルダにしました。）

■ qrcode.js ライブラリの使用例

以下に qrcode.js ライブラリの使用例を示します。

HTMLファイルと同じディレクトリに「jquery.qrcode.min.js」を設置しヘッダーで読込みます。
qrcode.js が QRコード を画像展開する「DIVタグ」を宣言します。
javascript ではファイルロード直後に「DIVタグ」に対して QRコード を展開するコードを記述します。

<html>
<head>
<meta charset="utf-8">
<title>test qrcode</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="./jquery.qrcode.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#qrcode').qrcode({
        render: "canvas",
        width : 150,
        height: 150,
        text: "this is test."
    });
});
</script>
</head>
<body>
<div id="qrcode"></div>
</body>
</html>

<qrcode のパラメータオブジェクトの指定方法>
render : 生成方法の指定「"canvas","table"のみ」（オプションでデフォルト:"canvas"）
width  : QRコードのサイズ幅を指定。
height : QRコードのサイズ高さを指定。
text   : コードの中身のテキスト文字列（必須）

上のソースの QRコード の部分をブラウザのウエブ開発などでのぞいてみると、 canvas 指定の場合には「DIVタグ」の中身に以下のHTMLが生成され、画像データが存在します。

<canvas width="150" height="150"></canvas>

また table 指定の場合には「DIVタグ」の中身に以下の様なHTMLが生成され、「tdタグ」の背景色で黒白のドットを生成している様です。

<table style="width: 150px; height: 150px; border: 0px none; border-collapse: collapse;
				 background-color: rgb(255, 255, 255);">
<tbody>
<tr style="height: 6px;">
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
</tr>
    <tr style="height: 6px;">
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>
    <td style="width: 6px; background-color: rgb(255, 255, 255);"></td>
    <td style="width: 6px; background-color: rgb(0, 0, 0);"></td>

... 後は割愛

JavaScript
0CM

コメントを書く

■Google Chart Tools を使い QRコード を表示するHTMLファイル

■ qrcode.js ライブラリのダウンロード

■ qrcode.js ライブラリの使用例

コメント

■Google Chart Tools を使い QRコードを表示するHTMLファイル