【世界はバーコードに満ちている】Vue.jsでバーコード生成プラグインを使ってみた。
はじめに
バーコードってなんか良いですよね。
縦に黒い棒が並んでいるだけのシンプルさから、読み取るときの「ピッ」という音まで...。
何と言うかある種、文学チックなわびさびも感じる文明の利器です。
さて今回、バーコードが好きすぎて...というわけではないのですが、『バーコード生成』 やってみました。
...とは言っても一から開発する時間も気力もないので偉大な先人が作ってくださったプラグインを利用することにします。
今関わっているプロジェクトの性質上、求められるのは以下の条件を満たすプラグインです。
1. Vueアプリケーションで使えること（Javascriptベースのプラグイン）
2. なるべく更新頻度の高いこと
3. QRコードも含めた、なるべく多くの規格に対応していること （←これが鬼門 !!）
果たして本当にそんなプラグインがあるのでしょうか？
素人なりに調べてみたので生温かい目でお付き合いください。Hello, Barcode!!
バーコードの規格
バーコードについてはこの資本主義経済の中で生きていて知らない人はいないでしょう。
しかし、一口にバーコードと言っても何十種も異なる規格があることは意外に知られていません（僕も知りませんでした...）。
その中でも比較的メジャーな規格には以下のようなものがあります。
JAN/EAN/UPC
- 数字(0-9)のみ
- 標準タイプ13桁、短縮タイプ8桁
- 生活用品全般的。最もよく見るバーコードの一つ。世界共通規格。
ITF
- 数字(0-9)のみ
- 有効桁数14桁、もしくはチェックデジットを含まない13桁
- 流通用コード。段ボールなどの包装によく使われる。
CODE39
- 数字(0-9)、アルファベット大文字(A-Z)、記号(-.$/+%)、半角スペースに対応
- 桁数上限なし
- 品番などを表現できるので工業製品に広く使われる。
もっと知りたいという方は下記のサイトなどが詳しいです！
選定
さて、もう一度今回満たすべき要件を確認してみましょう。
1. Vueアプリケーションで使えること（Javascriptベースのプラグイン）
2. なるべく更新頻度の高いこと
3. QRコードも含めた、なるべく多くの規格に対応していること
この中でも特に3が鬼門でした。
というのも、対応したいとの要望があった規格が以下の通りです。
- QR CODE
- CODABAR
- CODE11
- CODE39
- CODE93
- CODE128
- EAN8（JAN8）
- EAN13（JAN13）
- STD25（STANDARD 2 OF 5 - INDUSTRIAL 2 OF 5）
- INT25（INTERLEAVED 2 OF 5）
- MSI
- DATAMATRIX（ASCII + EXTENDED）
いや!多いよ！！！
まあ、複数のプラグインを組み合わせて使うということもできますし、できないことはないのです。
しかし、そこそこマイナーな規格もある中で組合せを考えるのも悩ましいものです。
候補に選んだプラグイン
そんなこんなで候補に挙がったプラグインが以下になります。
一つずつ特徴を見ていきましょう。
lindell/vue-barcode 1.3.0
Javascriptでバーコードを生成する「JsBarcode」と開発者が同じVueプラグイン。JsBarcodeベース。
- 主な対応規格：
CODABAR, CODE39, CODE128, EAN8（JAN8）, EAN13（JAN13）, INT25（INTERLEAVED 2 OF 5）（ITF）, MSI - 主な非対応規格：
QR CODE, CODE11, CODE93, STD25（STANDARD 2 OF 5 - INDUSTRIAL 2 OF 5）, DATAMATRIX（ASCII + EXTENDED） - 長所： 実装が簡単そう（Vue.jsで動作確認済み）。
- 短所： 非対応の規格がある。あまり活発ではなさそう（当時最終更新が2019/01/30）。
fengyuanchen/vue-barcode 1.0.1
JsBarcodeベースのVueプラグイン。上記のプラグインとは開発者が違う。
- 対応・非対応規格：
上記に同じ - 長所： 日本語ドキュメントが多い。実装が簡単そう（Vue.jsで動作確認済み）。比較的更新が新しい（当時最新リリースが2020/01/18）。
- 短所： 非対応の規格がある。更新頻度は少なめ。
metafloor/bwip-js 3.0.1
まさかのほとんどの規格に対応。しかし新しいぶん、まだまだ情報が少ない。
- 対応規格： 要望のあった全ての規格
- 長所： 更新頻度が高く、新しい（当時最新リリースが2021/06/16）。非対応の規格がほとんどない。
- 短所： 日本語ドキュメントがほぼ無い。
結論: bwip-jsでいこう！！
やはり一つのプラグインで全ての規格に対応できるというのは魅力的だった...。
今回要望にあった規格以外にもマイナーな規格まで数多く対応している模様。
更新頻度が高く、新しいのもポイント高め。
しかしながら、公式サイトではVue.jsに組み込む手順など全く紹介されておらず、使ってみた系の記事もほとんどないわけですから、内心ドギマギしながら導入したのはここだけの話...。
bwip-jsをVueアプリケーションに組み込んでみる
では実際にVue.jsに組み込んでみましょう。
前提条件
macOS Monteray 11.x
Vue2.X
今回はあくまでも最小限の構成で簡易的に実装してみます。
Vue.jsのプロジェクトを立ち上げるところから、という人は公式サイトなどを参考にどうぞ！
まずはbwip-jsプラグインのインストールから。
@以降のバージョン指定をしないと最新版がインストールされます。
yarn
yarn add bwip-js@3.0.1
npm
npm install bwip-js@3.0.1
ちゃんとインストールできているか package.json を確認しましょう。
"dependencies": {
"bwip-js": "^3.0.1",
},
アプリケーションの機能として開発後も必要なため、こんな感じにdependenciesに追加されていれば成功です（npm v5.xから--saveオプションがデフォルトでつくのでしたね）。
実際に適当なVueのテンプレートファイルに以下のような生成コードを記述します。今回、画像の表示はcanvasAPIを使って、最小限の構成でやってみます。
bwipjs.toCanvas(canvas, {}) の中にバーコード画像の各種設定を記述します。
注意点としては、規格ごとにtextに指定できる文字や桁数に制限があるので、ちゃんと確認してから指定しましょう。
HelloVarcode.vue
<template>
<div class="container">
<img id="mycanvas" src="" alt="" />
</div>
</template>
<script>
import bwipjs from "bwip-js";
export default {
data() {
return {};
},
mounted() {
let canvas = document.createElement("canvas");
try {
bwipjs.toCanvas(canvas, {
bcid: "code128", // バーコード規格（必須）
text: "0123456789", // バーコードに持たせたいテキストデータ（必須）
scale: 3, // 生成画像の拡大率（任意）
height: 10, // 生成画像の高さをインチで指定（任意）
includetext: true, // バーコードの元のテキストデータを画像の下に表示するか（任意）
textxalign: "center", // 生成画像におけるバーコードの位置を指定（任意）
});
document.getElementById("mycanvas").src = canvas.toDataURL();
} catch (e) {
console.error(e);
return;
}
},
</script>
その他、対応規格のキーはこちら！ もっと細かい設定値についてはこちらをどうぞ。
もちろん、次のようにバーコードに持たせたいテキストデータを動的に変更することも可能です。
こちらの方がより実践的でしょう。
さらに検知機構を持たせるためにsetを使うように改良を加えました。
HelloVarcode.vue
<templete v-if="barcode_src && barcode_src.length > 0">
<div v-for="item of barcode_src">
<img :src="item" alt=""/>
</div>
</template>
<script>
import bwipjs from "bwip-js";
export default {
data() {
return {
barcode_src: [],
BarcodeList: [
{
codeType: "code128"
codeData: "0123456789"
},
{
codeType: "code128"
codeData: "9876543210"
},
]
};
},
async created() {
await this.createBarCode();
},
methods: {
async createBarCode() {
for (let item of this.BarcodeList) {
let canvas = await document.createElement("canvas");
try {
bwipjs.toCanvas(canvas, {
bcid: item.codeType,
text: item.codeData,
scale: 3,
height: 15,
});
this.$set(item, "barcode_src", canvas.toDataURL());
} catch (e) {
console.error(e);
return;
}
}
},
}
}
最後に
いかがだったでしょうか？少しでもあなたの開発の参考になれば嬉しいです！
まだまだVueを始めたばかりなのでツッコミどころがたくさんあると思います。そんな時は、ぜひコメント欄にアドバイスをいただけたら幸いです。
今日はここまで！
Discussion