Titanium에서 사용할 수있는 iOS 및 Android 바코드 리더 모듈에 Scandit이 있습니다.
이번에는 Scandit의 Alloy와 같은 쓰기 방법과 스캔 화면에 뷰를 오버레이하여 바코드를 읽은 결과를 동일한 화면에 표시하는 방법을 씁니다.
스캔하는 동안 스캔 결과를 볼 수 있기 때문에 경우에 따라 사용하기 쉬운 앱을 만들 수 있다고 생각합니다.

준비

Scandit을 사용하려면 공식 페이지에서 등록하고 App Key를 취득해야 합니다.
기본적인 사용법은 고마쓰 일성씨가 15분만에 만드는 바코드 리더 앱 에 쓰고 있으므로 여기에서는 할애합니다.

Alloy 쓰는 법

우선, 스캐너 부분의 뷰를 views에 쓰는 코드는 다음과 같습니다.

app/alloy.js

Alloy.Globals.scandit = require("com.mirasense.scanditsdk");

app/views/index.xml

<Alloy>
  <Window class="container">
    <View ns="Alloy.Globals.scandit" id="scannerView" />
  </Window>
</Alloy>

app/styles/index.tss

".container": {
  backgroundColor: "white",
  navBarHidden: true
}

"#scannerView": {
  width: "100%",
  height: "100%"
}

app/controllers/index.js

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

// 初期化
$.scannerView.init("あなたのScanditのApp Key", 0);
$.scannerView.showSearchBar(false);    // 上部に検索バーを表示しない
$.scannerView.showToolBar(true);       // scanditのツールバーを表示する

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

$.index.addEventListener('open', function(e) {
  // 各種プラットフォームへの最適化
  if(Ti.Platform.osname == 'iphone' || Ti.Platform.osname == 'ipad'){
    $.scannerView.setOrientation(Ti.UI.orientation);
  }
  else {
    $.scannerView.setOrientation($.index.orientation);
  }

  $.scannerView.setSize(Ti.Platform.displayCaps.platformWidth, Ti.Platform.displayCaps.platformHeight);
  $.scannerView.startScanning();     //バーコードリーダ起動
});

$.index.open();

스캔 결과 화면 오버레이

그런 다음 스캔 결과 화면을 스캐너 위에 오버레이합니다.

app/views/index.xml에 스캔 결과 화면을 추가합니다.

app/views/index.xml

<Alloy>
  <Window class="container">
    <View ns="Alloy.Globals.scandit" id="scannerView" />
    <!--スキャン結果画面-->
    <View id="overlayView" >
      <Label id="barcodeLabel"/>
    </View>
    <!--/スキャン結果画面-->
  </Window>
</Alloy>

app/views/index.xml에 스캔 결과 화면의 속성을 추가합니다.

app/styles/index.tss

".container": {
  backgroundColor: "white",
  navBarHidden: true
}

"#scannerView": {
  width: "100%",
  height: "100%"
}

/*スキャン結果画面*/
"#overlayView": {
    bottom:0,
    width:Ti.UI.FILL,
    height:"40%",
    borderRadius:10,
    backgroundColor: 'white'
}

controllers/index.js는 카메라의 바코드 스캔 위치를 setScanningHotSpot을 사용하여 중앙에서 위쪽으로 설정합니다.
또한 스캔이 성공하면 alert에서 바코드 값을 표시하는 대신 이전에 View에 추가한 barcodeLabel에 표시되도록 수정합니다.

app/controllers/index.js

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

// 初期化
$.scannerView.init("あなたのScanditのApp Key", 0);
$.scannerView.showSearchBar(false);    // 上部に検索バーを表示しない
$.scannerView.showToolBar(true);       // scanditのツールバーを表示する

// 成功時のコールバック設定
$.scannerView.setSuccessCallback(function(e) {
  //barcodeLabelalert('barcode の値は ' + e.barcode + ' です');
  $.barcodeLabel.setText('barcodeの値：' + e.barcode);
});

$.scannerView.setScanningHotSpot(0.5, 0.25); //スキャン位置を上部に設定

$.index.addEventListener('open', function(e) {
  // 各種プラットフォームへの最適化
  if(Ti.Platform.osname == 'iphone' || Ti.Platform.osname == 'ipad'){
    $.scannerView.setOrientation(Ti.UI.orientation);
  }
  else {
    $.scannerView.setOrientation($.index.orientation);
  }

  $.scannerView.setSize(Ti.Platform.displayCaps.platformWidth, Ti.Platform.displayCaps.platformHeight);
  $.scannerView.startScanning();     //バーコードリーダ起動
});

$.index.open();