halka-tech

技術的なことを書きます

PhoneGapでバーコードを読んでみた for Android

いい加減まともなことを書いてなかったので書きます.

必要なもの

準備1 PluginをEclipseに読み込む

Eclipseを開いてAndroidプロジェクトを新規作成します.

外部ソースからプロジェクトを作成を選んで,ダウンロードしたPluginsディレクトリの中を進んでAndroid / BarcodeScannerにたどり着くとLibraryProjectというディレクトリがあるのでこのディレクトリを指定します.


ビルドターゲットはとりあえず一番バージョンが高いものを指定して完了します.

パッケージエクスプローラから追加したパッケージである“CaptureActivity”を右クリックしてプロパティに進んで,Androidから下の方にあるライブラリーにある“Is Library”にチェックを入れてOKをクリックします.

準備2 Pluginを使う側の設定

Android / BarcodeScanner / srcの中身をPluginを利用するパッケージのsrcディレクトリにコピーします.

Pluginを使うプロジェクトをパッケージエクスプローラで選択して右クリック,Androidからライブラリーにある追加をクリックすると選択画面になるので,先程追加した“CaptureActivity”が選択をしてOKをクリック,プロパティをOKでクリックして閉じます.


res/xmlにあるplugins.xmlのplguings内にこの1行を追加します.

<plugin name="BarcodeScanner" value="com.phonegap.plugins.barcodescanner.BarcodeScanner"/>

  • AndroidManifest.xmlののすぐ上にこの記述を追加します.
<!-- ZXing activities -->
    <activity android:name="com.google.zxing.client.android.CaptureActivity"
              android:screenOrientation="landscape"
              android:configChanges="orientation|keyboardHidden"
              android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
              android:windowSoftInputMode="stateAlwaysHidden">
      <intent-filter>
        <action android:name="com.phonegap.plugins.barcodescanner.SCAN"/>
        <category android:name="android.intent.category.DEFAULT"/>
      </intent-filter>
    </activity>
    <activity android:name="com.google.zxing.client.android.encode.EncodeActivity" android:label="@string/share_name">
      <intent-filter>
        <action android:name="com.phonegap.plugins.barcodescanner.ENCODE"/>
        <category android:name="android.intent.category.DEFAULT"/>
      </intent-filter>
    </activity>


そして最後にpluginを利用する側のassets/wwwにAndroid / BarcodeScanner / assets /www/にあるbarcodescanner.jsをコピーします.

なんか警告が出てきますが特に問題なさそうなのでスルーします.(Pluginの問題なので)
誰か直してpull requestしておいてね!

書いてみる

忘れずにbarcodescanner.jsを使うhtmlファイルの中で読み込んでください.

<script type="text/javascript" charset="utf-8" src="barcodescanner.js"></script>

README.md通りにやるとこんな感じのコードになります.

実行結果

参考資料

2012/03/05か2012/03/04閲覧

Simon Mac Donald: Installing the Barcode Plugin for PhoneGap Android
http://simonmacdonald.blogspot.com/2011/12/installing-barcode-plugin-for-phonegap.html

Android/BarcodeScanner at master from phonegap/phonegap-plugins - GitHub
https://github.com/phonegap/phonegap-plugins/tree/master/Android/BarcodeScanner

phonegap / phonegap-android-eclipse-quickstart
http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart