テクニカルトピック スグに使えるJava EEアプリ!
~携帯各社のアドレス帳に簡単登録できるQRコードを生成~

1. 概要

JBarCodeを使用したアプリケーションの例として、携帯電話のアドレスデータを格納したQRコードを生成するJSPアプリケーションを紹介します。このアプリケーションは、docomo(NTTドコモ)、au(KDDI)、SoftBank(ソフトバンクモバイル)の携帯電話会社3社の仕様に対応しており、エントリーページでデータを入力すると結果としてアドレス帳QRコードが出力される仕組みです。

作成するアプリケーションの概念図
画像「作成するアプリケーションの概念図」

入力ページで名前やメールアドレスを入力すると、JSPページでは、それらのデータを元にQRコードを作成し表示します。QRコードの作成は、 JBarCodeの担当です。また、JSPページはJBarCodeデザイナで自動生成したコードをカスタマイズし、携帯各社のアドレス帳に登録できるように実装します。
QRコードのデータを電話帳に登録するためのテキスト仕様は、各キャリアごとに決められており一般に公開されています。たとえば、docomo用の仕様は以下のとおりで、この文字列をQRコードとして作成します。

MECARD:N:名前(姓),名前(名);SOUND:半角カナ読み(姓),半角カナ読み(名);TEL:電話番号;EMAIL:メールアドレス;;

各キャリアのQRコード認識の仕様については、公式サイトでご確認ください。

2. 基本的な開発手順

JBarCodeでアプリケーション開発を行うには以下の方法があります。

画像「開発方法の概念図」

① デザイナで定義したバーコードをテンプレートファイルとして外部化し、ソースコードから読み込む方法
② デザイナが自動生成したソースコードを直接編集する方法

①の方法はバーコードの種類やその設定値をまとめて切り替えるのに適しています。一方、②の方法はバーコードの各設定を必要に応じて指定できるという利点があります。実際の開発では、デザイナでバーコードを設計し、細かな調整はコードで行うという手法が多く使われるようです。さらに、プロパティ設定をソースコードだけで完結できるため、本稿は②を選択しています。

3. バーコードのデザイン

JBarCodeには、バーコードをGUI環境で設計するためのバーコードデザイナが付属しています。設計結果はXML形式のテンプレートファイルに保存して利用できるほか、Servlet、JSPスクリプトレット、JSPカスタムタグ、スタンドアロンJavaアプリケーションの各運用形態でのソースコード出力が可能です。

(1)デザイナの外観

デザイナは①メインメニュー、②バーコードプレビュー、③プロパティペインで構成されています。デザイン結果を確認しながらプロパティを設定するだけで、各コードを生成できます。

画像「デザイナの構成」

No 名称 説明
メインメニュー テンプレートファイルの読み込み、保存など各種処理を行います。
バーコードプレビュー 現在編集中のバーコードイメージを表示します。
プロパティペイン バーコードの各プロパティを設定します。

(2)バーコードの選択

まず、プロパティペインでバーコード形式を選択します。ここでは「QRコード」を選択します。

画像「プロパティペインでQRコードを選択」

(3)プロパティの変更

バーコードの幅、高さ、エラー訂正レベルを以下のように設定します。SoftBankの仕様では、エラー訂正レベルにL(Low)をサポートしていないため、M(Medium)を指定しています。なお、QRコードの場合、バーコードの幅と高さのうちどちらか一方の値を設定すると、もう一方の値も自動的に設定されます。

プロパティ名 設定値
バーコードの幅 116px
バーコードの高さ 116px
エラー訂正レベル レベルM(Medium)

画像「プロパティの変更」

(4)バーコードのテスト出力

バーコードリーダーで正しく読み込めるかテストしたい場合には、画像出力の機能が便利です。値プロパティにテスト用の文字列を設定後、[ファイル]メニューの[画像出力]から、PNG形式またはJPEG形式のどちらかを選択します。

画像「テスト出力」

(5)ソースコードを生成する

