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

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

ZXing.Net Mobile を使ってみた - Android 編 -

Xamarin Xamarin.Forms Xamarin.Android

こんにちは。エクセルソフトの田淵です。

blog.xamarin.com

ZXing(Zebra Crossing の略みたいです)を使って簡単にスキャナが作れるよ!というエントリーを Xamarin エバンジェリストの James Montemagno さんがアップされていたので、試してみました。

GitHub サンプル

Windows Phone 8.1 に対応していない(Sliverlight のみ)ので、 Profile 7、49、78 のどれかを使用してください。私は 7 で NuGet からインストールできました。各 Profile の対応プラットフォームは以下を参照してください。

ytabuchi.hatenablog.com

インストール

Xamarin.Forms PCL プロジェクトで Profile を変更するには、一度 Xamarin.Forms ライブラリをアンインストールして、PCL プロジェクトのプロパティで Windows Phone 8.1 を外すなどして、保存し、再度 Xamarin.Forms ライブラリをインストールする必要があります。

f:id:ytabuchi:20160310201721p:plain:w300

NuGet から ZXing.Net.Mobile.Forms をインストールすると、一緒に ZXing.Net.Mobile もインストールされます。

f:id:ytabuchi:20160310201925p:plain:w450

インストール後の各プラットフォームの参照一覧は次のようになっていました。

PCL
f:id:ytabuchi:20160310202342p:plain:w300

Android
f:id:ytabuchi:20160310202518p:plain:w300

iOS
f:id:ytabuchi:20160310202554p:plain:w300

UWP
f:id:ytabuchi:20160310202621p:plain:w300

Windows Store
f:id:ytabuchi:20160310202655p:plain:w300

使い方

James さんのブログにあるように、NavigationPage 経由でページを表示し、コードビハインドに次のイベントハンドラを記述しました。

using ZXing.Net.Mobile.Forms;

async void ScanButtonClicked(object sender, EventArgs s)
{
    var scanPage = new ZXingScannerPage()
    {
        DefaultOverlayTopText = "線をバーコードに合わせてください",
        DefaultOverlayBottomText = "",
    };
    // スキャナページを表示
    await Navigation.PushAsync(scanPage);

    scanPage.OnScanResult += (result) =>
    {
        // スキャン停止
        scanPage.IsScanning = false;

        // PopAsyncで元のページに戻り、結果をダイアログで表示
        Device.BeginInvokeOnMainThread(async () =>
        {
            await Navigation.PopAsync();
            await DisplayAlert("Scanned Barcode", result.Text, "OK");
        });
    };
}

XAML はボタンを追加しただけです。

では、各プロジェクトでビルドしてみます。

Android

ビルド前に色々設定を。

Manifest

GUI の設定から、または Manifest.xml を直接編集し、CAMERA と FLASHLIGHT の権限を取っておきます。

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.FLASHLIGHT" />

Runtime Permission

Android 6.0 Marshmallow を対象にする場合は、ランタイムパーミッションの設定が必要なので James さんのブログにあるように、Android プロジェクトの MainActivity.cs に以下を追加します。

public override void OnRequestPermissionsResult(int requestCode, string[] permissions, Permission[] grantResults)
{
    global::ZXing.Net.Mobile.Forms.Android.PermissionsHandler.OnRequestPermissionsResult (requestCode, permissions, grantResults);           
}

ビルドすると、

f:id:ytabuchi:20160310201519p:plain:w450

むむむ。。。仕方ないので values/Strings.xml のフォルダ、ファイルを作成し、

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <string name="Hello">Hello World, Click Me!</string>
  <string name="ApplicationName">アプリ名</string>
</resources>

を追加しておきます。

OK です。無事ビルドが通りました。ボタンをクリックしてカメラを初回起動した時の Marshmallow の Runtime Permission も動作しています。

f:id:ytabuchi:20160310204453p:plain:w300

動作イメージ

笑えるくらい素早く認識してくれます。

f:id:ytabuchi:20160310211746g:plain:w300

ObservableCollection<string>scanPage.OnScanResultResult.Text をガンガン突っ込んでいけば連続でスキャンできますが、画面を「スキャンしたよ」と一瞬ホワイトアウトさせるような処理を入れないとスキャンしたのかしてないのか分からないですよね。どうやるのか気になります。

iOS、UWP は次回書きます。

UWP は QR コードしかスキャンできなさそうです。

Xamarin 気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。

以上です。