こんにちは！
九保すこひです（フリーランスのITコンサルタント、エンジニア）

さてさて、この間数回に渡って【Python】Pasori RC-S380で入退室システムをつくるのような「リアルとPCの融合」をテーマにした記事を公開してきました。

そして、その時点では「今のところ連携したい機器も購入してないし、また機会がきたら・・・」なんて思ってたんですけど、開発に関するネットサーフィンをしているときに以下の記事を発見してしまい、どうしてもやってみたくなったので（ちょっと忙しいくせに時間を割いて）試してみることにしました。

Vision APIとNatural Language APIを組み合わせて名刺から情報抽出する

これは、タイトルの通りGoogle が提供しているVision API（画像から顔認識や分類など様々な処理ができるAPI）を使って「名刺に書かれているテキスト」を読み取るというものです。（Qiitaっていい記事多いですよね）

ただし、この記事はPythonを使っているのでPHPではこちらのコードは使えません。もちろん私もPython好きなのでそのままやってもいいのですが、「おんなじことするのも…」なんて思ったので、今回はあえてLaravel（PHP）で実装してみることにしました。

ということで今回は画像の文字を読み取るOCRをGoogle Vision APIを使ってやってみたいと思います。

ぜひ皆さんのお役に立てると嬉しいです！
（最後に今回実際に開発したソースコードをダウンロードできます）

開発環境： Laravel 5.8、Vue 2.6

目次 [非表示]

1 やりたいこと
2 Google Cloud APIの準備
3 Laravelの準備
4 ソースコード一式をダウンロードする
5 おわりに

やりたいこと

今回開発する流れはおおまかに以下の３つです。

PCのウェブカメラで名刺を撮影
画像データを送信し、Vision APIでテキストデータを抽出
抽出したテキストをブラウザに返し、テキストボックスに入力する

※ ちなみに今回のコードではウェブカメラにアクセスしていますがGoogle ChromeはローカルであってもHTTPS接続でないとウェブカメラにはアクセスできないようになっていますので注意してください。もしローカルにHTTPSを導入する場合は以下のページを参考にしてみてください。

コピペでOK！ローカル環境にHTTPSを導入する（nginx編）

では、実際にやっていきましょう！

Google Cloud APIの準備

まずはGoogle Cloud APIの「Vision API」が利用できるように設定をします。
まだアカウント登録していない方は登録しておいてください。

※ 有料ですが、1,000回／月までは無料です。詳しい料金はこちらのページをご覧ください。

そして、今回のために専用のプロジェクトを作成します。
作成の仕方は、以下の「プロジェクトをつくる」を参考にしてみてください。プロジェクト名は「business-card」です。

LaravelでGoogle Cloud Storageへ保存＆取得する方法

プロジェクトを作成したら次にVision APIを有効にしましょう。
まず、ページ左側にあるメニューの中から「APIとサービス > ダッシュボード」をクリックします。

ページが移動したら、次の「＋ APIとサービスを有効化」をクリック。

ライブラリの検索画面になるので「vision」と入力。

するとCloud Vision APIがリスト表示されるのでこれをクリック。

後は「有効にする」ボタンをクリックすればVision APIは有効になります。

次にこのVision APIにアクセスするためのキー（JSON）を作成していきましょう。ページ右上にある「認証情報を作成」ボタンをクリックします。

使用するAPIを「Cloud Vision API」、App Engineの仕様を「いいえ」に変更して「必要な認証情報」ボタンをクリック。

同じくサービスアカウント名に「business-card」と入力し、役割を「オーナー」。キーのタイプをJSONにして「次へ」ボタンをクリック。

すると、自動でJSONファイルがダウンロードされますので、区別しやすいようにvision_api_key.jsonなどにリネームしてLaravelの/storage/json/フォルダに設置しておいてください。

あとは、Laravel内のどこからでも参照できるように.envに以下のように登録しておきましょう。

GOOGLE_CLOUD_PROJECT=*******************
GOOGLE_APPLICATION_CREDENTIALS=/***/***/***/storage/json/vision_api_key.json

VISION_API_PROJECTはvision_api_key.json内の「project_id」に書かれている値です。

Laravelの準備

専用パッケージのインストール

続いてはLaravel側の準備です。
Google Vision APIは専用のパッケージを用意してくれていますので以下のコマンドでインストールしましょう。

composer require google/cloud-vision

※ ちなみに.envでGOOGLE_CLOUD_PROJECTとGOOGLE_APPLICATION_CREDENTIALSが自動的に適用されるのでわざわざAPIキーの設定をする必要はありません。便利です！

ルートを作成する

続いてブラウザからアクセスするURLを設定していきます。routes/web.phpに以下を追加してください。

Route::get('business_card', 'BusinessCardController@index');
Route::post('business_card/extract', 'BusinessCardController@extract');

上がブラウザで実際にアクセスするページで、下がAjax通信でテキストデータを取得するルートになります。

コントローラーを作成する

次に以下のコマンドでコントローラーを作成します。

php artisan make:controller BusinessCardController

app/Http/ControllersBusinessCardController.phpが作成されますので、開いて以下のように変更します。

<?php

namespace App\Http\Controllers;

use Google\Cloud\Vision\V1\ImageAnnotatorClient;
use Illuminate\Http\Request;
use Illuminate\Support\Str;

class BusinessCardController extends Controller
{
    public function index() {

        return view('business_card.index');

    }

    public function extract(Request $request) {

        $client = new ImageAnnotatorClient();

        $image = $client->createImageObject(file_get_contents($request->image));
        // テストする場合は直接こちらから画像データを読み込んでください。
//        $image = $client->createImageObject(file_get_contents(public_path('/images/business_card_example.png')));

        $response = $client->textDetection($image);

        if(!is_null($response->getError())) {

            return ['result' => false];

        }

        $annotations = $response->getTextAnnotations();
        $description = str_replace('"""', '', $annotations[0]->getDescription());

        return [
            'result' => true,
            'text' => $description
        ];

    }
}

