【IT-DIY】GoogleGlassを使って、QRコードをスキャンし、結果をi-Reporter帳票に出力(Part.1)

# 概要

昨年末、会社がGlass Enterprise Edition 2(通称"Google Glass")を購入してくれました！
早速、なにか作ってみよう！、ということで
「Google GlassでQRコードを撮影し、読取結果を弊社が代理店として取り扱っている"ConMas i-Reporter(*)"を利用した帳票に出力する」
というものを作ってみます！

Part1では、「GoogleGlassでQRコードを読み取りテスト用APIをたたく」、までを解説します

# [Step.1] Google Glassを触ってみよう！

公式より、初期設定手順が公開されていますので、
そちらに従って、設定します。

[Google Glassの初期設定](https://support.google.com/glass-enterprise/customer/answer/9220199?hl=ja)

# [Step.2] サンプルソースをインストールして、実行してみる！

1. AndroidStudioがないことには始まらないので、インストール
[Android Studioをインストール](https://developer.android.com/studio?hl=ja&gclid=CjwKCAjwrqqSBhBbEiwAlQeqGjEtoTZ9Cv-kallMf3NtaHhTtBypLTwzeig8ISiAbveFHGZxX7EGuBoCxYMQAvD_BwE&gclsrc=aw.ds)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629696/7dce08f3-444e-78c7-4c97-6e2c49fc8c2c.png)


1. Googleが公開している[サンプルソース](https://github.com/googlesamples/glass-enterprise-samples/tree/master/QRCodeScannerSample)をインポートする
インポートの詳細はここでは割愛させていただきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629696/5f8248ca-4ef0-8b83-4580-a9e3451ceb34.png)

1. 実行してみる
実行結果は、以下のサイトにある「[Google Enterprise Edition2#QR code scanner sample](https://developers.google.com/glass-enterprise/samples/code-samples)」と同じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629696/120b51b6-eb91-16bb-8173-c43d8032b9ca.png)

# [Step.3] QRコード読取後、任意のAPIへHTTPリクエストする処理を記述する

### APIの準備  

任意のAPIがないと叩けないので、適当なAPIを用意します。
今回は、Node.jsで記述、社内にある私が自由に使っていいお遊びサーバーにデプロイ（詳細は割愛）

```js
const express = require('express')
const bodyParser = require('body-parser');

const app = express();

// urlencodedとjsonは別々に初期化する
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());

/***
 * [sample] api : hello world
 */
app.get('/', (req, res) => res.send('Hello World!'))

app.post('/ap2api', (req, res) => {
    // {
    //     "name" :"hogehoge"
    // }
    console.log(req.body);
    
    var data = req.body;
    console.log(data.name);

    res.send('POST request to the homepage');
})

app.listen(3000, () => console.log('Example app listening on port 3000!'))
```

### Google Glassの準備

Google Glassサンプルソースの"QRScannerSample"内の以下のメソッドに
APIリクエストする処理を追記
※ 仮実装、ですので、突っ込みどころあるかもしれませんが、ご容赦ください、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629696/74aea3bb-cee9-c5ab-8152-151a03f8c4b0.png)
  

Google Glassにアプリをインストールして、さっそく実行してみます。

# [Step.4] 動作確認

動作確認時の、アプリ側の画面と、サーバーログは以下の通り

### "QRScannerSample"アプリ初期画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629696/534b2320-02ff-86d6-5cf7-7baa960a2f75.png)

### カメラプレビュー画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629696/09fb8f5b-f696-5642-fd8e-0f13c6362bb5.png)

### QRコード検知時の、サーバー側ログ
※ QRコード検知後、1度しかAPIリクエストしているが、検知後２回API リクエストが走ってます
　 案件対応時には、Androidの検知時のイベントをもっと理解する必要ありそうですね。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629696/57f65ba3-6eb9-0bb8-8474-1b20c703e2b6.png)

# Part.2 に向けて

サンプルソースに、API Requestする処理を組み込むことは 出来ました。
次回は、、、
1. 前スワイプ操作　→　映っているカメラプレビューをキャプチャ
2. タップ操作　→　QRコードを読み取り、[1.]で取得した画像データを弊社ネクストビジョンが取り扱っている"ConMas i-Reporter"帳票に埋め込む
まで、を実装してみようと思います。