By

15分で作るバーコードリーダーアプリ

Scandit でバーコードリーダアプリを作ってみよう

このエントリーをはてなブックマークに追加

はじめまして,CTO の小松 (@isseium)です. 私は都会や田舎問わず人々の文化が溢れる地域がとても好きです.地域の魅力を世界に発信して,世界中の地域と地域ををつなげられるようなことができればと考えています.

ちなみに,家庭菜園を趣味でやっています.一緒に草むしりしたいかたを募集していますのでお気軽に @isseium までお声がけください.草をむしりながらの Tech Talk は格別だと思います!

isseium

さて,今回は初めてのブログ投稿になりますが,なにかかっこいいこと書けと代表に言われましたが,マイペースに最近やったバーコードモジュールを使ったアプリケーション開発の知見をまとめたいと思います.

Titaniumでバーコードリーダーを実装したい

Titanium でバーコードリーダーを実装する必要がありました.
調べてみると scandit というライブラリが Titanium に限らず iPhone/Android/PhoneGap など多くのプラットフォームで支持を受けているようでした.

scanditサイトのスクリーンショット

Scandit とはなにか

Scandit はいわゆるバーコードリーダー機能をアプリに組み込むためのモジュールです.公式サイトの特徴を見ると

  1. コミュニティエディションは無料で使えるよ!!!
  2. 簡単に組み込めるよ!!!
  3. バーコードの認識が早くて信頼性高いよ!!!
  4. クラウドベースの分析機能あるよ!!!(利用者のスキャンデータを集約して,分析を補助してくれるらしいです)
  5. クロスプラットフォームだよ!!!
  6. サポートしっかりしてるよ!!!

とのことでした.モジュールはもちろん,Webサイトもしっかり更新していてぱっと見は信頼がおけるイメージです.

Scanditの創業チーム は,元IBM,MIT研究者などのようですね.

プランと価格

scanditには3つのプランがありますので紹介します. 詳しくは,Plans & Pricing をご覧ください.

  1. Community (Starter Edition; 無料)
    無料で使える(有料アプリの場合は金額の8%?) 他プランに比べて対応しているバーコード規格は少ないです.ただ,EAN(いわゆるJANコードと互換形式)やQRは含まれていますので一般用途では問題なく使えると思います.
  2. Enterprise Basic (月額199ドルもしくは年一括払い1999ドル)
    企業向けを想定したライセンスのようです. 後述する Enterprise Premium との大きな違いは,扱えるバーコード規格とインストールできるデバイス数の上限の2点のようです.
  3. Enterprise Premium (月額399ドルもしくは年一括払い3999ドル)
    大規模な企業向けを想定したライセンスのようです. 前述の Enterprise Basic との大きな違いは,扱えるバーコード規格とインストールできるデバイス数の上限の2点のようです.

plans

こちらはプランごとの特徴の比較表です.特徴の大きな違いは読み込めるバーコード規格の違いですね.
Analytics の Included と Available がどう違うかは機会をみて調べてみたいと思います.

features

Titanium で使ってみる

ではさっそく Titanium で使ってみましょう!

テスト用プロジェクトを作る

CLIを使ってこんな感じで作成します.

[issei@zion] ~/repos/memo $ ti create test_scandit
Titanium Command-Line Interface, CLI version 3.3.0, Titanium SDK version 3.3.0.GA
Copyright (c) 2012-2014, Appcelerator, Inc.  All Rights Reserved.

Please report bugs to http://jira.appcelerator.org/

What type of project would you like to create?
 1)  app
 2)  module
Select a type by number or name [app]: app

Target platform (all|iphone|ipad|mobileweb|android|blackberry) [all]: iphone,android

Project name: Test4Scandit

App ID: com.example.scandit

Your company/personal URL:

Directory to place project [.]:

(以下略)

せっかくなので Alloy も適用しましょう.

[issei@zion] ~/repos/memo $ cd Test4Scandit
[issei@zion] ~/repos/memo/Test4Scandit $ alloy new

次にScanditの会員登録をしましょう.

会員登録を終えてログインしまして,Titanium向けモジュールをダウンロードします。

downloadはこちら

ダウンロードできる一覧がでますので Titanium 向けのSDKをダウンロードします.

Titanium向けSDKダウンロード

ダウンロードしたzipを移動

Titaniumのプロジェクトまでzipを移動させます.Finder を使ってマウスで移動でもかまいません!

ここまではscanditに限らずTitanium共通のモジュールのインストールの仕方ですね.Titaniumのプロジェクトのディレクトリにモジュールのzipを配置してビルドすれば勝手にmodulesディレクトリを作ってモジュールをインストールしてくれます.

[issei@zion] ~/repos/memo/Test4Scandit $ mv ~/Downloads/scanditsdk-titanium-community-* .
[issei@zion] ~/repos/memo/Test4Scandit $ ls
LICENSE                                                 plugins/
README                                                  scanditsdk-titanium-community-android_4.0.1.zip
Resources/                                              scanditsdk-titanium-community-ios_4.0.1.zip
app/                                                    tiapp.xml