デザイナのソースコード出力機能を使用してソースコードを生成します。生成できるソースコードの種類は、Servlet、JSPスクリプトレット、JSPカスタムタグ、スタンドアロンJavaアプリケーションの4種類です。ここでは、JSPカスタムタグを選択します。

画像「ソースコードの種類を選択」

なお、ソースコードの保存に使用されるエンコードは、Shift-JIS、UTF-8(デフォルト)、Unicode、EUCのいずれかを選べます。ここではデフォルトのUTF-8とします。

画像「エンコードを選択」

以下のような、JSPカスタムタグが生成されます。

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="jbarcode" uri="/WEB-INF/jbarcode.tld"%>

<html><body>
<jbarcode:jbarcode 
 urlPath="<%=new java.util.Date().getTime() + ".png"%>"
 format="png"
 type="QRCode"
 value="12345"
 valueEncode="shift_jis"
 barSize="116px, 116px"
 fontName="Dialog"
 fontStyle="plain"
 fontSize="12"
 backColor="0xffffff"
 foreColor="0x000000"
 optionQRCodeModel="Model2"
 optionQRCodeErrorLevel="M"
 optionQRCodeVersion="-1"
 optionQRCodeMask="Auto"
 optionQRCodeConnection="false"
 optionQRCodeConnectionNo="0"
/>

</body></html>

4. アプリケーションの実行

(1)各ページファイルの作成

データ入力用のHTMLファイルとQRコード表示用のJSPファイルを新規に作成します。

データ入力ページの作成

キャリア、名前、名前のカナ読み、メールアドレス、電話番号を入力してもらい、それらをパラメータとして渡すページを作成します。

画像「データ入力ページ」

データ入力ページのソースコード(entry.html)

<html>
<head>
<title>JBarCode Sample</title>
</head>

<body>
<form method="POST" action="result.jsp">
    <table>
        <tr>
            <td style="width: 110px">キャリア選択:</td>
            <td style="width: 262px"><select size="1" name="type">
                <option value="1">DoCoMo</option>
                <option value="2">au</option>
                <option value="3">SoftBank</option>
                </select>
            </td>
        </tr>
        <tr>
            <td style="width: 110px; height: 21px;">名前:</td>
            <td style="width: 262px; height: 21px;">(姓)<input type="text" name="lastname1" size="10" />
                        (名)<input type="text" name="firstname1" size="10" />
            </td>
        </tr>
        <tr>
            <td style="width: 110px">名前カナ読み:</td>
            <td style="width: 262px">(姓)<input type="text" name="lastname2" size="10" />
                        (名)<input type="text" name="firstname2" size="10" />
            </td>
        </tr>
        <tr>
            <td style="width: 110px">メールアドレス:</td>
            <td style="width: 262px"><input type="text" name="email" size="30" />
            </td>
        </tr>
        <tr>
            <td style="width: 110px">電話番号:</td>
            <td style="width: 262px"><input type="text" name="tel" size="20" />
            </td>
        </tr>
    </table>
    <input type="submit" value="作成"/>
</form>
</body>
</html>
QRコード表示ページの作成

入力ページからパラメータとして受け取ったデータをJBarCodeと同じShift-JISでエンコード後、キャリアに応じた登録文字列を作成する処理を記述し、前の手順で生成したJSPカスタムタグコードを追加します。緑字の部分がデザイナで生成したコードです。

また、バーコードタグ内のurlPathプロパティとvalueプロパティを以下のように変更します。

urlPath="<%=new java.util.Date().getTime() + ".png"%>" → urlPath="<%=urlpath%>"
value="12345" → value="<%=value%>"

