面倒な手入力とはさようなら！QRコードを使ったWeb入力支援

昨今、オンラインでの情報入力の機会が増えています。
しかし、長いURLやテキストを手動で入力するのは面倒で時間がかかりますよね。

そんな悩みを解決するのが、QRコードを使ったWeb入力支援機能です。
まずは、次のページで実際に試してみてください。

QRコード入力補助

QRコードスキャンで簡単に情報を入力

この機能は、入力支援機能となります。
もちろん、手動で普通に入力しても良いです。

でも、スマホの場合は入力するのが面倒過ぎます。。。
そんなときは、入力したい情報をQRコードに変換します。

そのQRコードをWebページ上のアイコンをクリックして表示されるスキャナーで読み取ります。
そうすると、読み取った情報が自動的に入力フィールドに挿入されます。

QRコードの作成については、いろいろな方法があります。
私はセキュリティを考慮して、ツールを自作しています。

自作と言っても、開発に30分もかかっていません。

実装方法

この機能は、HTML、CSS、JavaScriptを組み合わせて実装されています。
技術的な詳細は、以下の記事で説明しています。

ここでは、冒頭で示した画面で用いているコードを簡単に説明します。
上記記事のコードをより汎用化して使いやすくしています。

HTML

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QRコード入力補助</title>
    <script src="https://unpkg.com/@zxing/library@latest"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>QRコード入力補助</h1>
    <div class="input-container">
        <input type="text" id="inputText" class="qr-input" placeholder="テキストを入力してください">
        <img src="qr-icon.png" alt="QRコードアイコン" class="qr-icon" data-target="inputText">
    </div>
    <div class="input-container">
        <textarea id="inputTextarea" class="qr-input" placeholder="テキストエリアに入力してください"></textarea>
        <img src="qr-icon.png" alt="QRコードアイコン" class="qr-icon" data-target="inputTextarea">
    </div>

    <div id="popup" class="popup">
        <div class="popup-content">
            <span class="close-button">&times;</span>
            <video id="video"></video>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

HTMLファイル（index.html）では、入力フィールドとテキストエリア、それぞれに対応するQRコードアイコン、QRコードスキャナーのビデオを表示するポップアップ用のdiv要素を定義しています。

あとは、必要なファイルのjsファイルの読み込みですね。

CSS

style.css

/* style.css */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.input-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 400px;
}

.qr-input {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
    width: 100%;
    resize: vertical;
}

.qr-icon {
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.popup.show {
    opacity: 1;
    pointer-events: auto;
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: #888;
    cursor: pointer;
}

video {
    width: 100%;
    max-width: 400px;
    border-radius: 5px;
}

CSSファイル（style.css）では、入力フィールド、QRコードアイコン、ポップアップなどの要素のスタイルを設定しています。
レイアウトやサイズ、色などを調整することで、見やすく使いやすいデザインを実現しています。

JavaScript

script.js

// script.js
const popup = document.getElementById('popup');
const videoElement = document.getElementById('video');
const closeButton = document.querySelector('.close-button');
const qrIcons = document.querySelectorAll('.qr-icon');

let codeReader;
let currentInput;

qrIcons.forEach(icon => {
    icon.addEventListener('click', () => {
        currentInput = document.getElementById(icon.dataset.target);
        openQRCodeReader();
    });
});

closeButton.addEventListener('click', closeQRCodeReader);

function openQRCodeReader() {
    popup.classList.add('show');
    startQRCodeReader();
}

function closeQRCodeReader() {
    popup.classList.remove('show');
    stopQRCodeReader();
}

function startQRCodeReader() {
    codeReader = new ZXing.BrowserQRCodeReader();
    codeReader.decodeFromVideoDevice(null, videoElement, onQRCodeDecoded);
}

function stopQRCodeReader() {
    if (codeReader) {
        codeReader.reset();
        codeReader = null;
    }
}

function onQRCodeDecoded(result, err) {
    if (result) {
        currentInput.value = result.text;
        closeQRCodeReader();
    }
    if (err &amp;&amp; !(err instanceof ZXing.NotFoundException)) {
        console.error(err);
    }
}

JavaScriptファイル（script.js）が、QRコード入力支援の中核を担っています。
主な機能は以下の通りです。