まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:qrcode

QR コード生成サービスを作ってソースコードごと公開してみました:
https://dotnsf.github.io/qrgenerator/

2021091203



同じようなコンセプトのサービスは世に多くあることを知っていますが、自分が作ったものは以下のような特徴を持ってます。便利に感じた方はぜひ使ってみてください。
  • (静的コンテンツだけで構成される)Github ページで公開している。バックエンドサービスが使えない形で公開しているので、実は裏で URL を集めている、といった心配は無用
  • 単に情報を QR コード化するだけのサービスではなく、考えつく限りの以下のようなカスタマイズを可能にしている

カスタマイズできる内容は以下の通りです:
・内容(テキスト、URLなど ここはカスタマイズできて当然)
誤り訂正レベル(デフォルトは M(約15%))
・生成する画像のサイズ(デフォルトは 512x512)
・前景色(デフォルト値は黒)
・背景色(デフォルト値は白)
・画面中央にロゴのように含める画像(デフォルトなし 誤り訂正レベルに応じて自動拡大縮小)


たとえばこんな感じにマンホールマップの URL と画像を設定して「生成」をクリックすると、
2021091201


指定された通りの QR コードがこんな感じで作成されて、
2021091202


「画像ダウンロード」をクリックすると、生成された QR コードを画像としてダウンロードできます:
1631428093716

細かい仕様としては、生成された QR コード部分をクリックすると情報テキストがクリップボードにコピーされます。上の例だと "https://manholemap.juge.me/" がクリップボードにコピーされるので、ブラウザのアドレス欄にペーストするだけでマンホールマップに遷移できるようになる、というわけです。


カスタマイズできる内容のうち、誤り訂正レベルについては自分も知らなかったので解説を加えておきます。

QR コードは紙やビニールといった「クシャクシャになったりして、そもそも印刷内容が平らに見えない可能性がある媒体に印刷して使う」可能性があることを考慮した仕様になっています。それが誤り訂正レベルです。QR コード自体を冗長化する形で作成して、画面の一部が読み取り不可な状態になっていても含まれている情報を認識できるようにするためのものです。

これが誤り訂正レベルで、QR コードでは4段階(H(約30%), Q(約25%), M(約15%), L(約7%))用意されています。H だと全体の30%が読み取り不可になっていても大丈夫、という意味ですが、QR コード自体が他よりも細かなものになります。ちなみに以下はどちらも "https://manholemap.juge.me/" の QR コードですが、左は誤り訂正レベル H 、右は Q です。白黒の細かさの違いがわかると思います:
Q


そのため最終的な印字サイズが小さいと読み取り自体が難しくなったりします。どの誤り訂正レベルを選ぶかは(真ん中にロゴ画像を含めるかどうかにも関わりますが)試行錯誤しながら読み取れそうなものを作りながら選ぶ必要があると思っています。

ちなみにソースコードはこちらです。裏で URL を保存してたりしない証拠としてこちらも公開しておきます:
https://github.com/dotnsf/qrgenerator


よかったら使ってください。


バックエンドの技術を使わずにウェブのフロントエンドだけで、つまり HTML と JavaScript だけで QR コードリーダーを作ることに挑戦してみました:
smartphone_qr_code


まずは完成品で実際の挙動を確認ください。PC またはスマホで(できればスマホで)こちらの URL にアクセスしてください:
https://dotnsf.github.io/web_qrcode/

2021012501



↑Github Pages で公開しているページなので、フロントエンドだけで作られていることがわかると思います。クロスオリジンな AJAX なども使ってないので、興味ある方はソースコードも確認してください。

「ファイルを選択」ボタンをクリックします。スマホの場合はカメラが起動するので QR コードを撮影してください。また PC の場合は画像選択ボックスが表示されるので、QR コードが撮影された画像を選択してください。

すると画面下部に画像が表示され、同時に画面内の QR コードが(存在していれば)解析され、解析結果の文字列データが表示されます:
2021012502


