Qiita Engineer Festa20242024年7月17日まで開催中！

ユニークなQRコードを大量に印刷したいときのTips

Posted at 2024-07-08

はじめに

大量の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;
    }
}