I. GCPとは

GCPとはGoogle Cloud Platform（グーグル・クラウド・プラットフォーム）の略称をいい、Googleが提供する、Google検索やYouTubeなどのエンドユーザー向けのサービスにGoogle社内で使われているものと同じインフラを使用したクラウドコンピューティングサービス群です。それらに加えてコンピューティング、ストレージ、データ解析、マシンラーニングといったモジュラー・クラウド・サービスをも提供します。申し込みのため、クレジットカードまたは銀行口座を求められます。 GCPは、サービスとしてインフラ、プラットフォーム、サーバーレスコンピューティング環境を提供します。

II. Laravelフレームワーク

Laravel は、Taylor Otwellによって作成された、Symfonyをベースにしたモデル・ビュー・コントローラー（MVC）のWebアプリケーション開発用の無料・オープンソースのPHPで書かれたWebアプリケーションフレームワークです。Laravelのいくつかの機能としては、専用管理ツールに依存するモジュラー・パッケージがあります。データベースへのアクセス方法が色々あります。また、アプリケーションの開発・保守をサポートするユーティリティも、シンタックスシュガーという糖衣構文の補助機能もあります。 LaravelソースコードはGitHubにホスティングされ、MITライセンスの下でリリースされています。

III. GCPでのLaravelインストール

GAE（Google App Engine）でLaravelを実行する前、新たにGCPプロジェクトを作成する必要があります。 以下のリンクにアクセスしてGCPコンソールにログインします。 https://console.cloud.google.com/

ステップ１: AGCPにログインした後、Google Cloud Platform Consoleでプロジェクトを作成します。「CREATE PROJECT」 をクリックします。

ステップ２： 新たにGCPプロジェクトを作成します。

ステップ３： 新たに作成したプロジェクトのダッシュボードです。

ステップ４： Laravelフレームワークで新たにプロジェクトを作成します。

ターミナルを開いて下記のコマンドを実行します。

• composerで新たにプロジェクト（gcp-webサービス）を作成する： composer create-project --prefer-dist laravel/laravel gcp-webservices
• Laravelソースディレクトリへの移動 cd gcp-webservices
• localhost起動： php artisan serve ブラウザで、 http://localhost:8000/　にアクセスしてください。 composer create-project --prefer-dist laravel/laravel gcp-webservices

ステップ５： Google Cloud SDK (for MAC OS 64bit)をインストールし初期化します。

ターミナルを開いて下記のコマンドを実行します。

• ダウンロードディレクトリへの移動： cd google-cloud-sdk
• Google Cloud SDKインストール：./install.sh
• GCPへのログイン： gcloud auth login gcloudコマンドラインが見付からない場合、下記のコマンドを追加してください。 source "/google-cloud-sdk/completion.bash.inc" source "/google-cloud-sdk//path.bash.inc"
• GCPのプロジェクト一覧を表示： gcloud projects list
• gcp-webserviceプロジェクトへの接続：gcloud config set project gcp-webservices
• デプロイ

1. 以下のようにapp.yamlファイルを作成します。 runtime: php72 env_variables: ## Put production environment variables here. APP_KEY: YOUR_APP_KEY APP_STORAGE: /tmp VIEW_COMPILED_PATH: /tmp SESSION_DRIVER: cookie

2. Laravelソースディレクトリに移動します。 cd gcp-webservices

3. app.yamlのYOUR_APP_KEYを以下のコマンドを実行して取得したキーに変更します。 php artisan key:generate --show

4. 以下のソースコードをreturnコマンドの上に追加することでbootstrap/app.phpを変更できます。 これにより、本番環境でのキャッシュのためストレージパスを/ tmpに設定できます。

# [START] Add the following block to `bootstrap/app.php` /* |-------------------------------------------------------------------------- | Set Storage Path |-------------------------------------------------------------------------- | | This script allows you to override the default storage location used by | the  application.  You may set the APP_STORAGE environment variable | in your .env file,  if not set the default location will be used | */ $app->useStoragePath(env('APP_STORAGE', base_path() . '/storage')); # [END]

5. Laravelソースディレクターに移動します。 cd gcp-webservices

6. beyondcode/laravel-dump-serverを実行してComposer依存関係を削除します。 これは、Laravelのキャッシュによってbootstrap/cache/services.phpで発生されるエラーの対応です。 composer remove --dev beyondcode/laravel-dump-server

7. Cloud Build APIをこちらで有効にします。

8. 下記のコマンドを実行してアプリをデプロイします。 gcloud app deploy --version develop（「develop」はデプロイする最初版です） 最初のデプロイ時にcomposer.lockファイルを削除する必要があります。 その後、composer.lock を.gcloudignoreファイルに追加してください。

9. http://YOUR\_PROJECT\_ID.appspot.com にアクセスしてLaravelのWelcomeページを確認します。 YOUR_PROJECT_IDをGCPプロジェクトIDに変更しましょう！ 例：https://gcp-webservices.appspot.com/

IV. 「Google Vision」API

ステップ1: 以下のコマンドで 「Google Vision」API をインストールします。 composer require wapnen/google-cloud-vision-php

ステップ2: 以下のURLの説明に従って service account keyを作成します。https://cloud.google.com/vision/docs/before-you-begin

Service account リストからNew service accountを選択します。

「Service account name」 項目に名前を入力します。（この例でtestを入力します。

それから 「Create」 をクリックすると.jsonファイルがダウンロードされます。このファイルを厳密に保管・管理しなければなりません。若し、他人はこのファイルを手に入れたら、このファイルで彼らの個人的なサービスを利用できますが、その費用を負担するのはあなたです。

V. 「Google Vision」API利用による画像からのテキスト検出・抽出

関連資料はgoogle-vision-phpホームページで参照できます。

いくつかのコードでは、簡単に実装できます。

key_pathを使って.envファイルを、IV で生成したkey.jsonファイルのパスへマウントするための環境変数として作成します。 この例にてkey.jsonファイルを 「google-credential」 フォルダーに保存し、それを案件のルートディレクトリに置きました。

そして.envファイルに以下のものが入ります。

以下の二つの処理を行うコントローラーを作成します。

1. リクエストからアップロードされた画像を取得すること。

2. 上記のソースコードを使うことでVision APIから返却されたテキストを表示させること。

annotateImage()関数だけを含まれる「AnnotationController」コントローラーを作成します。その中に以下のソースコードが入ります。

画像をアップロードする 「Upload image」ボタン、「Convert」 ボタンが入っている簡単なプログラムを作りました。

上記画像を選択して「Convert」ボタンを押下したら「Google Vision」が 「Upload image」や 「Choose File」 の文字列を検出・抽出できるかどうかを確認しましょう！

では、結果を確認しましょう。

すごい！正しいですね。では、今日本語テキスト画像で試しましょう！ 日本語ニュースのスクリーンショットを撮って試しましょう！

結果、どうでしょうか。

素晴らしいよね！

Part2に続く