QRコードのバックアップ(No.6) - .NET 開発基盤部会 Wiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る

目次 †

概要 †

QRコード処理について纏める。

QRコード
- デンソーが発明したマトリックス型二次元コード。
- バーコードより多くの情報を盛り込める。
- 「QR」は Quick Response の頭字語（高速読み取りを目的の一つにする）

詳細 †

用途 †

元々は製造ラインでの部品管理を目的に開発された。

URL †

URL入力が手間であるスマホの入力手段

決済サービス †

QRコード決済

XXXX券 †

券代替

馬券
入場券
乗車券
航空券

ライブラリ †

Native †

Web †

サンプル †

実装 †

以下からDLして下さい。

QrCode.zip

説明 †

以下のCamera Testを改修した実装。
- フロント・カメラからリア・カメラに変更した。
- iPhoneで問題となるたvideoタグに属性を追加した。

この一式をHTTPSで通信可能な
Webサーバに配置してスマホからアクセスして下さい。
（WebRTCを使用するには、HTTPSが必要になるため）

Camera Test
- webpackで処理したjsQRを、更にminifyして使用しています。
- それ故、HTML/CSS/JavaScriptしか知らなくても、実装を理解できます。

参考 †

QRコード - Wikipedia
https://ja.wikipedia.org/wiki/QR%E3%82%B3%E3%83%BC%E3%83%89

QRコード †

作成 †

以下のサイトから作成可能。

URLのQRコード作成【無料】
https://www.cman.jp/QRcode/qr_url/

サンプル検索 †

Google画像検索で検索可能。

Native †

ZXing †

このライブラリを起点に、様々な言語への移植が行われている。

GitHub - zxing/zxing: ZXing ("Zebra Crossing") barcode scanning library for Java, Android
https://github.com/zxing/zxing

Web †

JavaScriptでQRコードをスキャンするライブラリまとめ - Qiita
https://qiita.com/shora_kujira16/items/a9e3aa0b06525c00a7e0

jsqrcode †

特徴
- ZXingをJavaScriptに移行したライブラリ。
- テストコードが不十分ということで、作者がjsQRの利用を推奨している。

リポジトリ
- 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 †

特徴
- ZXing非依存のJavaScriptライブラリ。
- CommonJS形式で書かれたモダンなライブラリ。
- そのため、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

WebRTC †

カメラへのアクセスは、WebRTC の MediaDevices?.getUserMedia?で行う。

MediaDevices?.getUserMedia?() メソッドでカメラにアクセス可能。

[HTML5] カメラをJSで操作し写真を撮影する
https://blog.katsubemakito.net/html5/qrcode-reader

Camera Test
https://miku3.net/html5/camera/camera.html

前述の、getUserMedia?とjsQRを使用したサンプルが
iphoneで、上手く動かないが、コレは以下に起因している可能性がある。

【iPhone】【Safari】getUserMedia?で取ったMediaStream?をvideoタグにセット
しても最初のフレームだけ描画されて止まってしまう問題【React】 - DRYな備忘録
https://otiai10.hatenablog.com/entry/2019/11/11/090124