上野家のホームページ - 資料室 : 開発/Barcode/QRコード/javascriptでQRコードを作成javascriptでQRコードを作成

[ 新規 | 一覧 | 検索 | 最新 | ヘルプ ]

[ 凍結 | 差分 | バックアップ | リロード ]

[ コメント(0) ]

ページ内コンテンツ

javascriptでQRコードを作成
jquery.qrcode
bwip-js
- ダウンロードとインストール
- オンラインBarcode API

javascriptでQRコードを作成

WEBページでQRコードを出力したい時なんかで使用できる，javascriptライブラリ。

jquery.qrcode

jquery.qrcodeというjqueryのプラグインとして動作するライブラリがある。javascriptと言うことで，WEBブラウザでQRコードを作成する。

残念ながら，Micro QR Codeには対応していない。

日本語テキストは未対応
canvasモードで描画を行うため，IEだとIE9.0以降が必要
デフォルトのサイズは256x256px

jquery.qrcodeのダウンロード

公式サイトから，jquery.qrcode.jsをダウンロードする。

ダウンロードしたファイルを，jQuery本体と共に，HTTPでアクセスできる適当なディレクトリに入れておく。

jquery.qrcodeの使い方

サンプルtest.html

<html>
<head>
    <title>QR Code作成</title>
    <script src='jquery-3.3.1.min.js'></script>
    <script src='jquery.qrcode.min.js'></script>
</head>
<body>
<div id="qrcode"></div>
 
<script>
    jQuery('#qrcode').qrcode({
        width:80,
        height:80,
        text: "https://yueno.net",
    });
</script>
 
</body>
</html>

まず，ライブラリを読み込むようにする。

<script src='jquery-3.3.1.min.js'></script>
<script src='jquery.qrcode.min.js'></script>

続いて，QRコードを出力する場所を作る。ここでは「id="qrcode"」とする。

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

実際にQRコードを出力するためのコードは

<script>
    jquery('#qrcode').qrcode({width: 80, height: 80, text: "https://yueno.net"});
</script>

にすれば良い。オプションは，width，height，text，renderの4種類がある。
このうち，textはQR Codeにエンコードする文字列で，必須。

通常はcanvas要素でQR Codeを出力するが，render : "table" を指定すると，table要素に出力できる。

色を指定する場合は，

jQuery('#qrcode').qrcode({
    background:"#ffffff",                // QRコードの背景色
    foreground: "#FF0000",               // QRコードの色
    text: "https://yueno.net",
});

のように指定します。

問題点

QR Codeには4cellのマージンが必要になりますが，jquery.qrcodeではこのマージンが付かない。
このため，WEBページの背景色によっては作成されたQRコード読めない場合も出てくる。

問題点の対策

しょうがないので，jquery.qrcodeを修正して4cellのマージンを出力するようにした。

上下左右に4セルずつ表示ブロックを拡大
余白エリアはBackGroundで塗りつぶし
黒 or 白の塗りつぶし開始は5セル目から

これで，マージンが出力される。

修正したjquery.qrcode：jquery-qrcode-master改.zip

bwip-js

bwip-jsは，PostScriptのBarcode WriterのJavaScriptバインディング版。WEBブラウザやJavaScriptベースのサーバーフレームワークで実行出来るようになっている。

驚くのは，90種類以上のバーコードタイプに対応していること。一般的に使用されているすべてのバーコードや2次元バーコードに対応しています。

素晴らしいことに，ちゃんとMicro QRコードにも対応しています。

ダウンロードとインストール

このライブラリは，

https://github.com/metafloor/bwip-js

もしくは，

npm install bwip-js

でダウンロードまたはインストール出来ます。

node.jsで使用すると，通常のコマンドのように使用することが出来る。

> bwip-js --bcid=microqrcode --width=12 --height=12 --text=YBL11L6210000G YBL11L6210000G.png

オンラインBarcode API

WEB APIとしてもサービスされています。

API使用は，ここのOnline-Barcode-APIで参照できます。

以下のようにしてこのAPIにアクセスして，QRコード画像を取得することが出来ます。

使用例：

https://bwipjs-api.metafloor.com/?bcid=microqrcode&text=123456789&scale=1
https://bwipjs-api.metafloor.com/?bcid=qrcode&text=123456789&scale=1,style=width:120px;height:120px;,iestyle=width:120px;height:120px;

添付ファイル:

jquery-qrcode-master改.zip 1件 [詳細]