フロントエンドだけでここまでできるので、後は例えばこの結果が URL 文字列になっていれば、そのアドレスのページを開くこともできますし、テキストデータだけを読み取った上でバックエンドサーバーにデータを送信する、といったサーバーとの連携処理も容易に可能です。


【ソースコードの解説】
ソースコードはこちらで MIT ライセンスで公開しています(GitHub のウェブホスティングである Github Pages を使ってそのままサービスも公開しています):
https://github.com/dotnsf/web_qrcode

特にサービスの肝である index.html ファイルはこちらから参照いただけます。実質的にこの1ファイルだけでカメラ起動から撮影、QR コード解析まで実現しています:
https://github.com/dotnsf/web_qrcode/blob/main/index.html


まずスマホでカメラを起動するボタンの部分は以下の HTML コードで実現しています(PC ブラウザでこのボタンをクリックすると、保存済みの画像ファイルを選択するダイアログが表示されます):
<input type="file" accept="image/*" capture="camera" name="file" id="file-image"/>

type="file" で accept="image/*" capture="camera" 属性のついた <input> タグをクリックすると、カメラ内蔵機種の場合はそのカメラが起動し、撮影した画像を選択したことになります。(PCのなど)カメラ内蔵機種でない場合は普通にファイル選択画面になりますが、accept 属性により画像ファイルしか選択できません(要するにここで QR コードを撮影するか、QR コードが撮影された画像を選択することを想定しています)。

また jQuery を使った JavaScript によって以下の処理が画面ロード直後に実行されています:
var canvas = null;
var ctx = null;
$(function(){
  canvas = document.getElementById( 'mycanvas' );
  ctx = canvas.getContext( '2d' );

  var file_image = document.getElementById( 'file-image' );
  file_image.addEventListener( 'change', selectReadFile, false );
});


HTML 内下部に設置された <canvas> と、そのコンテキストを取得します(この <canvas> に画像が描画されることになりますが、その処理は後述します)。また上述の <input> タグの値が変化した時(=カメラで撮影するか、画像ファイルが選択された時)に selectReadFile() 関数が実行されるよう定義されています:
<div>
  <canvas id="mycanvas"></canvas>
</div>

したがってカメラで撮影するか画像ファイルを選択すると、以下の JavaScript コードが実行されます:
function selectReadFile( e ){
  var file = e.target.files;
  var reader = new FileReader();
  reader.onload = function(){
    readDrawImg( reader, canvas, 0, 0 );
  }
  reader.readAsDataURL( file[0] );
}

HTML5 の Filesystem API を使って撮影された画像ファイルを読み込み、その内容を上述で取得した <canvas> に描画するための関数 readDrawImg() が実行されます。つまり撮影した画像が画面内にも表示されるようになります。

readDrawImg() 関数および、この中で実行される多くの関数の中身は以下のようになっています:
function readDrawImg( reader, canvas, x, y ){
  var img = readImg( reader );
  img.onload = function(){
    var w = img.width;
    var h = img.height;
    printWidthHeight( 'src-width-height', true, w, h );

    // resize
    var resize = resizeWidthHeight( 1024, w, h );
    printWidthHeight( 'dst-width-height', resize.flag, resize.w, resize.h );
    drawImgOnCav( canvas, img, x, y, resize.w, resize.h );
  }
}

function readImg( reader ){
  var result_dataURL = reader.result;
  var img = new Image();
  img.src = result_dataURL;

  return img;
}

function drawImgOnCav( canvas, img, x, y, w, h ){
  canvas.width = w;
  canvas.height = h;
  ctx.drawImage( img, x, y, w, h );

  checkQRCode();
}

function resizeWidthHeight( target_length_px, w0, h0 ){
  var length = Math.max( w0, h0 );
  if( length <= target_length_px ){
    return({
      flag: false,
      w: w0,
      h: h0
    });
  }

  var w1;
  var h1;
  if( w0 >= h0 ){
    w1 = target_length_px;
    h1 = h0 * target_length_px / w0;
  }else{
    w1 = w0 * target_length_px / h0;
    h1 = target_length_px;
  }

  return({
    flag: true,
    w: parseInt( w1 ),
    h: parseInt( h1 )
  });
}