なお、extract()内ではAjaxで送信されてきた画像データ（dataURL）からテキスト抽出し、取得された内容を加工してAjaxへ返すようになっています。（$descriptionが抽出データ）

なお、抽出に失敗した場合はresultがfalseになります。

ビューを作成する

では実際にブラウザで目にする部分のビューを作成していきましょう。

<html>
<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="app" class="container">
        <br>
        <h3>ウェブカメラで名刺を読みとってデータ入力する</h3>
        <div class="row">
            <div class="col-md-4 form-group">
                <label>名前</label>
                <input type="text" class="form-control form-control-sm" v-model="params.name">
            </div>
            <div class="col-md-4 form-group">
                <label>会社名</label>
                <input type="text" class="form-control form-control-sm" v-model="params.organization">
            </div>
            <div class="col-md-4 form-group">
                <label>住所</label>
                <input type="text" class="form-control form-control-sm" v-model="params.address">
            </div>
            <div class="col-md-4 form-group">
                <label>TEL</label>
                <input type="text" class="form-control form-control-sm" v-model="params.tel">
            </div>
            <div class="col-md-4 form-group">
                <label>E-Mail</label>
                <input type="text" class="form-control form-control-sm" v-model="params.email">
            </div>
            <div class="col-md-4 form-group">
                <label>URL</label>
                <input type="text" class="form-control form-control-sm" v-model="params.url">
            </div>
        </div>
        <hr>
        <h5>
            名刺をウェブカメラに見せて「キャプチャ」ボタンをクリックしてください。<br>
            3秒後に画像がキャプチャされます。
        </h5>
        <div v-show="isModeVideo">
            <div class="float-right">
                <span class="text-right" v-if="this.timeCount > 0">
                    @{{ timeCount }} 秒
                    &nbsp;&nbsp;&nbsp;
                </span>
                <button type="button" class="btn btn-warning" @click="capture">キャプチャ</button>
            </div>
            <video ref="video" width="640" height="480"></video>
        </div>
        <div v-show="isModeImage">
            <div class="float-right">
                キャプチャしました。<br>この画像から情報を読みとりますか？
                <br>
                <div class="text-right">
                    <button type="button" class="btn btn-light" @click="cancel">キャンセル</button>
                    <button type="button" class="btn btn-success" @click="extract">OK</button>
                </div>
                <div style="white-space:pre;" v-if="extractedText">
                    <hr>
                    <span class="badge badge-primary">取得されたテキスト</span>
                    <div v-text="extractedText" @mouseup="selection"></div>
                </div>
            </div>
            <canvas ref="canvas" width="640" height="480"></canvas>
        </div>
        <!-- モーダル -->
        <div class="modal fade" id="modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">自動入力する項目を選択してください</h5>
                    </div>
                    <div class="modal-body">
                        <strong>選択されたテキスト：</strong> <span v-text="selectedText"></span>
                        <br>
                        <br>
                        <h3 class="float-left" v-for="(text,key) in inputs">
                            <a class="badge badge-primary" href="#" v-text="text" @click.prevent="enterText(key)"></a>&nbsp;
                        </h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
    <script>

        new Vue({
            el: '#app',
            data: {
                params: {
                    name: '',
                    organization: '',
                    address: '',
                    tel: '',
                    email: '',
                    url: ''
                },
                inputs: {
                    name: '名前',
                    organization: '会社名',
                    address: '住所',
                    tel: 'TEL',
                    email: 'E-Mail',
                    url: 'URL'
                },
                imageData: null,
                mode: 'video',
                timeCount: 0,
                extractedText: '',
                selectedText: ''
            },
            computed: {
                video() {

                    return this.$refs['video'];

                },
                canvas() {

                    return this.$refs['canvas'];

                },
                context() {

                    return this.canvas.getContext('2d');

                },
                isModeVideo() {

                    return (this.mode === 'video');

                },
                isModeImage() {

                    return (this.mode === 'image');

                }
            },
            methods: {
                capture() {

                    this.timeCount = 3;

                    // ３秒後に画像をキャプチャ
                    const timer = setInterval(() => {

                        if(this.timeCount === 1) {

                            clearInterval(timer);
                            const video = this.video;
                            this.context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
                            this.imageData = this.canvas.toDataURL('image/jpeg', 1.0);
                            this.mode = 'image';

                        }

                        this.timeCount -= 1;

                    }, 1000);

                },
                cancel() {

                    this.mode = 'video';

                },
                extract() {

                    const url = '/business_card/extract';
                    const formData = new FormData();
                    formData.append('image', this.imageData);

                    axios.post(url, formData)
                        .then((response) => {

                            const result = response.data.result;

                            if(result) {

                                this.extractedText = response.data.text;

                            }

                        });

                },
                selection() {

                    this.selectedText = window.getSelection().toString();

                    if(this.selectedText !== '') {

                        $('#modal').modal('show');

                    }

                },
                enterText(targetKey) {

                    let newParams = {};

                    for(let key in this.params) {

                        if(key === targetKey) {

                            newParams[key] = this.selectedText;

                        } else {

                            newParams[key] = this.params[key];

                        }

                    }

                    this.params = newParams;
                    $('#modal').modal('hide');
                    window.getSelection().empty();

                }
            },
            mounted() {

                // ウェブカメラへアクセス
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then((stream) => {

                        this.video.srcObject = stream;
                        this.video.play();

                    });

            }
        });

    </script>
</body>
</html>