次に tiapp.xml の modules タグに module を追加します.

[issei@zion] ~/repos/memo $ cd Test4Scandit/
[issei@zion] ~/repos/memo/Test4Scandit $ vi tiapp.xml
<modules>
  <module version="4.0.1" platform="android">com.mirasense.scanditsdk</module>      # この二行を追加!
  <module version="4.0.1" platform="iphone">com.mirasense.scanditsdk</module>       # (一行にまとめてもいいよ!)
</modules>

以上で,準備は完了です. モジュールのインストールのためにビルドしましょう.

$ ti build -p ios
(以下略)

実行が完了してiOSエミュレータが起動されると,実行前にはなかったmodulesディレクトリが作成されているので確認しましょう.

[issei@zion] ~/repos/memo/Test4Scandit $ ls -1
LICENSE
README
Resources/
app/
build/
modules/        # 新しく追加されてる!!!! zip ファイルは消えてる!!!
plugins/
tiapp.xml

サンプルアプリの作成

ではさっそくバーコードリーダーアプリを作ってみましょう.

詳しい仕様や英語版サンプルの作成などは Scandit Guide にありますのでこちらを参考にしましょう!

scandit の利用には AppKey が必要です.(App key管理画面](https://ssl.scandit.com/account/apps) に移動して,「Add app…」ボタンをクリックします!

Add app key

クリックするとアプリ名称の入力が求められますので,今回は「test」と入力してキーを発行します.

正しく登録できるとこのように test の appkey が発行されます.App key は後で使いますのでコピーしておきましょう.

Added app key

コード書く

まずは index.js を改修しましょう.今回はアプリを起動したら即バーコードリーダが起動する仕様です.
index.js のなかに app key を入力する部分があるので忘れないようにしましょう.

[issei@zion] ~/repos/memo/Test4Scandit $ vi app/controllers/index.js
// モジュール読込
var scanditsdk = require("com.mirasense.scanditsdk");

// iOS のときはステータスバーを非表示
if(Ti.Platform.osname == 'iphone' || Ti.Platform.osname == 'ipad'){
  Titanium.UI.iPhone.statusBarHidden = true;
}

// バーコード読み取り画面を作成
var barcodeWin = Titanium.UI.createWindow({
  title:'Scandit SDK',
  navBarHidden:true
});

// バーコードビューのインスタンス
var picker = scanditsdk.createView({
  width:"100%",
  height:"100%"
});
// 初期化
picker.init("!!!!!!!!!!!!ここに app key を入力します!!!!!!!!!!!!!!", 0);
picker.showSearchBar(false);    // 上部に検索バーを表示しない
picker.showToolBar(true);       // scanditのツールバーを表示する

// 成功時のコールバック設定
picker.setSuccessCallback(function(e) {
  alert('barcode の値は ' + e.barcode + ' です');
  barcodeWin.close();
});


// 既存のビューに組み込み
$.index.add(picker);
$.index.addEventListener('open', function(e) {
  // 各種プラットフォームへの最適化
  if(Ti.Platform.osname == 'iphone' || Ti.Platform.osname == 'ipad'){
    picker.setOrientation(Ti.UI.orientation);
  }
  else {
    picker.setOrientation(barcodeWin.orientation);
  }

  picker.setSize(Ti.Platform.displayCaps.platformWidth, Ti.Platform.displayCaps.platformHeight);
  picker.startScanning();     // startScanning() has to be called after the window is opened.
});

// 画面表示
$.index.open();

Alloy のデフォルトview をそのままにしていると怒られるので,index.xml を次のように変更します

[issei@zion] ~/repos/memo/Test4Scandit $ cat app/views/index.xml
<Alloy>
  <Window class="container">
  </Window>
</Alloy>

これでコーディングは完了です!実際にビルドしてみましょう.

iOS のビルドには iOS Dev 登録や Provisioning File の登録などが必要ですが今回は本筋ではないので省略します!
ではビルドしてみましょう

[issei@zion] ~/repos/memo/Test4Scandit $ ti build -p ios -T device 
(以下略)

試してみる

さっそくアプリを起動してスキャンしてみましょう.起動すると,青い枠がバーコードを捉えようとします.

スキャン中

青い枠がバーコードを捉えると数値がきちんと取得できていることがわかりました.

スキャン結果

バーコードが縦になっていたり,QRコードでも問題ありません!!

スキャン中(縦)

とっても簡単ですね!!!!!!!

今回のソースコードは github においてますのでお好きにお使いください.

おわりに

今回は,Titanium でバーコードリーダーを実装する方法として,scandit というモジュールの使い方をまとめました. コーディングしやすく,精度も高く,扱えるバーコード規格も多い,しかもフリーのアプリであれば無料で使えるということで,文句なしのモジュールだと思います.