function printWidthHeight( width_height_id, flag, w, h ){
  var wh = document.getElementById( width_height_id );
  wh.innerHTML = '幅: ' + w + ', 高さ: ' + h;
}

まず readImg() 関数の中で Filesystem API を用いて画像ファイルを読み込み、その結果を Image オブジェクトの src 属性に代入します(これで Image オブジェクトを drawImgOnCav() 関数で <canvas> に表示すると読み込んだ画像が表示されます)。またこの結果から画像の幅および高さを取得して、画面内に元画像のサイズとして表示されます。

drawImgOnCav() 関数の最後に checkQRCode() 関数が実行されています。画像の <canvas> への描画終了後にこの関数が実行され、画像に QR コードが写っていたらその内容を解析して、データを取り出します:
function checkQRCode(){
  var imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height );
  var code = jsQR( imageData.data, canvas.width, canvas.height );
  if( code ){
    //console.log( code );
    alert( code.data );
  }else{
    alert( "No QR Code found." );
  }
}

具体的にはコンテキスト変数(ctx)から getImageData() 関数でイメージデータを取得し、その結果を jsQR を使って解析します。ややこしそうな QR コードの解析部分は実はライブラリによって一瞬で実現できてしまっています。jSQR バンザイ!

正しく QR コードが解析できた場合は解析結果の文字列(code.data)を alert() 関数で画面に表示し、解析できなかった場合は "No QR Code found." と表示される、という一連の処理が定義されています。


今回の処理では QR コードが正しく解析でした場合はそのまま表示しているだけですが、これが URL であればロケーションに指定してジャンプしてもよし、テキストなどのデータであればバックエンドの API にポストしてもよし、というわけで取り出したデータの使いみちは alert() の代わりに記述することで、自由に応用できると思います。


というわけで、Filesystem API と jsQR と <input> タグのカメラ拡張を使うことで、ウェブのフロントエンド技術だけで QR コードリーダーが実現できました。


ウェブアプリケーションで QR コードを表示したくなることがあります。スマホを持っている人にその場でとあるURLにアクセスしてもらったり、文字列などの情報を送るのに便利な方法だと思っています。

そんな機能が必要な場合、自分は jquery.qrcode.js を使っています。ブラウザの JavaScript(jQuery)だけで文字列の QR コードを簡単に生成することができます。サンプルページを用意したので、こちらで試すとわかりやすいと思います:
https://dotnsf.github.io/jquery_qrcode/

2020110601


画面最上部のテキストフィールドに URL や文字列を入力し、青いボタンを押すと入力した文字列から QR コードを生成して表示する、というものです。この部分は以下のようなコードで実現しています:
  :

<script src="./qrcode.min.js"></script>

  :

<div class="container">
  <input type="text" id="text" value=""/><button class="btn btn-primary" onClick="generateQRCode();">QRコード</button>
</div>

<canvas id="qrcode"></canvas>

<script>
var text = '';


function generateQRCode(){
  $('#qrcoe').html( '' );
  text = $('#text').val();
  if( text ){
    QRCode.toCanvas( document.getElementById( 'qrcode' ), text, function( err ){
      if( err ){
        console.log( err );
      }
    });
  }
}

  :

まず QR コードを描画するための <canvas> タグ(id="qrcode")を用意します。そしてボタンがクリックされるとテキストフィールドの値を取り出し、<canvas> の id を指定して QRCode を描画する、というシンプルなものです。これだけで QR コード化が実現できます。

