上野家のホームページ
ナーマル，マリン，ココ
[
新規
|
一覧
|
検索
|
最新
|
ヘルプ
]
開発/Barcode/QRコード/javascriptでQRコードを作成
をテンプレートにして作成
資料室
開発/Barcode/QRコード/javascriptでQRコードを作成 をテンプレートにして作成
[
差分
|
バックアップ
|
リロード
]
[ ]
開始行:
* javascriptでQRコードを作成
WEBページでQRコードを出力したい時なんかで使用できる，java...
* jquery.qrcode
''[[jquery.qrcode>https://github.com/jeromeetienne/jquery...
残念ながら，Micro QR Codeには対応していない。~
- 日本語テキストは未対応~
- canvasモードで描画を行うため，IEだとIE9.0以降が必要~
- デフォルトのサイズは256x256px~
** jquery.qrcodeのダウンロード
[[公式サイト>https://github.com/jeromeetienne/jquery-qrco...
ダウンロードしたファイルを，[[jQuery>https://jquery.com/]...
** jquery.qrcodeの使い方
サンプル''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="qrcod...
<div id="qrcode"></div>
実際にQRコードを出力するためのコードは
<script>
jquery('#qrcode').qrcode({width: 80, height: 80, tex...
</script>
にすれば良い。オプションは，width，height，text，renderの...
このうち，textはQR Codeにエンコードする文字列で，必須。
通常はcanvas要素でQR Codeを出力するが，render : "table" ...
色を指定する場合は，
jQuery('#qrcode').qrcode({
background:"#ffffff", // QRコードの背...
foreground: "#FF0000", // QRコードの色
text: "https://yueno.net",
});
のように指定します。
** 問題点
QR Codeには4cellのマージンが必要になりますが，jquery.qrco...
このため，WEBページの背景色によっては作成されたQRコード読...
*** 問題点の対策
しょうがないので，jquery.qrcodeを修正して4cellのマージン...
- 上下左右に4セルずつ表示ブロックを拡大~
- 余白エリアはBackGroundで塗りつぶし~
- 黒 or 白の塗りつぶし開始は5セル目から~
これで，マージンが出力される。
修正したjquery.qrcode：&ref(jquery-qrcode-master改.zip);~
* bwip-js
[[bwip-js>http://bwip-js.metafloor.com/]]は，[[PostScript...
驚くのは，90種類以上のバーコードタイプに対応していること...
素晴らしいことに，ちゃんとMicro QRコードにも対応していま...
** ダウンロードとインストール
このライブラリは，
https://github.com/metafloor/bwip-js
もしくは，
npm install bwip-js
でダウンロードまたはインストール出来ます。
node.jsで使用すると，通常のコマンドのように使用することが...
> bwip-js --bcid=microqrcode --width=12 --height=12 --te...
** オンラインBarcode API
WEB APIとしてもサービスされています。
API使用は，[[ここのOnline-Barcode-API>https://github.com/...
以下のようにしてこのAPIにアクセスして，QRコード画像を取得...
使用例：
https://bwipjs-api.metafloor.com/?bcid=microqrcode&text=...
https://bwipjs-api.metafloor.com/?bcid=qrcode&text=12345...
終了行:
* javascriptでQRコードを作成
WEBページでQRコードを出力したい時なんかで使用できる，java...
* jquery.qrcode
''[[jquery.qrcode>https://github.com/jeromeetienne/jquery...
残念ながら，Micro QR Codeには対応していない。~
- 日本語テキストは未対応~
- canvasモードで描画を行うため，IEだとIE9.0以降が必要~
- デフォルトのサイズは256x256px~
** jquery.qrcodeのダウンロード
[[公式サイト>https://github.com/jeromeetienne/jquery-qrco...
ダウンロードしたファイルを，[[jQuery>https://jquery.com/]...
** jquery.qrcodeの使い方
サンプル''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="qrcod...
<div id="qrcode"></div>
実際にQRコードを出力するためのコードは
<script>
jquery('#qrcode').qrcode({width: 80, height: 80, tex...
</script>
にすれば良い。オプションは，width，height，text，renderの...
このうち，textはQR Codeにエンコードする文字列で，必須。
通常はcanvas要素でQR Codeを出力するが，render : "table" ...
色を指定する場合は，
jQuery('#qrcode').qrcode({
background:"#ffffff", // QRコードの背...
foreground: "#FF0000", // QRコードの色
text: "https://yueno.net",
});
のように指定します。
** 問題点
QR Codeには4cellのマージンが必要になりますが，jquery.qrco...
このため，WEBページの背景色によっては作成されたQRコード読...
*** 問題点の対策
しょうがないので，jquery.qrcodeを修正して4cellのマージン...
- 上下左右に4セルずつ表示ブロックを拡大~
- 余白エリアはBackGroundで塗りつぶし~
- 黒 or 白の塗りつぶし開始は5セル目から~
これで，マージンが出力される。
修正したjquery.qrcode：&ref(jquery-qrcode-master改.zip);~
* bwip-js
[[bwip-js>http://bwip-js.metafloor.com/]]は，[[PostScript...
驚くのは，90種類以上のバーコードタイプに対応していること...
素晴らしいことに，ちゃんとMicro QRコードにも対応していま...
** ダウンロードとインストール
このライブラリは，
https://github.com/metafloor/bwip-js
もしくは，
npm install bwip-js
でダウンロードまたはインストール出来ます。
node.jsで使用すると，通常のコマンドのように使用することが...
> bwip-js --bcid=microqrcode --width=12 --height=12 --te...
** オンラインBarcode API
WEB APIとしてもサービスされています。
API使用は，[[ここのOnline-Barcode-API>https://github.com/...
以下のようにしてこのAPIにアクセスして，QRコード画像を取得...
使用例：
https://bwipjs-api.metafloor.com/?bcid=microqrcode&text=...
https://bwipjs-api.metafloor.com/?bcid=qrcode&text=12345...
ページ名:
Counter: 0, today: 0, yesterday: 0
Copyright©2008 Yuji Ueno All Rights Reserved.
ログイン
ユーザ名:
パスワード:
IDとパスワードを記憶
パスワード紛失
メインメニュー
ホーム
でぶlog
資料室
最新ページ一覧
全ページ一覧
ヘルプ
フォーラム
お問い合わせ
