ナガモト の blog

Full Cycle Developerを目指すエンジニアが有用そうな技術記事や、ポエムのようなよしなしごとを投稿するブログです。

Angularアプリにバーコードを表示する ~package選定編~

先日次のような記事を書きました。 ngmt83.hatenablog.com

今度はQRではなく1次元バーコードの表示をすることになりました。やりたいことはシンプルですが「Angular + barcode」という情報があまり揃っていなかったため、技術選定に少しだけ苦労しました。

方針

ある値(文字列)をバーコードで表示するというのは汎用的な機能であるため、スタンダードとなるpackageがあるはずだと考え、それを探して採用する方針でした。

要件

  • Angularアプリに組み込める
  • code128規格のバーコードが表示できる
  • いずれ他の規格のバーコードを表示したくなる可能性がある
  • svg形式で表示できるとなお良い

調査

Angular, barcode, generator, javascript

といったワードで検索しました。コツはQRやreaderをうまく除外することです。特にQRコードリーダーの情報が多く、私にとってはノイズでした・・・

候補

早速調査をして候補を3つ上げました。

それぞれ比較・検討していきます。

ngx-barcode - npm

github.com Angularから使用しやすくしたpackageです。ドキュメントは充実しているわけではありませんが、簡単に使えそうです。

不安なのは2年前から更新されていないことです。

angular-barcode - npm

github.com 同じくAngularから使用しやすくしたpackageです。ドキュメントは充実しているわけではありませんが、使用例にオプション設定まで細かく書いてあったので使い方はすぐわかりました。

こちらも2年前から更新されていないことが不安要素です。

jsbarcode - npm

github.com Angularを想定しているものではなく、環境を選ばないシンプルなpackageのようです。1年以内に更新があります。

barcode関連の最大手packageと言えるほどの人気です。*1*2ユーザが非常に多く、ドキュメントも充実しています。デモまであって至れり尽せりです。*3

決定

3つを比較していたのですが、そもそもngx-barcode, angular-barcodeはJsBarcodeに依存*4*5しており、JsBarcodeをAngularから使いやすいようにラップしたpackageのようでした。

とすると実現できることはどれもJsBarcode以下で、使い方やオプションを調べるときは結局JsBarcodeを参照することになりそうです。

また、ラップした2つは更新頻度が低いです。バーコードの規格はそう変わらないという点では更新がないのも自然ではあります。しかし更新頻度の高いAngularとの組み合わせを考えると不安です。

以上よりJsBarcodeを利用することに決定しました。

f:id:ngmt83:20190531073357p:plain
JsBarcodeのデモで作成したバーコード

予告

AngularアプリにおいてJsBarcodeを用いたバーコード表示方法を投稿する予定です。