文字列や URL を読み取らせたい対象者がスマートフォンユーザーだけであればこれだけで最小限必要な機能は実現できます。問題は対象者の中に PC ユーザーがいて、PC ユーザーにもこの URL や文字列を提供したい場合です。PC からは QR コードを読み取れない人が多数だと思うので直接メッセンジャーやメールなどで文字列や URL を送ればいいのですが、では逆に QR コードで表示されている文字列を取り出す便利な方法はないでしょうか? 上記サンプルの場合は QR コード化する文字列をテキストフィールドに指定しているのでテキストフィールドから取り出せばいいのですが、そういうケースばかりではありません。 以下は「QR コード部分をクリックした時に、その文字列をクリックボードにコピーする」ためのコードを加えました。これによってクリップボードからペーストするだけでメッセンジャー等で送れるようになり、UI的にも楽だと思ったのでした。 加えて、QR コード部分をクリックした際に「クリック感」というか「押された感」が出るような、一瞬だけ影ができるような視覚効果を加えてみました。

最終的なコードはこのようになりました:
  :
<script src="./qrcode.min.js"></script>

<style type="text/css">
html, body{
  text-align: center;
  background-color: #fafafa;
  font-size: 20px;
  color: #333;
}
#qrcode:active{
  border: 1px solid #334c66;
  background-color: #69c;
  -webkit-box-shadow:inset 0px 0px 8px #334c66;
  -moz-box-shadow: inset 0px 0px 2px #3a6da0;
  box-shadow: 0px 0px 2px #3a6da0;
}
</style>
</head>
<body>

<div class="container">
  <input type="text" id="text" value=""/><button class="btn btn-primary" onClick="generateQRCode();">QRコード</button>
</div>

<canvas id="qrcode"></canvas>

<script>
var text = '';

$(function(){
  $('#qrcode').on( 'click', function( e ){
    copyClipboard( text );
  });
});

function generateQRCode(){
  $('#qrcoe').html( '' );
  text = $('#text').val();
  if( text ){
    QRCode.toCanvas( document.getElementById( 'qrcode' ), text, function( err ){
      if( err ){
        console.log( err );
      }
    });
  }
}

function copyClipboard( str ){
  //. 空 div と空 pre
  var tmp = document.createElement( 'div' );
  var pre = document.createElement( 'pre' );

  pre.style.webkitUserSelect = 'auto';
  pre.style.userSelect = 'auto';
  tmp.appendChild( pre ).textContent = str;

  //. 画面外へ
  var s = tmp.style;
  s.position = 'fixed';
  s.right = '200%';

  //. body に追加
  document.body.appendChild( tmp );
  document.getSelection().selectAllChildren( tmp );

  //. クリップボードにコピー
  var result = document.execCommand( "copy" );

  //. 要素削除
  document.body.removeChild( tmp );

  return result;
}
</script>

  :

QR コード化したテキストの内容を変数 text に保存しておき、id="qrcode" のキャンバスがクリックされた時に text の値をクリップボードにコピーする、という内容を加えています。また視覚効果としてクリックされた時だけ有効になる #qrcode:active 要素を定義し、影をつけるなど見た目に変化を加えています。


まだコードに手を加えることもあり、開発中ゆえの不安定さもあるのですが、一応一通りの機能が動く状態になったのでサービスを公開します(2020/05/19)。


自作のお絵描き共有サービス MyDoodlesNintendo Switch の人気アプリ「あつまれ どうぶつの森」のマイデザイン化するための機能を実装しました。とりあえずは手持ちの Windows 10 PC および iPhone SE で動作確認しています。


