Vuzix Bladeで開発してみた（QRコード読取編）

はじめに

初めましてApv(@apv23973)です。Qiitaに始めて投稿します。
Androidの開発は色々やった事があるのですが、
この度、スマートグラスに興味があってこのVuzix Blade開発にチャレンジしようと思いました。

まずSmartGlassと言えば数年前にGoogleが発売したGoogle Glassではないでしょうか？
あまり万人受けしなかった気もしますが、ここ数年、商業用を中心に盛り上がりを見せ始めている産業かと思います。

そんな中、私が大変興味を持ったのがVuzix社が出したVuzixBlade SmartGlassです。
出来る限り情報を更新していければと思います。

Vuzix Bladeのはじめかた

初めに、VuzixBladeに関して大変参考にさせて頂いたのが
drama(@1901drama)さんが書いたこの記事になります。
なので私の記事はこのはじめかたが終了したと仮定して書きます。

Vuzix Blade(ARスマートグラス)のはじめかた
Vuzix Blade(ARスマートグラス)のはじめかた その2

QRコード読取について

私が前に開発していたのはEclipseだったのでAndroid Stdioになってこんなに楽なったのかと実感してしまいました。
世間でQRコードの読取が有名なのは、Google が開発して公開している、様々な一次元や二次元のバーコードの生成/操作ができるオープンソースライブラリのZxingだと思います。
なので今回もこのZxingで実装していきます。

実装

1. Zxingライブラリーの追加

build.gradle

dependencies {
    implementation 'com.vuzix:hud-actionmenu:1.1'
    implementation 'com.vuzix:hud-resources:1.1'
    implementation 'com.journeyapps:zxing-android-embedded:3.6.0@aar'
    implementation 'com.google.zxing:core:3.2.1'
}

こんな感じになります。

2. カメラ起動用にpermissionを追加

AndoridManifest.xml

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

これをapplicationタグ外に宣言します。

3.画面の作成

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/hud_transparent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:gravity="bottom">

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="読み取り開始"
            android:textColor="@color/hud_transparent"
            />

    </LinearLayout>
</LinearLayout>

今回はシンプルに読取開始のボタンを1つ追加しただけになります。

4.MainActivityの編集

MainActivity.xml

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // ボタン割り当て
        Button btn = findViewById(R.id.button);
        Listener listener = new Listener();
        btn.setOnClickListener(listener);
    }

onCreateはシンプルにボタンリスナーを追加しているだけです。

MainActivity.xml

    private class Listener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            // カメラ起動
            scanBarcode(view);
        }
    }

    public void scanBarcode(View view) {
        IntentIntegrator integrator = new IntentIntegrator(this);
        integrator.setDesiredBarcodeFormats(IntentIntegrator.QR_CODE);
        integrator.setPrompt("QRコードを読取って下さい。");
        integrator.setTimeout(10000);
        integrator.setCameraId(0); // Use a specific camera of the device
        integrator.initiateScan();
    }

読み取り開始ボタンを押した時にカメラを起動して読取を開始します。
integrator.setTimeout(10000);
はカメラのタイムアウトを指定します。
10000msなので10秒で自動的にキャンセル扱いになります。

integrator.setDesiredBarcodeFormats(IntentIntegrator.QR_CODE);
の設定によって何を読取るのか指定ができます。
中身を見ると1次元コード／2次元コードが指定できます。
指定した方が読取がよくなると聞いたことがあります。

IntentIntegrator.java

    // Product Codes
    public static final String UPC_A = "UPC_A";
    public static final String UPC_E = "UPC_E";
    public static final String EAN_8 = "EAN_8";
    public static final String EAN_13 = "EAN_13";
    public static final String RSS_14 = "RSS_14";

    // Other 1D
    public static final String CODE_39 = "CODE_39";
    public static final String CODE_93 = "CODE_93";
    public static final String CODE_128 = "CODE_128";
    public static final String ITF = "ITF";

    public static final String RSS_EXPANDED = "RSS_EXPANDED";

    // 2D
    public static final String QR_CODE = "QR_CODE";
    public static final String DATA_MATRIX = "DATA_MATRIX";
    public static final String PDF_417 = "PDF_417";

読取った後の処理

MainActivity.xml

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        IntentResult result = IntentIntegrator.parseActivityResult(requestCode, resultCode, data);

        if(result != null) {
            if(result.getContents() == null) {
                // 読取キャンセル
                Toast.makeText(this, "Cancelled", Toast.LENGTH_LONG).show();
            } else {
                // 読取成功
                Toast.makeText(this, "Scanned: " + result.getContents(), Toast.LENGTH_LONG).show();
            }
        } else {
            super.onActivityResult(requestCode, resultCode, data);
        }
    }

実装はここまでです。

5.実行
画面のエビデンスを張り付けていますが、
背景色の黒は全て透明化になっています。（グラスつけてるからね・・・）

6.おわりに
Vuzix Bladeでも基本的に通常のAndroidと同じなんだなと言う事がわかりました。
ただ、Buttonのイメージとかが想像よりちょっと違ったかも…

載せてはいませんが、ボタンを２つ配置した時はどちらが選択されているのかホント分かりません。
公式サイトにもちょこっと書いてありましたが、UIを決めるのは大事かもしれません。

次回は通信関係に手を出してみようかな・・・　
ここまで読んで頂きありがとうございました。