企業のバックオフィス業務では、備品管理や書類管理のために大量のQRコードを発行するシーンが多々あります。これまではExcel VBAでActiveXコントロールを利用したり、外部のAPIを叩いて生成する手法が一般的でした。

しかし、ActiveXの将来的なサポート不安や、セキュリティポリシーによるマクロ制限、また「社内データを外部APIに送信したくない」というプライバシー保護の観点から、よりモダンな手法が求められています。

これらを解決するために、**外部サーバーへ一切データを送らず、ブラウザのメモリ上だけで完結する「QRコード一括生成・ラベル印刷ツール」**を開発しました。実装時に工夫した、業務ツールとしての実用ポイントを解説します。

1. 外部送信を排した「ローカル処理」の徹底

業務で扱うデータには、社内システムのURLや個人の識別IDなど、機密性の高い情報が含まれることが珍しくありません。

本ツールでは、以下のライブラリを組み合わせることで、データの読み込みから生成、保存までをすべてブラウザのクライアントサイドで完結させています。

qrcode.js: QRコードの描画

SheetJS (xlsx.js): Excelファイルのパース

JSZip / FileSaver.js: 生成した画像のアーカイブ化とダウンロード

これにより、ネットワークの切断状態でも動作し、かつ情報漏洩リスクを構造的に排除しています。

2. 事務現場の「手作業」を自動化するロジック

単にQRコードを出すだけでなく、現場で即戦力となるための機能をJavaScriptで実装しました。

連番の一括生成
「接頭辞＋開始番号〜終了番号」を指定し、必要に応じて padStart を利用した「0埋め」を行うロジックです。

連番生成のコアロジック

for(let i=start; start<=end ? i<=end : i>=end; start<=end ? i++ : i--) {
    const formattedNum = padNum > 0 ? String(i).padStart(padNum, '0') : i;
    results.push(`${prefix}${formattedNum}`);
}

Excelからの流し込み

Excelで管理している資産リストから、そのままQRコードを生成したいという要望に応えるため、SheetJSを用いて「データと枚数」を直接読み込めるようにしました。

3. 「印刷」と「デジタル保存」の両立

ラベル作成において、最も厄介なのは「印刷レイアウト」です。

本ツールでは、生成したQRコードを一時的な canvas に描画し、それを toDataURL で画像化してプレビューエリアに展開します。印刷時は、ブラウザのプリント機能を利用しつつ、CSSの page-break-inside: avoid; を指定することで、ラベルがページの途中で切れるのを防いでいます。

@media print {
    .qlt-item-box {
        border: none !important;
        page-break-inside: avoid; /* ラベルがページを跨がないように制御 */
    }
}

また、印刷だけでなく、システムに登録する際の画像素材として利用できるよう、JSZipを用いて一括で画像ファイルをエクスポートする機能も搭載しました。

4. UIの一貫性を保つ「all: initial」の活用

WordPressのような既存のCMS環境にツールを組み込む際、サイト全体のCSSがツールのボタンやフォームを崩してしまうことがあります。

前回の記事でも触れましたが、今回も all: initial; （または all: revert; ）を親要素に当てることで、外部CSSからの干渉を遮断し、どんな環境でも意図した通りの使い心地を提供できるように設計しています。

まとめ

VBAや古い技術からの脱却は、単なる「置き換え」ではなく、Web技術を活用した「使い勝手の向上」であるべきだと考えています。クライアントサイドでの処理にこだわることで、セキュリティと利便性を両立したツールを構築することができました。

同様の移行を検討されている方の参考になれば幸いです。

実際に公開しているツール： QRコード生成（連番・Excel対応） - うしろぽっけ