JavaScript製のバーコードライブラリを利用すれば、ウェブサイトやMonacaアプリ上でバーコードを簡単に生成できます。
簡単なバーコード生成アプリを題材に、生成方法を解説します
サンプルアプリ
Monaca Educationダイレクトインポート
zip版
バーコード生成アプリ(バーコード版)
バーコード生成アプリ(QRコード版)
バーコード生成アプリ(統合版)
※ とりあえず手元でバーコードを作成したい方は統合版のアプリをMonacaで動かしてみてください。
バーコード生成アプリ(バーコード版)
JavaScript製のバーコードライブラリとして
こちらを使います。
ドキュメントは上記の公式サイトの方が読みやすい印象ですが、ソースコードはGithubにも掲載されています。
ライブラリをscriptタグで読み込む前提で、以下のように記述します。
<script src="JsBarcode.all.min.js"></script>
<script>
function load() {
JsBarcode("#barcode", "1234", {
format: "CODE39",
lineColor: "#000",
width:2,
height:100,
displayValue: true
});
}
</script>
</head>
<body onload="load()">
<img id="barcode"/>
<!--
<svg id="barcode"></svg>
<canvas id="barcode"></canvas>
-->
</body>
ライブラリをCDNから取得したい場合は、公式サイトにCDNへのリンクがあるのでそちらからコピーしてください。
解説
生成したバーコードの画像をDOMで書き込むため、loadイベント発生後に実行するのが簡単です。
loadイベント発生後に、JsBarcode()命令を実行します。この命令の第1引数にはバーコードを表示したいHTML要素のID名を指定するようになっています。HTML要素自体はimgでもsvgでもcanvasでも何でもOKです。上手くいけば、画面にバーコードが表示されます。
第二引数ではバーコード化したい文字列を指定します、第3引数はオプションになっており、オブジェクト形式でバーコードのフォーマットや色やサイズを指定します。なお、バーコードのフォーマットによっては、対応していない文字種や桁数の指定があるため、注意してください。誤った指定を行うと動きません。
バーコード生成アプリ(QRコード版)
QRコードは先ほどのライブラリでは生成できないため、別のライブラリを使用します。
davidshimjs/qrcodejs: Cross-browser QRCode generator for javascript
先ほどのライブラリとは使い方が微妙に異なるので注意してください。
ライブラリをscriptタグで読み込む前提で、以下のように記述します。
<script src="qrcode.min.js"></script>
<script>
function load() {
let qrcode = document.getElementById("qrcode");
let qrcode_object = new QRCode(
qrcode,
{
text: "https://edu.monaca.io/book/a1",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
}
</script>
</head>
<body onload="load()">
<div id="qrcode"></div>
</body>
解説
loadイベント発生後に命令を実行してコードを生成する流れは同じです。
先ほどのライブラリではID名を指定すればバーコードを書き込んでくれましたが、こちらのライブラリではQRコードを書き込みたいHTML要素のDOMオブジェクトを渡す必要があります。
また、命令も関数実行ではなくてQRCodeオブジェクトをnewしたタイミングでQRコードが生成・表示されます。
QRCodeオブジェクトを生成するタイミングで、第二引数にオブジェクト形式でQRコード化したい文字列やサイズや色情報などを渡します。
バーコード生成アプリ(統合版)
二つのアプリを使い分けるのも面倒ですし、また、固定の文字列がバーコードになっても面白くないため、フォームに入力した値からバーコードを生成するようなアプリを作ってみることにします。
<script src="qrcode.min.js"></script>
<script src="JsBarcode.all.min.js"></script>
<script>
function generate() {
let qrcode = document.getElementById("qrcode");
let barcode = document.getElementById("barcode");
let text = document.getElementById("text").value;
let format = document.getElementById("format").value;
if (format == "qrcode") {
qrcode.innerHTML = null;
new QRCode(
qrcode, {
text: text,
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
qrcode.style.display = "block";
barcode.style.display = "none";
} else {
JsBarcode(
"#barcode",
text,
{
format: format,
lineColor: "#000",
width:2,
height:100,
displayValue: true
});
qrcode.style.display = "none";
barcode.style.display = "block";
}
}
</script>
</head>
<body>
<h1>バーコード生成アプリ</h1>
<p style="font-size:12px;">※ 入力チェックは行っていません<br>
※ QRコードは(株)デンソーウェーブの登録商標です
</p>
文字：<input type="text" id="text"><br>
種類：
<select id="format">
<option value="qrcode">QRコード</option>
<option value="CODE39">CODE39</option>
<option value="EAN13">JAN13・ISBNなど</option>
<option value="EAN8">EAN-8</option>
<option value="ITF">ITF</option>
</select><br>
<input type="button" value="生成" onclick="generate()">
<h2>コード</h2>
<div id="qrcode"></div>
<img id="barcode"></div>
</body>
解説
今回はフォームで文字の入力とバーコードフォーマットの選択が終わってからバーコードを表示させるため、loadイベントではなくonclickイベントを使うことにします。「生成」というボタンを用意して、このボタンにonclick=”generate()”と記述してgenerate()関数でバーコードを生成することにします。
面倒なのはライブラリを二つ使っていることと、二つのライブラリの挙動が微妙に異なることです。今回はif文で処理を分けて、QRコードの時とそれ以外の時という分け方で処理を分けることにします。
QRコードが選択された場合
selectタグでqrcodeが選択された場合、QRコードを表示すべきエリアのコンテンツを空にしてからQRコードを書き込みます。また、スタイルシートを変更してQRコード部分を表示(block)、バーコードの表示エリアを非表示(none)にします。
それ以外の場合
selectタグでqrcode以外が選択された場合、JsBarcode()命令で指定されたフォーマットのバーコードを生成します。また、スタイルシートを変更してQRコード部分を非表示(none)、バーコードの表示エリアを表示(block)にします。
「生成」ボタンが二回以上押された場合
生成済みのバーコードが上書きされて新しいバーコードが表示されます。
qrcode.innerHTML = null;
は、もし、qrcodeが生成済みだったときに初期化する処理として記述していました。
なお、JsBarcode()はID名を参照して勝手に上書きするので上記のような処理は不要です。