0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-07-11

概要

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

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

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

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

Google Glassの初期設定

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

  1. AndroidStudioがないことには始まらないので、インストール
    Android Studioをインストール
    image.png

  2. Googleが公開しているサンプルソースをインポートする
    インポートの詳細はここでは割愛させていただきます。
    image.png

  3. 実行してみる
    実行結果は、以下のサイトにある「Google Enterprise Edition2#QR code scanner sample」と同じです。
    image.png

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

APIの準備

任意のAPIがないと叩けないので、適当なAPIを用意します。
今回は、Node.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

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

[Step.4] 動作確認

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

"QRScannerSample"アプリ初期画面

image.png

カメラプレビュー画面

image.png

QRコード検知時の、サーバー側ログ

※ QRコード検知後、1度しかAPIリクエストしているが、検知後2回API リクエストが走ってます
  案件対応時には、Androidの検知時のイベントをもっと理解する必要ありそうですね。
image.png

Part.2 に向けて

サンプルソースに、API Requestする処理を組み込むことは 出来ました。
次回は、、、

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?