【はじめに】
最初にお断りをしておくと、このサービスの編集機能そのものはそれほど強力ではありません。線の色や太さを選んで描画する以外には、背景色設定と、アンドゥ、リドゥ、リセット程度の機能しかありません。一般的なレタッチアプリのような細かな編集はできませんが、よく言えば「簡単」「気軽」です。小学校低学年程度の子供でも利用できることを想定して開発しています(その割には漢字とかも使ってるけど・・ (^^;)。

また「そもそもなんでこんなツールを作ったのか?」を説明します。「あつまれ どうぶつの森」にはマイデザインを編集する機能が標準で付属していて(ゲーム内でマイルを貯めて機能豊富な Pro エディタを使うことも可)自分の好きなデザインを作ることはできますが、これがちと使いづらいというか何というか・・・だったりします:
EYXVHfAUwAAz0tb


このような状況に対して僕と同じような考えを持っている人が少なからずいるようで、後述のようなより便利にデザインを編集できるサービスがいくつか公開されていたりします。自分も先人達から提供いただいた情報を頼りに、その流れに乗っかる形でサービスを開発してみました。ただ自分の場合はデザインは専門ではなく、自分向けという意味もあるのですが「より自由度高くデザインする」というよりは「より簡単に使える」ことを目指して作ってみました。

なお今回作成したツールでは「指でお絵描き」する作業がありますが、この部分の実現には自分が開発した doodlejs を改良して使っています。この doodlejs の応用で LINE で手書きスタンプを送ったり、大勢でお絵描きをした内容を同時に参照したりしています。応用範囲の大きなライブラリだと思っていて、今回のサービスも doodlejs の応用で実現しています:
2020051901


・・・以上、宣伝コーナーでした(笑)。

では以下で MyDoodles の使い方を説明し、続けてマイデザイン化するための手順を紹介します。


【MyDoodles の使い方】
MyDoodles 自体は PC、スマホ、タブレットのウェブブラウザを使って URL にアクセスすることで利用できます(ただし後述のマイデザイン化する場合は PC のマウスで描画するよりも、スマホを使って指で描画する方が簡単だと思っています。以下のスクリーンショットもスマホでのものを中心に紹介します):
https://mydoodles.mybluemix.net/



アクセスすると以下のような画面が表示されます:
2020051900



それぞれ以下のような役割を持っています:
2020051901


タイトル絵のタイトル
履歴同一端末で過去に保存した絵を呼び出す
線の色描画する線の色
線の太さ描画する線の太さ
背景色タップすると「線の色」で指定された色をキャンバスの背景色にする
キャンバスここにお絵描きを描画します
アンドゥ1ストローク戻る
リセットキャンバスを初期状態に戻す
保存キャンバスのお絵描きを保存する
リドゥ(アンドゥ後に)1ストローク進める



タイトル欄には絵のタイトルを入力します。後述のマイデザインにする場合、ここで指定した内容が絵のタイトルにもなります:
2020051902


キャンバス画面を使って指で絵を描いていきます(PC を使っている場合はマウスやペンタブレットが使えます。タッチスクリーン対応の PC であれば画面に直接指でスクリーンに描くこともできます)。なお後述のマイデザイン化を想定する場合はあまり細い線で描いても最終的に潰れてしまう可能性が高い(マイデザインは 32x32 サイズ)ので、太さ 10 以上の線で描くことをおすすめします。また PC ブラウザを使う場合は線の太さに加えて、なるべくキャンバス部分が正方形になるようウィンドウサイズを調整してから描くことを推奨します(マイデザインが正方形のため):
2020051903



最後に「保存」ボタンをクリックするとお絵描き内容が保存されます:
2020051907



保存されたお絵描き内容が表示されます:
2020051905


この画面から Twitter や facebook などの SNS にシェアすることができるようになり、シェアされた他の人も同じ画像を見ることができるようになります。なお同一端末(お絵描きを描いて保存した時に使っていた端末)からこの内容を表示している場合のみ、画面右上に「再編集」ボタンが表示され、このお絵描き内容を元に編集を続けることもできます。また「自分も試す!」ボタンはこのページをシェアされて見た人が自分でもお絵描きを試せるよう新規作成画面へ案内するボタンです:
2020051906


加えて、これはあまり使われない機能であると想定していますが、過去作品履歴情報の他機種への引っ越し機能も一応用意しています。手順はこのブログの一番下※に記載しておきます。


基本的なお絵描き共有サービスの機能は概ねこんな感じです。これはこれで簡単にお絵描きして、簡単に SNS でシェアできる、というものだと思っています。


【どうぶつの森 マイデザイン化】
MyDoodles サービスを使って作ったお絵描きの内容を「あつまれ どうぶつの森」のマイデザインとして取り込む手順を紹介します。なお、こちらの手順はお絵描きの作者本人だけでなく、シェアされたお絵描きページを見ている全ての人が実行可能です。またこの手順はスマホで行う必要はなく、(シェアされたお絵描きページの URL がわかっていれば)PC などから行うこともできますし、その方が楽だと思っています。

まず、この機能を使ってマイデザインを取り込むには Nintendo Switch Online アプリをスマホにインストールし、デザインを読み取る人のアカウントで初期設定しておく必要があります。あらかじめご用意ください:
2020051903



改めてお絵描き内容をマイデザイン化するまでの手順を紹介します。MyDoodles サービスのお絵描きページを表示して、そしてその中の「QR コード」ボタンをタップします:
2020051901


すると画面内にお絵描き内容の情報を含む QR コードが表示されます:
2020051902


この QR コードを Nintendo Switch Online アプリの「あつまれ どうぶつの森」サービス内「タヌポータル」の「マイデザイン」から読み込みます:
2020051904


この手順を実行するには上述の QR コードをスマホの Nintendo Switch Online アプリを起動して読み取ることになります。したがってNintendo Switch Online アプリをインストールしたスマホとは別のスマホや方法で上記 QR コードを表示する必要があります。別のスマホや PC を使って MyDoodles から表示するか、 QR コードの内容をスクリーンショットで撮影して別途写真共有サービスなどを使うなどして、Nintendo Switch Online アプリのタヌポータル「マイデザイン」から生成された QR コードを読み込んでください:
2020051905


正しく QR コードが読み取れると以下のような確認画面になります(32x32 に縮小された結果、どの程度潰れてしまうかを確認できると思います)。読み込む場合は「保存」します:
2020051906


これで MyDoodles で描いたお絵描き内容が「あつまれ どうぶつの森」から取り込めるようになりました:
2020051907


ここから先は「あつまれ どうぶつの森」を実際に起動して行う操作となります。


「あつまれ どうぶつの森」を起動後に、(ゲーム内の)スマホを取り出し、「マイデザイン」を選択します:
2020051908


マイデザインの一覧が表示されている画面で「ダウンロード(+ボタン)」を選択し、インターネットに接続して「ダウンロード」を選択します:
2020051900


上述の作業で QR コードから取り込んだデザインがダウンロードされます。ダウンロードする先のデザイン(白紙のデザインか、上書きしてよいデザイン)を選んで保存します:
2020051901


MyDoodles で作ったお絵描きがマイデザインとして保存されました:
2020051902



現在の仕様では保存したマイデザインは「あつまれ どうぶつの森」の中では再編集することはできませんが、トップスとして身につけたり、地面に敷いたりする、等といったことができるようになります:
2020051903


2020051909



と、以上が MyDoodles サービスの簡単な使い方、およびマイデザイン対応の手順となります。繰り返しますが凝ったデザインを描くためのツールというよりは、気軽にお絵描きしたものがゲーム内で使えることを主目的としている点をご了承ください。


なお、このツール(のマイデザイン対応)の開発をするにあたり、以下のサイトの情報を大変参考にさせていただきました。ありがとうございます。 特に「ドット絵ナニカ」は画像を指定してマイデザインを作る、というもので、凝ったデザインを作りたい人にとっては(デザインツールで凝った画像を作って変換すればよいので)こちらを使われた方が目的にあっていると思っています:
ドット絵ナニカ
「あつまれ どうぶつの森」のマイデザインのQRコードを写真・画像ファイルから生成する方法





過去作品履歴の引っ越し手順

この MyDoodles では作った作品をシェアして他の人に見せたりすることはできますが、原則として「同一機種で作った作品のみ」履歴一覧から参照して検索したり、再編集することができます。

ただ機種変更などの都合により、ずっと同じ機種を使うことができないことも想定されます。そんな場合にこの引っ越し手順により、他機種へ過去作品履歴を引き継ぐことができるようになります。ただし特に画面サイズの異なる他機種へ引っ越しした場合は、再編集時にうまく表示できなくなります。事実上、参照のみのための引っ越しと考えてください。

引っ越しするには引っ越し元と引っ越し先両方の 機種 ID が必要になります。機種 ID は履歴参照時に表示される赤枠の部分です:
2020051902


引っ越しは①引き継ぎ先指定、②取り込み元指定 の2段階からなります。まず引っ越し元となる機種で①を実行して引き継ぎ先機種の機種 ID を指定し、続けて引っ越し先となる機種で②を実行して引き継ぎ元機種の機種 ID を指定して取り込みます:
2020051903


②までが完了すると、引っ越し元機種からは履歴一覧を見ても過去作品は見えなくなります。



「Java で使えるバーコード読み取りライブラリ」を探していました。

開発の関係で「Java から使える」ことが条件でした。また「QRコード」のライブラリは見かけるけど、いわゆる「バーコード」 のは意外と少ない。そしてバーコードを「生成する」のではなく、バーコード画像を「読み取り」たかった、という条件もあります。 加えてライセンスフリーだといいな、と。

これだけの条件で探すとほとんど選択肢はなく、唯一見つけたのが「ZXing(ゼブラクロッシング)」というライブラリでした。 ZXing は単に JavaSE で使えるというだけでなく、Android SDK からも使えます。また QR コードにも対応していたり、読み書き両方に使えたりと汎用性も高そうです。ZXing はソースファイルで提供されているので、そのビルド方法も含めた利用手順を紹介します。なお最新版(3.0)の ZXing をビルドするには JDK 1.7 以上、および Apache Maven が必要です。 

RedHat Enterprise Linux や CentOS であれば以下のコマンドで JDK1.7 をインストールできます:
# yum install java-1.7.0-openjdk-devel

Apache Maven はこんな感じ:
# cd /etc/yum.repos.d
# wget http://repos.fedorapeople.org/repos/dchen/apache-maven/epel-apache-maven.repo # yum install apache-maven

JDK 1.7 と Maven が用意できたら ZXing をビルドすることができます。まず ZXing のダウンロードページから最新のソースファイルをダウンロードして、zip ファイルを展開しておきます。

と、言いたかったのですが、4月25日現在の最新版(3.0.2-SNAPSHOT)はビルドの途中でエラーになってしまい、なんかよく分からなかったので、僕はこちらの 2.3.0 というバージョンを使いました。

展開後、いくつかのフォルダが出来上がりますが、通常の Java(SE) 環境で利用するには core と javase のライブラリが必要です。そのためこの2つのフォルダで JAR ライブラリを Maven でビルドします:
# cd core
# mvn -DskipTests -Dgpg.skip=true install
→ ./target/ に JAR ファイルができている # cd ../javase # mvn -DskipTests -Dgpg.skip=true install
 → ./target/ に JAR ファイルができている

ビルドでできあがった core-X.X.X.jar と javase-X.X.X.jar(X.X.X 部分は ZXing のバージョン)が必要なライブラリになります。これらを Java のプロジェクト内で利用できるように(例えば WEB-INF/lib/ 以下に)コピーして、これで準備完了。

実際にバーコードをデコードするサンプルも記載しておきます。これはローカルシステムの c:/tmp/sample.jpg にバーコード画像がある場合の例ですが、こんな感じ: 
  String filename = "c:/tmp/sample.jpg";
    :
  try{
    //. 画像読み込み
    BufferedImage image = ImageIO.read( new File( filename ) );
    LuminanceSource source = new BufferedImageLuminanceSource( image );
    BinaryBitmap bitmap = new BinaryBitmap( new HybridBinarizer( source ) );

    //. デコード
    Reader reader = new MultiFormatReader();
    Result result = reader.decode( bitmap );

    //. バーコードフォーマット
    BarcodeFormat format = result.getBarcodeFormat();

    //. バーコードコンテンツ(読み取り結果)
    String text = result.getText();
      :
  }catch( Exception e ){
    e.printStackTrace();
  }
    :





さて問題の認識精度ですが、 、、まあ仕方ないのかな、って感じです。画像にバーコードだけが写っている状態であればまだしも、周囲に関係ない部分が含まれていたりすると認識してくれないケースが多いです。

とはいえフリーで使えるデコードライブラリは他に選択肢がないので、贅沢は言えませんよね。
 

このページのトップヘ