![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>その他の技術]] *目次 [#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] -コードの位置や大きさが簡単に読み取れるマトリックス方式の2次元コード -広範囲に渡るコードを生成できる。 --従来の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サンプル>#f3058fc4]]が~ iphoneで、上手く動かないが、コレは以下に起因している%%可能性がある%%。 --【iPhone】【Safari】getUserMediaで取ったMediaStreamをvideoタグにセット~ しても最初のフレームだけ描画されて止まってしまう問題【React】 - DRYな備忘録~ https://otiai10.hatenablog.com/entry/2019/11/11/090124 ***性能 [#e1631993] -ハードとソフトの性能依存である。 -スマホ用の「マクロ（接写）レンズ」の利用が効果的らしい。 -また、以下の項目の影響を受ける。 --サイズ ---大きい方が識別し易い。 ---バージョン（セル数）が大きくなれば、~ 当然、推奨のサイズも大きくなる。 --解像度~ 高い方が識別し易い。 --余白の有無~ 5セル分の余白が欲しいらしい。 --色数 ---識別し易い。~ 白黒2色のQRコード ---識別し難い。~ ・絵や文字が重なっているQRコード~ ・模様が入った用紙に印刷されたQRコード~ --バージョン~ アライメントパターンがひとつの方が良いらしい。 --[[モデル1 or 2>#u8169ac7]]~ モデル2の方が識別し易い。 -参考 --QRコード認識について | ファイル管理ソフト「ファイル管理革命Lite」~ パナソニック ソリューションテクノロジー株式会社 | Panasonic~ https://www.panasonic.com/jp/company/pstc/products/fileocr_l/qr_sample.html --QRコードの読み取れる最小サイズを検証！~ 【商用無料】QRコードお役立ち情報【QR】~ https://b.qrqrq.com/2018/06/25/qrcode-check-the-smallest-qrcode/ *サンプル [#b5b4e4f8] **Native [#wfd230ef] **Web [#o755c9ed] ***実装 [#v6b9f91c] 以下からDLして下さい。 >&ref(QrCode.zip); ***説明 [#ia817109] -以下の[[[HTML5] QRCode Reader>#f3058fc4]]を改修した実装。 --フロント・カメラからリア・カメラに変更した。 --iPhoneで問題となるため、videoタグに必要な属性を追加した。 -この一式をHTTPSで通信可能な~ Webサーバに配置してスマホからアクセスして下さい。~ （[[WebRTC>#bd6e1ba7]]を使用するには、HTTPSが必要になるため） -[[[HTML5] QRCode Reader>#f3058fc4]] --[[webpack]]で処理した[[jsQR>#f3058fc4]]を、更にminifyして使用しています。 --それ故、[[HTML/CSS/JavaScript]]しか知らなくても、実装を理解できます。 *ライブラリ [#a9d823c1] **Native [#fc400301] ***ZXing [#o172008d] このライブラリを起点に、様々な言語への移植が行われている。 -GitHub - zxing/zxing:~ ZXing ("Zebra Crossing") barcode scanning library for Java, Android~ https://github.com/zxing/zxing ***ZXing .NET [#s5ee4127] -GitHub - micjahn/ZXing.Net:~ .Net port of the original java-based barcode reader and generator library zxing~ https://github.com/micjahn/ZXing.Net ***, etc. [#g25fb8b8] **Web [#q419b694] -JavaScriptでQRコードをスキャンするライブラリまとめ - Qiita~ 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>#f3058fc4]]の利用を推奨している。 -リポジトリ --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-mobile-website/ --以下は、jsqrcodeのフォーク ---https://github.com/dmla/jsqrcode/blob/master/src/qr_packed.js ---https://github.com/sitepoint-editors/jsqrcode/blob/master/src/qr_packed.js ***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 アプリを作った | Basicinc Enjoy Hacking!~ 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/ 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%B3%E3%83%BC%E3%83%89&tbm=isch]]で検索可能。
