---
parent: ../WebTool
title: QR-Universal Scanner: ブラウザで動作するQRコード読み取りウェブアプリ
date: 2021-06-20
tags: ウェブアプリ, Web, QRコード, ツール, PWA
---
//QR-Universal Scanner// は, ブラウザ上で動作する, //インストール不要//で//多くの入力方法(カメラとクリップボード)に対応した//QRコード^[注.qrcode]読み取りWebアプリです.
PWAに対応しており//オフラインでも動作//します.
QRコードを標準で読み取れるデバイスがありますが,
主にモバイル端末に多く^[iphone-qr-code-apple]^[android-qr-code-google-play],
PC上でQRコードを読み込むためにはアプリをインストールする必要があります^[mac-qr-code-1]^[mac-qr-code-2]^[mac-qr-code-3]^[windows-qr-code-1]^[windows-qr-code-2].
インストール不要のQRコード読み取りアプリもあります^[webapp-qr-code-1]^[webapp-qr-code-2]^[webapp-qr-code-3]^[webapp-qr-code-4]^[webapp-qr-code-5]が,
ファイルのみ, もしくはカメラのみからの読み込みであったりと, 入力方法が限定されています.
本稿では, インストール不要で多くの入力方法に対応したQRコード読み取りWebアプリ QR-Universal Scanner を紹介します. PWAに対応しており, オフラインでも動作します.
===
<iframe width="100%" height="640px" scrolling="no" allow="camera; clipboard-read; clipboard-write" frameborder="no" src="https://contentsviewer.github.io/QR-UniversalScanner/"></iframe>
# オフラインで利用する
1. アプリ専用ページへ行く
<div style="text-align: center; margin-bottom: 1em">
<div>
<a href="https://contentsviewer.github.io/QR-UniversalScanner/">
<img src="images//logo.png"/ style='max-width: 80%'>
</a>
</div>
<div>
<a href="https://contentsviewer.github.io/QR-UniversalScanner/">Launch App</a>
</div>
<div>
<a href="https://contentsviewer.github.io/QR-UniversalScanner/" style='overflow-wrap: break-word'>
https://contentsviewer.github.io/QR-UniversalScanner/
</a>
</div>
</div>
2. 専用ページでは, ブラウザがオフラインの状態でもアプリが動作します
3. (オプション) アプリを追加する
アプリを追加することで, デバイスのホーム画面に本アプリのショートカットを作成でき,
他ネイティブアプリと同等の使い勝手を提供します.
Chrome, Edge - PC版:
URL欄にある, 「アプリをインストール」アイコンをクリック
Safari - モバイル版:
画面下部共有ボタンから, 「ホームに追加」をタップ
Chrome - モバイル版:
「ホーム画面に追加」をタップ
そのほかブラウザのアプリ追加については,
「PWA, {ブラウザ名}, アプリ追加」で検索してください.
[PWAとは]
=========
PWAは, プログレッシブウェブアプリ (Progressive web apps)の略で,
クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです^[pwa-mdn].
=========
# サイトにアプリを追加する
本サイトのようにアプリをウェブページに埋め込むことができます.
以下のコードを埋め込みたい場所に書いてください.
```html
<iframe width="100%" height="640px" scrolling="no" allow="camera; clipboard-read; clipboard-write" frameborder="no" src="https://contentsviewer.github.io/QR-UniversalScanner/"></iframe>
```
# 注釈
[注.qrcode]: QRコードはデンソーウェーブの登録商標です.
# 参考文献
[qr-code-wikipedia]: ["QR code"](https://en.wikipedia.org/wiki/QR_code). Wikipedia. accessed at 2021-08-07.
[iphone-qr-code-apple]: ["iPhoneのカメラでQRコードをスキャンする"](https://support.apple.com/ja-jp/guide/iphone/iphe8bda8762/ios). Apple. accessed at 2021-08-07.
[android-qr-code-google-play]: ["Google レンズ"](https://play.google.com/store/apps/details?id=com.google.ar.lens&hl=ja&gl=US). Google Play. accessed at 2021-08-07.
[mac-qr-code-1]: ["【Macアプリ】QRコードをMacの内蔵カメラで読みたい！！"](https://komox-net.com/2018/07/10/mac-qr-journal/). KOMOXのあしあと. accessed at 2021-08-07.
[mac-qr-code-2]: ["MacbookでもQRコードを読み取る方法があるんだってばよ！ーQR Journalを使えば無料で解決ー"](https://nanairo-taiyou.com/macbook_qrapp/). なないろライフ. accessed at 2021-08-07.
[mac-qr-code-3]: ["MacでQRコードを読み取りするには？"](https://yama-mac.com/read_qr_code/). Macのアンチョコ. accessed at 2021-08-07.
[windows-qr-code-1]: ["Windows10でQRコードをパソコンで読み取るアプリ「QR Code for Windows10」の使い方"](https://win10labo.info/win10-read-qr-code/). Win10ラボ. accessed at 2021-08-07.
[windows-qr-code-2]: ["パソコンでQRコードをスキャンする方法【Windows10】"](https://ishi-pc.net/colum/scan-qr/). 石川パソコン修理センター. accessed at 2021.08.07.
[webapp-qr-code-1]: ["QRコードをパソコンで読み取る"](http://qrcode.red/). systemexpress.co.jp. accessed at 2021-08-07.
[webapp-qr-code-2]: ["インストール不要のQRコードリーダー"](https://yosiopp.net/post/20191011/). yosiopp. accessed at 2021-08-07.
[webapp-qr-code-3]: ["Webの技術だけで作るQRコードリーダー"](https://qiita.com/kan_dai/items/4331aae12f5f2d3ad18d). Qitta. accessed at 2021-08-07.
[webapp-qr-code-4]: ["QR Code Scanner"](https://minishlink.github.io/pwa-qr-code-scanner/). minishlink.github.io. accessed at 2021-08-07.
[webapp-qr-code-5]: ["QR Code scanner"](https://webqr.com/). Lazar Laszlo. accessed at 2021-08-07.
[pwa-mdn]: ["プログレッシブウェブアプリ (PWA)"](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps). Mozilla and individual contributors. accessed at 2021-08-07.