QRコード表示ページのソースコード(result.jsp)

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="jbarcode" uri="/WEB-INF/jbarcode.tld"%>
<%
  request.setCharacterEncoding("Shift_JIS");
  String value = new String();
  String urlpath = new java.util.Date().getTime() + ".png";
  int type = Integer.parseInt(request.getParameter("type"));

  //DoCoMo
  if(type == 1) {
    value = "MECARD:N:" + request.getParameter("lastname1");
    value = value + "," + request.getParameter("firstname1");
    value = value + ";SOUND:" + request.getParameter("lastname2");
    value = value + "," + request.getParameter("firstname2");
    value = value + ";TEL:" + request.getParameter("tel");
    value = value + ";EMAIL:" + request.getParameter("email");
    value = value + ";;";
  }

  //au, SoftBank
  if(type == 2 || type == 3) {
    value = "MEMORY:¥n"; 
    value = value + "NAME1:" + request.getParameter("lastname1");
    value = value + request.getParameter("firstname1") + "¥n"; 
    value = value + "NAME2:" + request.getParameter("lastname2");
    value = value + request.getParameter("firstname2") + "¥n"; 
    value = value + "MAIL1:" + request.getParameter("email") + "¥n";
    value = value + "TEL1:" + request.getParameter("tel") + "¥n";
  }
%>

<html>
  <body>
    <jbarcode:jbarcode  
      urlPath="<%=urlpath%>"
      format="png"
      type="QRCode"
      value="<%=value%>"
      valueEncode="shift_jis"
      barSize="116px, 116px"
      fontName="Dialog"
      fontStyle="plain"
      fontSize="12"
      backColor="0xffffff"
      foreColor="0x000000"
      optionQRCodeModel="Model2"
      optionQRCodeErrorLevel="M"
      optionQRCodeVersion="-1"
      optionQRCodeMask="Auto"
      optionQRCodeConnection="false"
      optionQRCodeConnectionNo="0"
    />
  </body>
</html>
web.xmlファイルの作成

最後に、ウェルカムページだけを設定した単純なweb.xmlを用意します。今回はServlet 2.4仕様で記述しています。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
    version="2.4">
    <welcome-file-list>
        <welcome-file>entry.html</welcome-file>
    </welcome-file-list>
</web-app>

(2)Webアプリケーションの配布

作成したJSPファイルをWeb上で実行するためにWebアプリケーションを配布します。構成は次のとおりです。

画像「Webアプリケーションの構成」

アプリケーションのコンテキストルート
Tomcatを使用する場合には、Tomcatのインストールフォルダ下のwebappsフォルダに、新たにJBarCodeフォルダを作成します。

WEB-INF/jbarcode.tld
JBarCodeのタイプライブラリを配置します。

WEB-INF/lib/jbarcode.jar
JBarCodeのランタイムJARを配置します。

WEB-INF/web.xml
前の手順で作成したweb.xmlを配置します。

entry.htmlとresult.jsp
前の手順で作成したサンプルコードを配置します。

(3)アプリケーションの実行

作成したWebアプリケーションをアプリケーションサーバーで実行し、Webブラウザでアクセスします。以下のようなページが表示されれば、アプリケーションの作成は成功です。
このページで携帯電話のキャリアを選択し、登録情報を入力後、作成ボタンをクリックします。

画像「成功時に表示されるページ」

入力されたデータをもとに電話帳QRコードが表示されます。このQRコードを利用することで、顧客に自分の連絡先を簡単に登録してもらえるようになります。

画像「作成されたQRコード」

今回は、簡単な開発例なので割愛しましたが、実際の運用にはQRコードに設定可能なキャラクタの種類や文字数などのバリデーション処理が必要です。

なお、リッチな入力インタフェース構築を支援するInputMan for Java EEを利用すれば、プログラムコードをほとんど記述することなく入力制御が行えます。

5. まとめ

JBarCodeを使用したアプリケーション開発について説明しましたが、いかがでしたでしょうか。バーコードの種類を選択したら、値やサイズを設定してわずかなコードを書くだけでバーコードが生成できます。また、各バーコードの規定に関することはJBarCode側で自動調整するため、開発者はバーコード以外のアプリケーション開発作業に注力できます。
製造、流通、医療だけではなく、電子チケットやモバイル地図へのリンク、各種媒体との連動キャンペーンなどのような新しいサービスを展開する場面で、バーコードの必要性はますます高まることが予想されます。そのようなシステムを構築する上で、JBarCodeは欠かせない存在になることでしょう。