QRコード
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>その他の技術]]
*目次 [#qf5e8afc]
#contents
*概要 [#h909873f]
-QRコード処理について纏める。
-QRコード
--デンソーが発明したマトリックス型二次元コード。
--バーコードより多くの情報を盛り込める。
--「QR」は Quick Response の頭字語(高速読み取りを目的の...
*詳細 [#jef6b87b]
**用途 [#g5e51b80]
元々は製造ラインでの部品管理を目的に開発された。
***入力手段 [#a319b4d0]
入力が手間であるスマホの入力手段
-自由入力
-URL
-メアド
-地図座標
-, etc.
***決済サービス [#p6458ee1]
QRコード決済
***XXXX券 [#p5745ffd]
券代替
-馬券
-入場券
-乗車券
-航空券
**種類 [#lc90a058]
***モデル1・2 [#u8169ac7]
-モデル1
--最初に作られたQRコード
--最大バージョンは14 (73 * 73セル)
--数字1167桁まで扱うことができる。
-モデル2
--モデル1を改良したコード
--コードが歪んでしまった場合でも読取り出来る。
--コード内部にアライメントパターンを配置
--最大バージョンは40 (177 * 177セル)
--数字7089桁まで扱うことができる。
***マイクロQR [#r5b2c6fb]
-切り出しシンボルが一つ
-小さなスペースへの印字を可能とする。
-格納できるデータ量はそれほど多くない。
-バージョンM1-4までの4バージョンがある。
***iQRコード [#j47daf76]
-コードの位置や大きさが簡単に読み取れるマトリックス方式の...
-広範囲に渡るコードを生成できる。
--従来のQRコードやマイクロQRコードより小型
--より多くのデータを格納できる大型コード
--長方形、表裏反転・白黒反転・ドットパターンなどをサポート
-従来のQRコードよりも多くの情報量を格納
--同じサイズなら情報量 80% 増量可能
--同じ情報量ならサイズ 30% 縮小可能
***フレームQR [#yf92bc40]
コードの内部に
-自由に画像を入れられる領域を持ち、
-フレームの形状、色も自由に変更できる。
**生成 [#g567da41]
***[[Native>#o172008d]] [#vedea380]
***[[Web>#q419b694]] [#e1985901]
**読取 [#x3da8261]
***[[WebRTC]] [#bd6e1ba7]
-[[HTML]]からカメラへのアクセスは、~
[[WebRTC]] の MediaDevices.getUserMediaで行う。
-後述の、getUserMediaと[[jsQRを使用したDEMO appサンプル>#...
iphoneで、上手く動かないが、コレは以下に起因している%%可...
--【iPhone】【Safari】getUserMediaで取ったMediaStreamをvi...
しても最初のフレームだけ描画されて止まってしまう問題【Rea...
https://otiai10.hatenablog.com/entry/2019/11/11/090124
***性能 [#e1631993]
-ハードとソフトの性能依存である。
-スマホ用の「マクロ(接写)レンズ」の利用が効果的らしい。
-また、以下の項目の影響を受ける。
--サイズ
---大きい方が識別し易い。
---バージョン(セル数)が大きくなれば、~
当然、推奨のサイズも大きくなる。
--解像度~
高い方が識別し易い。
--余白の有無~
5セル分の余白が欲しいらしい。
--色数
---識別し易い。~
白黒2色のQRコード
---識別し難い。~
・絵や文字が重なっているQRコード~
・模様が入った用紙に印刷されたQRコード~
--バージョン~
アライメントパターンがひとつの方が良いらしい。
--[[モデル1 or 2>#u8169ac7]]~
モデル2の方が識別し易い。
-参考
--QRコード認識について | ファイル管理ソフト「ファイル管理...
パナソニック ソリューションテクノロジー株式会社 | Panason...
https://www.panasonic.com/jp/company/pstc/products/fileoc...
--QRコードの読み取れる最小サイズを検証!~
【商用無料】QRコードお役立ち情報【QR】~
https://b.qrqrq.com/2018/06/25/qrcode-check-the-smallest-...
*サンプル [#b5b4e4f8]
**Native [#wfd230ef]
**Web [#o755c9ed]
***実装 [#v6b9f91c]
以下からDLして下さい。
>&ref(QrCode.zip);
***説明 [#ia817109]
-以下の[[[HTML5] QRCode Reader>#f3058fc4]]を改修した実装。
--フロント・カメラからリア・カメラに変更した。
--iPhoneで問題となるため、videoタグに必要な属性を追加した。
-この一式をHTTPSで通信可能な~
Webサーバに配置してスマホからアクセスして下さい。~
([[WebRTC>#bd6e1ba7]]を使用するには、HTTPSが必要になるた...
*ライブラリ [#a9d823c1]
**Native [#fc400301]
***ZXing [#o172008d]
このライブラリを起点に、様々な言語への移植が行われている。
-GitHub - zxing/zxing:~
ZXing ("Zebra Crossing") barcode scanning library for Jav...
https://github.com/zxing/zxing
***ZXing .NET [#s5ee4127]
-GitHub - micjahn/ZXing.Net:~
.Net port of the original java-based barcode reader and g...
https://github.com/micjahn/ZXing.Net
***, etc. [#g25fb8b8]
**Web [#q419b694]
-JavaScriptでQRコードをスキャンするライブラリまとめ - Qii...
https://qiita.com/shora_kujira16/items/a9e3aa0b06525c00a7e0
***qrcode.js [#ked14fd8]
コチラは、生成用
-GitHub - soldair/node-qrcode: qr code generator~
https://github.com/soldair/node-qrcode
***jsqrcode [#v9a654ab]
コチラは、読取用。
-特徴
--[[ZXing>#s7a7537c]]をJavaScriptに移行したライブラリ。
--テストコードが不十分ということで、作者が[[jsQR>#f3058fc...
-リポジトリ
--LazarSoft/jsqrcode: Javascript QRCode scanner~
https://github.com/LazarSoft/jsqrcode
---LazarSoft~
http://lazarsoft.info/
---Web QR~
https://webqr.com/
-サンプル・サイト
--ネイティブアプリ不要!モバイルWebサイトに~
QRコードリーダーを実装する方法 – WPJ~
https://www.webprofessional.jp/create-qr-code-reader-mobi...
--以下は、jsqrcodeのフォーク
---https://github.com/dmla/jsqrcode/blob/master/src/qr_pa...
---https://github.com/sitepoint-editors/jsqrcode/blob/mas...
***jsQR [#f3058fc4]
コチラは、読取用。
-特徴
--[[ZXing>#s7a7537c]]非依存のJavaScriptライブラリ。
--[[CommonJS>JavaScript#xe3a8701]]形式で書かれたモダンな...
--そのため、HTML上から使用するには[[webpack]]等が必要。
-リポジトリ
--cozmo/jsQR:~
~A pure javascript QR code reading library.~
This library takes in raw images and will locate,~
extract and parse any QR code found within.~
https://github.com/cozmo/jsQR
-サンプル・サイト
--Webの技術だけで作るQRコードリーダー - Qiita~
https://qiita.com/kan_dai/items/4331aae12f5f2d3ad18d
---Simple QR Reader~
https://simple-qr.netlify.com/
---KanDai/simple-qr-reader: QR code reader made with PWA~
https://github.com/KanDai/simple-qr-reader
--QR コードを連続で読み取れる Web アプリを作った | Basici...
https://tech.basicinc.jp/articles/193
---DEMO app~
https://lightning-qr.zaru.dev/
---GitHub repository~
https://github.com/zaru/lightning-qr-reader
--[HTML5] QRコードリーダーを作成する~
https://blog.katsubemakito.net/html5/qrcode-reader
---[HTML5] QRCode Reader~
https://miku3.net/html5/qrreader/~
・[[webpack]]で処理した[[jsQR>#f3058fc4]]を、更にminifyし...
・それ故、[[HTML/CSS/JavaScript]]しか知らなくても、実装を...
*参考 [#l979d459]
-QRコードドットコム|株式会社デンソーウェーブ~
https://www.qrcode.com/
-QRコード - Wikipedia~
https://ja.wikipedia.org/wiki/QR%E3%82%B3%E3%83%BC%E3%83%89
**作成 [#r7fd5eed]
以下のサイトから作成可能。
- URLのQRコード作成【無料】~
https://www.cman.jp/QRcode/qr_url/
指定可能なセル数からして、[[モデル2>#u8169ac7]]を生成して...
**サンプル検索 [#g6d753fc]
[[Google画像検索>https://www.google.com/search?q=QR%E3%82...
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>その他の技術]]
*目次 [#qf5e8afc]
#contents
*概要 [#h909873f]
-QRコード処理について纏める。
-QRコード
--デンソーが発明したマトリックス型二次元コード。
--バーコードより多くの情報を盛り込める。
--「QR」は Quick Response の頭字語(高速読み取りを目的の...
*詳細 [#jef6b87b]
**用途 [#g5e51b80]
元々は製造ラインでの部品管理を目的に開発された。
***入力手段 [#a319b4d0]
入力が手間であるスマホの入力手段
-自由入力
-URL
-メアド
-地図座標
-, etc.
***決済サービス [#p6458ee1]
QRコード決済
***XXXX券 [#p5745ffd]
券代替
-馬券
-入場券
-乗車券
-航空券
**種類 [#lc90a058]
***モデル1・2 [#u8169ac7]
-モデル1
--最初に作られたQRコード
--最大バージョンは14 (73 * 73セル)
--数字1167桁まで扱うことができる。
-モデル2
--モデル1を改良したコード
--コードが歪んでしまった場合でも読取り出来る。
--コード内部にアライメントパターンを配置
--最大バージョンは40 (177 * 177セル)
--数字7089桁まで扱うことができる。
***マイクロQR [#r5b2c6fb]
-切り出しシンボルが一つ
-小さなスペースへの印字を可能とする。
-格納できるデータ量はそれほど多くない。
-バージョンM1-4までの4バージョンがある。
***iQRコード [#j47daf76]
-コードの位置や大きさが簡単に読み取れるマトリックス方式の...
-広範囲に渡るコードを生成できる。
--従来のQRコードやマイクロQRコードより小型
--より多くのデータを格納できる大型コード
--長方形、表裏反転・白黒反転・ドットパターンなどをサポート
-従来のQRコードよりも多くの情報量を格納
--同じサイズなら情報量 80% 増量可能
--同じ情報量ならサイズ 30% 縮小可能
***フレームQR [#yf92bc40]
コードの内部に
-自由に画像を入れられる領域を持ち、
-フレームの形状、色も自由に変更できる。
**生成 [#g567da41]
***[[Native>#o172008d]] [#vedea380]
***[[Web>#q419b694]] [#e1985901]
**読取 [#x3da8261]
***[[WebRTC]] [#bd6e1ba7]
-[[HTML]]からカメラへのアクセスは、~
[[WebRTC]] の MediaDevices.getUserMediaで行う。
-後述の、getUserMediaと[[jsQRを使用したDEMO appサンプル>#...
iphoneで、上手く動かないが、コレは以下に起因している%%可...
--【iPhone】【Safari】getUserMediaで取ったMediaStreamをvi...
しても最初のフレームだけ描画されて止まってしまう問題【Rea...
https://otiai10.hatenablog.com/entry/2019/11/11/090124
***性能 [#e1631993]
-ハードとソフトの性能依存である。
-スマホ用の「マクロ(接写)レンズ」の利用が効果的らしい。
-また、以下の項目の影響を受ける。
--サイズ
---大きい方が識別し易い。
---バージョン(セル数)が大きくなれば、~
当然、推奨のサイズも大きくなる。
--解像度~
高い方が識別し易い。
--余白の有無~
5セル分の余白が欲しいらしい。
--色数
---識別し易い。~
白黒2色のQRコード
---識別し難い。~
・絵や文字が重なっているQRコード~
・模様が入った用紙に印刷されたQRコード~
--バージョン~
アライメントパターンがひとつの方が良いらしい。
--[[モデル1 or 2>#u8169ac7]]~
モデル2の方が識別し易い。
-参考
--QRコード認識について | ファイル管理ソフト「ファイル管理...
パナソニック ソリューションテクノロジー株式会社 | Panason...
https://www.panasonic.com/jp/company/pstc/products/fileoc...
--QRコードの読み取れる最小サイズを検証!~
【商用無料】QRコードお役立ち情報【QR】~
https://b.qrqrq.com/2018/06/25/qrcode-check-the-smallest-...
*サンプル [#b5b4e4f8]
**Native [#wfd230ef]
**Web [#o755c9ed]
***実装 [#v6b9f91c]
以下からDLして下さい。
>&ref(QrCode.zip);
***説明 [#ia817109]
-以下の[[[HTML5] QRCode Reader>#f3058fc4]]を改修した実装。
--フロント・カメラからリア・カメラに変更した。
--iPhoneで問題となるため、videoタグに必要な属性を追加した。
-この一式をHTTPSで通信可能な~
Webサーバに配置してスマホからアクセスして下さい。~
([[WebRTC>#bd6e1ba7]]を使用するには、HTTPSが必要になるた...
*ライブラリ [#a9d823c1]
**Native [#fc400301]
***ZXing [#o172008d]
このライブラリを起点に、様々な言語への移植が行われている。
-GitHub - zxing/zxing:~
ZXing ("Zebra Crossing") barcode scanning library for Jav...
https://github.com/zxing/zxing
***ZXing .NET [#s5ee4127]
-GitHub - micjahn/ZXing.Net:~
.Net port of the original java-based barcode reader and g...
https://github.com/micjahn/ZXing.Net
***, etc. [#g25fb8b8]
**Web [#q419b694]
-JavaScriptでQRコードをスキャンするライブラリまとめ - Qii...
https://qiita.com/shora_kujira16/items/a9e3aa0b06525c00a7e0
***qrcode.js [#ked14fd8]
コチラは、生成用
-GitHub - soldair/node-qrcode: qr code generator~
https://github.com/soldair/node-qrcode
***jsqrcode [#v9a654ab]
コチラは、読取用。
-特徴
--[[ZXing>#s7a7537c]]をJavaScriptに移行したライブラリ。
--テストコードが不十分ということで、作者が[[jsQR>#f3058fc...
-リポジトリ
--LazarSoft/jsqrcode: Javascript QRCode scanner~
https://github.com/LazarSoft/jsqrcode
---LazarSoft~
http://lazarsoft.info/
---Web QR~
https://webqr.com/
-サンプル・サイト
--ネイティブアプリ不要!モバイルWebサイトに~
QRコードリーダーを実装する方法 – WPJ~
https://www.webprofessional.jp/create-qr-code-reader-mobi...
--以下は、jsqrcodeのフォーク
---https://github.com/dmla/jsqrcode/blob/master/src/qr_pa...
---https://github.com/sitepoint-editors/jsqrcode/blob/mas...
***jsQR [#f3058fc4]
コチラは、読取用。
-特徴
--[[ZXing>#s7a7537c]]非依存のJavaScriptライブラリ。
--[[CommonJS>JavaScript#xe3a8701]]形式で書かれたモダンな...
--そのため、HTML上から使用するには[[webpack]]等が必要。
-リポジトリ
--cozmo/jsQR:~
~A pure javascript QR code reading library.~
This library takes in raw images and will locate,~
extract and parse any QR code found within.~
https://github.com/cozmo/jsQR
-サンプル・サイト
--Webの技術だけで作るQRコードリーダー - Qiita~
https://qiita.com/kan_dai/items/4331aae12f5f2d3ad18d
---Simple QR Reader~
https://simple-qr.netlify.com/
---KanDai/simple-qr-reader: QR code reader made with PWA~
https://github.com/KanDai/simple-qr-reader
--QR コードを連続で読み取れる Web アプリを作った | Basici...
https://tech.basicinc.jp/articles/193
---DEMO app~
https://lightning-qr.zaru.dev/
---GitHub repository~
https://github.com/zaru/lightning-qr-reader
--[HTML5] QRコードリーダーを作成する~
https://blog.katsubemakito.net/html5/qrcode-reader
---[HTML5] QRCode Reader~
https://miku3.net/html5/qrreader/~
・[[webpack]]で処理した[[jsQR>#f3058fc4]]を、更にminifyし...
・それ故、[[HTML/CSS/JavaScript]]しか知らなくても、実装を...
*参考 [#l979d459]
-QRコードドットコム|株式会社デンソーウェーブ~
https://www.qrcode.com/
-QRコード - Wikipedia~
https://ja.wikipedia.org/wiki/QR%E3%82%B3%E3%83%BC%E3%83%89
**作成 [#r7fd5eed]
以下のサイトから作成可能。
- URLのQRコード作成【無料】~
https://www.cman.jp/QRcode/qr_url/
指定可能なセル数からして、[[モデル2>#u8169ac7]]を生成して...
**サンプル検索 [#g6d753fc]
[[Google画像検索>https://www.google.com/search?q=QR%E3%82...
ページ名: