JavaScript(jQuery)でバーコード作成! / バーコードメーカー

2016.12.09
JavaScript(jQuery)でバーコード作成! / バーコードメーカー
バーコードを手軽に作れないかなと検索していたところ、ブラウザ上で作れるのを見つけました。
jQueryのプラグインを利用していますが、JavaScriptだけで実現できるなんて、なんてお手頃なんでしょう。


早速プラグインを使って作ってみました。
下のフォームに数字を入力し、利用するバーコードのコード(JANとか)をポチポチ選ぶと、下の方に表示されます。


今回利用したプラグインは「Barcode coder」です。
jQuery(JavaScript)以外にもPHPやJava(Java)などの言語で利用できます。
ダウンロードは、公式サイトまたは、GitHubから行えます。


■ 利用方法
・JSファイルを読み込む
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="jquery-barcode.js"></script>


・バーコードの表示
<div id="barcode"></div>
$(function(){
$("#barcode").barcode("1234567890123", "ean13");
});

最小コードはこんな感じです。詳しくは、サイトを参照して頂けたらと思いますが、これだけで十分使うことが出来ます。


その昔、バーコードバトラーというゲーム機がありました。
身近なバーコードでバトルが出来る代物ですが、バーコードの読み取りに癖があったのを覚えています。
いまなら、こうやって自作したバーコードをゲームとして遊ぶことも出来そうです。そういえば、ドラゴンスレイヤー英雄伝説(SFC)というゲームもバーコードを使う機能があったなと記憶しています。

今度は、スマホやリーダーで読み込んで何か動きのある物を作ってみたいと思います。
うまくすると、フィギュアやグッズの整理が捗るかも…


□ 関連記事
横三本線(二本線)のハンバーガーメニューを止めました。
「RTFree」用バッチ作成機
CSS3で文字や画像を選択させない様にする。
テキストデータからJavaScript貼付けソースを作る「ぺたたぐ」を作ってみた。
jQuery ダウンロードリスト
.htaccess でアクセス制限をする方法
さくらインターネットで大きいファイルを split を使って分割する方法
ブログのデザインを変えてみました。
にゃ〜〜ん!
JavaScript BASE64 変換
CSS3で文字をぶるぶる震わす!


□ 関連サイト
Barcode coder
バーコードバトラーIIを見つけてきた(ダメにんげんスパイラル!!)
ドラゴンスレイヤー英雄伝説(Wikipedia)

コメント投稿フォーム

 

フィギュア

最近

カテゴリ

カプセルトイ

初音ミク

アーカイブ

RSS Feed RSS Feed Atom Feed TopicXML アイコン
WebBoard

PICUP