表題の通りの結果が得られたので簡単に記録に残します、
そもそもUSBバーコードリーダーを買った動機
会社でのパソコンやモニタといった資産には、資産番号と共に資産管理用のバーコードが付与されているのですが、日常の資産棚卸の際には、目視で資産番号を確認し、管理エクセルから探すといったことをしなればならなく、とても面倒に感じていました。
その時にUSBのバーコードリーダってあるけど、それで読み取った結果をシュッと扱いことができれば非常に楽になるのでは？と思い調べ始めたところ、「USBバーコードリーダーは外部キーボード扱いとして認識され、読み取り結果がキー入力として受け取れる」ということがわかりました。 つまり、USBとして接続すれば何も特別な設定も必要もなく認識され、また、読み取った結果も専用のソフトやSDKも必要がなくキー入力として受け取れるので、非常に扱いやすいデバイスとなりそうです。
早速買ってみた
Amazonで調べた見たろころ、１次元のバーコードを読み取れるものであれば２０００円台で買うことができそうであることが分かった。 実際に接続したらキーボードとして認識されるかどうかが商品情報からはよくわからなかったが、レビューの記載からそれっぽく振舞いそうという不確かな情報を基に買ったのが以下。
届いたので使ってみた
外見はかなりオモチャ感がある印象ですが、さっそく繋いで、テキストエディタを開きバーコードを読み取らせてみました。
おー！バーコード+改行が挿入される。 pic.twitter.com/Y29IX0BBfC
— STC (@stc1988) 2019年12月12日
期待通りに読み取り結果をキー入力として受け取れました。 また、読み取り後に改行が付与されるので、連続して読み取った場合にも１行ずつ入力されることとになります。 冒頭の動機として書いたエクセルのようなスプレッドシートとの相性も良さそうです。
あと、これは試していないのですが、バーコードリーダ自体の設定は、付属する冊子に設定用のバーコードがあるので、それを読み取ることで設定を変えることができます。そのため、やはり専用のソフトとかは不要になります。
読み取ったバーコードから書籍情報を取得するやつを書いた
前述までの通り、当初の目標である管理エクセルでいい感じに使用できそうなことが分かった。 ここでは、自作のプログラムから扱う方法のサンプルを書いてみた。
結果が分かりやすいく、かつ、手軽に実装できそうなものとして、Javascript(+Vue.js)を使ってみることにした。 といってもキー入力を受け取るだけなので、テキストボックスで読み取り結果を文字として受け取り、それをトリガーにするだけである。
今回は以下openBDというAPIを使って、読み取ったバーコード番号(ISBN)から書籍情報を得るというものを書いた openbd.jp
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" autofocus v-model="input" v-on:keyup.enter="onKeyupEnter"> <div>バーコード:{{barcode}}</div> <hr> <div>タイトル:{{title}}</div> <hr> <div>著者:{{author}}</div> <hr> <img v-bind:src="cover"> </div> </body> <script type="text/javascript"> new Vue({ el: "#app", data: { input: "", barcode: "", title: "", author: "", cover: "", }, methods: { onKeyupEnter: function() { fetch("https://api.openbd.jp/v1/get?isbn=" + this.input) .then((response) => { return response.json(); }) .then((data) => { if( data[0] === null ) { this.input = ""; this.barcode = "エラー"; return; } this.barcode = data[0].summary.isbn; this.title = data[0].summary.title; this.author = data[0].summary.author; this.cover = data[0].summary.cover; this.input = ""; }) } } }) </script> </html>
大まかにやっていることは以下通り、 1. テキストボックスにフォーカス時に、バーコードを読み取ると結果がテキストボックスに入力される 2. 上記入力の末尾に改行を受け取るので、EnterキーイベントをトリガーにopenBDのAPIを叩く 3. 叩いた結果から得られた書籍情報を画面に表示する
実際に動かしてみるとサクッと動きました。
ISBNから書籍情報取得できるAPIを叩いて表示するのが作れた。
— STC (@stc1988) 2019年12月12日
キーイベント処理するだけなので、vueを使って5分ぐらい。 pic.twitter.com/nVkqbhiZSd
終わりに
今時ならライブラリ等を駆使して、カメラから画像からバーコード認識させるところでしょうが、キー入力は非常に慣れ親しんだインターフェースで、容易に扱うことができました。
また、バーコード自体を生成するライブラリも巷には存在しますが、エクセルでも生成することができます（具体的な方法は「絵エクセル バーコード生成」とかで調べてください）ので、使用できるソフトウェア・ツール類が制限されている環境でもバーコードは扱いやすい入出力インターフェースという認識ができました。
