はじめに

大量のQRコードを印刷したい時ってありますよね！
えっ？ない？

いやいや、きっと必要な時がいつか来るはずです…！

以前投稿した、「WebRTCを利用したトランシーバーアプリ」を複数人で利用するために開発したコードを眠らせていたので、ここで紹介したいと思います。

使用した技術

ブラウザだけで、かつ完全ローカルで生成できれば便利だと思い、HTML+CSS+JavaScriptで開発しました。

JavaScriptでQRコードを生成するライブラリ「jquery-qrcode.js」が公開されていたので、ありがたく使わせていただきました。MITライセンスです。

どんなことに使えるの？

通し番号の管理用QRコード、認証トークンを含んだQRコード、完全にランダムの意味のないQRコードなど、色々な用途のQRコードを生成するときに使うことができます！

コード

ファイル構造

folder
├ index.html
├ main.js
├ style.css
├ jquery.qrcode.min.js
└ jquery.min.js

index.html

<!DOCTYPE html>
<html lang="ja-JP">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="style.css">
    <title>QRGenerator</title>
</head>

<body>
    <header>
        <h1 class="header-text">QRGenerator</h1>
    </header>

    <!--生成ボタン-->
    <div class="qr-input">
        <div class="option">
            <button type="button" id="make">作成</button>
        </div>
    </div>

    <!--生成したQRコードの表示部-->
    <section class="page">
        <div class="canvas" id="op-qrcode"></div>
    </section>

    <a class="hidden" id="link"></a>
    
    <!--JavaScriptのロード-->
    <script src="jquery-3.5.1.min.js" charset="utf-8"></script>
    <script src="jquery.qrcode.min.js" charset="utf-8"></script>
    <script src="main.js"></script>
</body>

</html>

main.js

$('#make').on('click', function () {
    $('#op-qrcode').empty();
    
    // QRコードを生成する個数 
    const kosu = 15;
    for (i = 1; i <= kosu; i++) {
        // QRコードにしたい情報を変数inputに代入する。iを変数として利用。
        var input = String("ID:") + String(i.toString().padStart(6, '0'));
        var text = unescape(encodeURIComponent(input));

        $('#op-qrcode').qrcode({ text: text, width: 1000, height: 1000 });
        $('canvas').attr('class', 'canvas');
    }
});

CSSは長いので折りたたんであります。

style.css


body {
    text-align: center;
}

/*生成ボタンのスタイル*/
button {
    background-color: #fff;
    color: #fb3f6d;
    border: 0.5svw solid #fb3f6d;
    padding: 1svw 1svh;
    font-size: 3svw;
    border-radius: 1svh;
    margin-bottom: 1svh;
    margin-top: 1svh;
    width: 20svw;
    cursor: pointer;
}

/*生成されたQRコードを表示する際のスタイル*/
canvas {
    width: 30%;
    height: 30%;
    margin: 1svw 1svw;
}

#make {
    text-align: center;
}

#ip-qrcode {
    width: 100%;
}

#op-qrcode {
    width: 100%;
}

.page {
    border: 1svh solid black;
    width: 80svw;
    height: 113.14svw;
    box-sizing: border-box;
    padding: 2.5svw 7.619svw;
    margin: 0svh 10svw;
    page-break-after: always;
}

.page:last-child {
    page-break-after: auto;
}


/*A4で印刷するときのスタイル*/
@media print {
    canvas {
        /*width: 25svw;
        height: 25svw;
        margin: 1svw;*/
        width: 30%;
        height: 30%;
        margin: 1svw 1svw;
    }

    .header-text {
        display: none;
    }

    .option {
        display: none;
    }

    .page {
        border: 0svh solid black;
        width: 210mm;
        height: 297mm;
        box-sizing: border-box;
        padding: 0mm 20mm;
        margin: 0;
        page-break-after: auto !important;
    }

    .page {
        page-break-after: always;
    }

    .page:last-child {
        page-break-after: auto !important;
    }
}

これらに続き、先ほど紹介した「jquery-qrcode.js」のミニマイズされたコードをGitHubから頂いてきて、「jquery.qrcode.min.js」として保存します。

jQueryは公式サイトやCDN等から入手し、「jquery.min.js」として保存します。

使ってみる

index.htmlを開きます。今回のコードは、ブラウザでファイルを直接開くだけで実行できます（Webサーバー等は必要ありません）。

作成ボタンをクリックすると、QRコードが生成されます。

生成個数（main.js中の変数kosu）を15個以上にすると、黒い線の枠からはみ出て表示されますが、A4で印刷すると各ページに15個ずつ収まるように実装しました。

↑

↑A4設定で印刷をかける場合のプレビュー

ちなみに、生成個数を1000個単位にすると、比較的新しいPCでもそれなりに時間がかかります。近くにいる人と手遊びでもしながら気長に待つと良いかと思います。

最後に

JavaScriptのコードを少し書き換えるだけで本当に色々なことに応用できます。ぜひ使ってみてください！

いいね・ストック・コメントを頂けると大変喜びます！
最後まで読んでいただきありがとうございました！

参考文献

補足

「QRコード」は「株式会社デンソーウェーブ」の登録商標です。