🤩

【たったの100行で実装できる】javascript、bootstrapで作るQRコード生成アプリ（コピペOK）

2024/07/25に公開

Bootstrap

シンプルなQRコード生成アプリです。
QRコード読み取りアプリはあるんですが、QRコード生成はあまりなかったので作ってみました。
自前のアプリや管理画面上に設置など、URLやお店用のクーポン発行などに使えるかなと。
動作も軽量です。
SVG、PNG、GIFでそれぞれダウンロード可能になっています。

作成

QR.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>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding: 20px;
        }
        #qr-code {
            margin-top: 20px;
        }
        canvas {
            border: 1px solid #000;
        }
        #download-buttons {
            margin-top: 20px;
        }
    </style>
    </head>
    <body>
    <div class="container">
        <div class="col-md-6 mx-auto text-center">
            <h1 class="mt-5 mb-5">QRコード生成器</h1>
            <div class="d-flex mb-3">
                <div class="flex-fill me-2">
                    <input type="text" id="couponCode" class="form-control" placeholder="URLやクーポンコードを入力">
                </div>
                <button id="generate" class="btn btn-primary align-self-end">作成</button>
            </div>
            <div id="qr-code" class="mt-3">
                <canvas id="qr-canvas"></canvas>
            </div>
            <div id="download-buttons" class="text-center">
                <a id="download-svg" href="#" class="btn btn-success mb-3">SVGでダウンロード</a>
                <a id="download-png" href="#" class="btn btn-danger mb-3">PNGでダウンロード</a>
                <a id="download-gif" href="#" class="btn btn-warning mb-3">GIFでダウンロード</a>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>

    <script>
        document.getElementById('generate').addEventListener('click', function() {
            var couponCode = document.getElementById('couponCode').value;
            if (couponCode.trim() === "") {
                return; // クーポンコードが空の場合は何もせずに戻る
            }

            // QRコードを生成
            QRCode.toCanvas(document.getElementById('qr-canvas'), couponCode, function (error) {
                if (error) console.error(error);
                console.log('QRコードが生成されました。');
                
                // ダウンロードリンクを更新
                updateDownloadLinks();
            });
        });

        function updateDownloadLinks() {
            var canvas = document.getElementById('qr-canvas');

            // PNGのダウンロードリンク
            var pngLink = document.getElementById('download-png');
            pngLink.href = canvas.toDataURL('image/png');
            pngLink.download = 'qrcode.png';

            // GIFのダウンロードリンク
            var gifLink = document.getElementById('download-gif');
            gifLink.href = canvas.toDataURL('image/gif');
            gifLink.download = 'qrcode.gif';

            // SVGのダウンロードリンク
            QRCode.toString(document.getElementById('couponCode').value, { type: 'svg' }, function (err, svg) {
                if (err) console.error(err);
                var svgLink = document.getElementById('download-svg');
                var blob = new Blob([svg], { type: 'image/svg+xml' });
                var url = URL.createObjectURL(blob);
                svgLink.href = url;
                svgLink.download = 'qrcode.svg';
            });
        }
    </script>
    </body>
    </html>

バーコードを生成したい方はこちらよりあります。

以上ー

作成

Discussion