上野家のホームページ - 資料室バックアップ : 開発/Barcode/QRコード/javascriptでQRコードを作成のソース

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

差分を表示
開発/Barcode/QRコード/javascriptでQRコードを作成へ行く。

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

* jquery.qrcode [#o957562e]
''[[jquery.qrcode>https://github.com/jeromeetienne/jquery-qrcode]]''というjqueryのプラグインとして動作するライブラリがある。javascriptと言うことで，WEBブラウザでQRコードを作成する。

残念ながら，Micro QR Codeには対応していない。~
- 日本語テキストは未対応~
- canvasモードで描画を行うため，IEだとIE9.0以降が必要~
- デフォルトのサイズは256x256px~

** jquery.qrcodeのダウンロード [#o81b45c8]
[[公式サイト>https://github.com/jeromeetienne/jquery-qrcode]]から，jquery.qrcode.jsをダウンロードする。

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

** jquery.qrcodeの使い方 [#d6c03e48]
サンプル''test.html''~
#code(html,nonumber){{
<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",
 });
のように指定します。

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

*** 問題点の対策 [#h422988c]
しょうがないので，jquery.qrcodeを修正して4cellのマージンを出力するようにした。~
- 上下左右に4セルずつ表示ブロックを拡大~
- 余白エリアはBackGroundで塗りつぶし~
- 黒 or 白の塗りつぶし開始は5セル目から~

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

修正したjquery.qrcode：&ref(jquery-qrcode-master改.zip);~

* bwip-js [#l939d9e6]
[[bwip-js>http://bwip-js.metafloor.com/]]は，[[PostScriptのBarcode Writer>https://github.com/bwipp/postscriptbarcode]]のJavaScriptバインディング版。WEBブラウザやJavaScriptベースのサーバーフレームワークで実行出来るようになっている。

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

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

** ダウンロードとインストール [#y70c35a5]
このライブラリは，
 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 [#b8e07b17]
WEB APIとしてもサービスされています。

API使用は，[[ここのOnline-Barcode-API>https://github.com/metafloor/bwip-js/wiki/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;