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

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

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

@@ Line 1: / Line 1: @@
+* 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;