読者です 読者をやめる 読者になる 読者になる

アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

リファレンスより。アプリカンを使ってバーコードリーダーを作ってみよう

アプリカンのリファレンスページではAPIの説明と共に、そのAPIを使うためのサンプルプロジェクトを公開しています。

今回はその中からBarcode APIを使ったバーコードリーダーの作り方を紹介します。

プロジェクトのダウンロード

Barcode | アプリカン | アプリ開発支援プラットフォームにてサンプルをダウンロードをクリックします。

f:id:moongift:20150510221332p:plain

アプリカンにログイン

アプリカン | アプリ開発支援プラットフォームへ行き、右上にある会員登録をクリックします。既に会員登録済みの場合はログインをクリックします。

f:id:moongift:20150510221355p:plain

新規プロジェクト作成

会員登録、ログイン後に表示されるプロジェクト一覧ページにて、新しいプロジェクトを作成ボタンをクリックします。

f:id:moongift:20150510221412p:plain

プロジェクト名は「バーコードデモ」として、対象デバイスは必要なものを選択してください。そして作成ボタンをクリックします。

f:id:moongift:20150510221433p:plain

作成されると、バーコードデモのプロジェクト画面に移動します。

f:id:moongift:20150510221449p:plain

コードのアップロード

プロジェクト画面左にあるアップロードをクリックします。

f:id:moongift:20150510221511p:plain

そしてアップロードと書かれている枠の中に、先ほどダウンロードしたweb.zipをドラッグ&ドロップしてください。

f:id:moongift:20150510221528p:plain

アップロードが完了すると、追加されましたというメッセージが出ます。そして、その下にある公開ボタンをクリックします。

f:id:moongift:20150510221549p:plain

そして公開するボタンをクリックしてください。

f:id:moongift:20150510221604p:plain

更新されました、と表示されれば準備は完了です。

f:id:moongift:20150510221619p:plain

アプリカンシミュレータのインストール

iOSのApp StoreまたはAndroidのGoogle Playにて applican と検索してアプリカンシミュレータをインストールしてください。

f:id:moongift:20150510221634p:plain

アプリカンシミュレータで確認

アプリカンシミュレータを起動すると、まずログイン画面が表示されます。会員登録したログインID、パスワードでログインします。

f:id:moongift:20150510221648p:plain

そうすると登録しているプロジェクトが一覧表示されますので、バーコードデモを選択します。

f:id:moongift:20150510221704p:plain

以下がバーコードデモを開いた画面です。QRコード読み取りボタンをタップすると、QRコードの内容が表示されます。

f:id:moongift:20150510221718p:plain

QRコードはもちろん、通常のバーコードも読み取れます。

f:id:moongift:20150510221733p:plain

コードの説明

バーコードリーダーの処理は次のようになっています。

// js/barcodeSample.js
(function() {
    /*
     * QRコード読み取り
     */
    captureBarcode = function() {
        applican.barcode.captureBarcode(captureBarcodeSuccess, captureBarcodeError);
    };

    /*
     * QRコード読み取り成功時のcallback処理
     */
    function captureBarcodeSuccess(res) {
        var dump = "QRコードを読み取りました。\n";
        dump    += "データ:" + res.codeData + "\n";
        document.getElementById("dumpAreaBarcode").value = dump;
    }

    /*
     * QRコード読み取り失敗時のcallback処理
     */
    function captureBarcodeError(e) {
        var dump = "QRコードの読み取りに失敗しました。\n";
        document.getElementById("dumpAreaBarcode").value = dump;
    }

    /********************* イベント登録 *********************/
    document.addEventListener("deviceready", function() {
        // 「QRコード読み取り」ボタン押下処理
        document.getElementById("barcodeBtn").addEventListener("touchend", captureBarcode, false);
    });
})();

HTML側はボタン(.barcodeBtn)と、その結果を表示するテキストエリア(#dumpAreaBarcode)を配置すればOKです。

実際にバーコードを読み取る処理は以下のコードになります。一つ目の引数がQRコード読み取り成功時、二つ目は失敗時に呼ばれるコールバックになります。

applican.barcode.captureBarcode(captureBarcodeSuccess, captureBarcodeError);

読み取り成功時のコールバック captureBarcodeSuccess は次のようになります。

function captureBarcodeSuccess(res) {
  var dump = "QRコードを読み取りました。\n";
  dump    += "データ:" + res.codeData + "\n";
  document.getElementById("dumpAreaBarcode").value = dump;
}

res.codeDataで結果を受け取れます。


バーコード読み取りはその場にいるユーザと繋がったり、データの受け渡しをする際に便利に使えます。皆さんのアプリの中でもぜひ使って見てください。

アプリカン | アプリ開発支援プラットフォーム