QRコードの表示 | intra-mart Developer Site

QRコードの表示

投稿日：2011-03-01 更新日：2016-05-23

こんにちは、開発本部の榎本です。

intra-mart上での画面開発において、QRコードを利用したいという場合があるかと思います。
今回はhttp://www.d-project.comから配布されているQRコードライブラリ(MITライセンス)を利用したサンプルをご紹介します。

1. http://www.d-project.comからQRコードライブラリ(java)をダウンロードしzipファイルに含まれるqrcode.jarを、%IMART%/doc/imart/WEB-INF/lib配下にコピーします。

2. 今回はimartタグでQRコードを出力します。
以下のようなタグによる利用を考えます。

<imart type="qrcode" value=$value />
または
<imart type="qrcode" value=$value cellSize="3" margin="2" />

または

3. imartタグを作成します。
%IMART%/pages/src配下にqrcode/tag.jsファイルを作成します。

function qrcode(attr, inner){
  var value = attr.value || '';
  var cellSize = !isNaN(attr.cellSize) ? parseInt(attr.cellSize, 10) : 2;
  var margin = !isNaN(attr.margin) ? parseInt(attr.margin, 10) : 0;

  var q = Packages.com.d_project.qrcode;
  var qrcode = q.QRCode.getMinimumQRCode(value, q.ErrorCorrectLevel.H);
  qrcode.make();

  var filePath = 'qrcode/' + Identifier.get();
  try{
    var out = new java.io.ByteArrayOutputStream();
    Packages.javax.imageio.ImageIO.write(qrcode.createImage(cellSize, margin), 'gif', out);
    new Packages.jp.co.intra_mart.foundation.service.client.file.NetworkFile(filePath).save(out.toByteArray());
  }catch(e){
    return 'error: ' + e.message;
  }

  return Imart.compile('').execute();
}

function qrcode(attr, inner){

var value = attr.value || '';

var cellSize = !isNaN(attr.cellSize) ? parseInt(attr.cellSize, 10) : 2;

var margin = !isNaN(attr.margin) ? parseInt(attr.margin, 10) : 0;

var q = Packages.com.d_project.qrcode;

var qrcode = q.QRCode.getMinimumQRCode(value, q.ErrorCorrectLevel.H);

qrcode.make();

var filePath = 'qrcode/' + Identifier.get();

try{

var out = new java.io.ByteArrayOutputStream();

Packages.javax.imageio.ImageIO.write(qrcode.createImage(cellSize, margin), 'gif', out);

new Packages.jp.co.intra_mart.foundation.service.client.file.NetworkFile(filePath).save(out.toByteArray());

}catch(e){

return 'error: ' + e.message;

}

return Imart.compile('').execute();

}

4. %IMART%/conf/system-install-qrcode.xmlファイルを作成し、3で生成したタグを登録します。

<?xml version="1.0" encoding="UTF-8"?>
<system-install>
<jssp-tag>
<tag-script>qrcode/tag#qrcode</tag-script>
</jssp-tag>
</system-install>

<?xml version="1.0" encoding="UTF-8"?>

<system-install>

<jssp-tag>

<tag-script>qrcode/tag#qrcode</tag-script>

</jssp-tag>

</system-install>

5. 実際に動かしてみます。

携帯で読み取りもできました!!

上記の例では、QRコードを毎回生成しています。
同じ値のQRコードであればQRコードの生成をせず、再利用する等の工夫を行うとよりパフォーマンスが良くなるはずです。

今回作成したコードを手直ししたもの一式が下記リンクより入手可能です。
スクリプト開発モデルだけでなく、JavaEE開発モデルでも利用出来るようになっています。

im_qrcode_tags.zip

intra-martでは、このような形で簡単にタグの拡張を行うことが可能です、ぜひご活用ください!