今回は 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>
... 後は割愛
コメント