デベロッパー

Google Cloud Vision API と Apps Script を使用して G Suite アプリを構築する

2020年7月6日

https://storage.googleapis.com/gweb-cloudblog-publish/images/Google_Blog_HowTo_01.max-1500x1500_he7RiMe.jpg

Google Cloud Japan Team

Google Workspace を無料で体験

ビジネスメール、ストレージ、ビデオ会議など、さまざまな機能をご利用いただけます。

※この投稿は米国時間 2020 年 6 月 19 日に、Google Cloud blog に投稿されたものの抄訳です。

Google Cloud Vision API は、画像ラベリング、顔やランドマークの検出、光学式文字認識（OCR）などの視覚検出機能を備えたアプリの開発を支援する強力なツールです。Apps Script を使用すると、このようなサービスの構築を比較的簡単に始められます。Apps Script はシンプルな REST 呼び出しを使用して API と直接やり取りするため、SDK のセットアップやクライアントライブラリのダウンロードが必要ありません。

このチュートリアルでは、次のことを行う方法を説明します。

1. Vision API を使用するために GCP プロジェクトを作成または構成する。

2. ユーザーが画像 URL を入力できる Apps Script ウェブアプリを作成する。

3. ウェブアプリを更新して、Vision API への REST 呼び出しを行い、結果を処理する。

始める前に、Google Cloud Platform（GCP）でプロジェクトを作成できることを確認してください。また、Apps Script や JavaScript の基本的な知識も必要です。

ステップ 1: GCP プロジェクトの作成と構成

Vision API を使用するには、GCP プロジェクトを作成するか、既存の GCP プロジェクトを構成する必要があります。

新しい GCP プロジェクトを作成するには:

● https://console.cloud.google.com にアクセスし、[新しいプロジェクト] を作成します（「Vision API Fun」という名前を付けることができます）。

● 関連付ける請求先アカウントを選択します。

● [組織] と [場所] はデフォルト値をそのまま使用します。

● [作成] をクリックして、コンソールで新しいプロジェクトを選択します。

次に、以下のように、プロジェクトで Vision API を有効にする必要があります。

● メイン GCP ダッシュボードから、[API の概要に移動] をクリックして、[API とサービス] ダッシュボードを開きます。

● 次をクリックします。

https://storage.googleapis.com/gweb-cloudblog-publish/images/1_cTa1zXD.max-500x500_oaT3E4H.jpg

「Vision API」を探します。
「Cloud Vision API」が見つかったら、[有効にする] をクリックします。

https://storage.googleapis.com/gweb-cloudblog-publish/images/2_bMRKLqp.max-800x800_UjV5vS9.jpg

有効にしたら、左側に表示される [認証情報] をクリックします。
認証情報の画面で、[+ 認証情報を作成] をクリックして、[API キー] を選択します。

https://storage.googleapis.com/gweb-cloudblog-publish/images/3_SreRK4U.max-1100x1100_WfKTY0e.jpg

API キーを生成したら、後で使用するためにキーをコピーしておくことができるダイアログが表示されます:

https://storage.googleapis.com/gweb-cloudblog-publish/images/4_DkF4ho1.max-1000x1000_SK4lM76.jpg

GCP のセットアップは以上です。

ステップ 2: ウェブ UI とサーバーコードのための Apps Script プロジェクトの作成

アプリのコンポーネントを構築する前に、これから構築するアプリの全体的な流れを確認しましょう。

https://storage.googleapis.com/gweb-cloudblog-publish/images/5_yaazCh3.max-1700x1700.jpg

概して、このアプリは画像 URL を収集して Cloud Vision APIに送信するウェブ UI で構成されます。API は画像をテキストに変換し、JSON レスポンスでウェブ UI に送り返します。

アプリのビルド

GCP のセットアップに使用したものと同じアカウントを使用して、script.google.com に移動します。[新しいプロジェクト] ボタンをクリックし、プロジェクトに「Vision API Fun」という名前を付けて、[保存] をクリックします。

●Apps Script ファイル、Code.gs を以下のように編集します。

読み込んでいます...

● APIkey グローバル変数は、前のステップで生成したキーを使用して必ず編集するようにしてください。

● プロジェクトを保存します。

● Code.gs ファイルには、「Main」というファイルへの参照があることがわかります。

○HtmlService.createTemplateFromFile('Main').evaluate()

● このため、Main.html という HTML ファイルを作成します。

○[ファイル] -> [新規] -> [HTML ファイル]

○ダイアログでファイルに「Main」という名前を付け、[OK] をクリックします。

○新しいファイルを次のように編集します:

読み込んでいます...

<!DOCTYPE html>
<html>
   <head>
      <base target="_top">
      <script>
         function callVisionAPI(){
           var status = document.getElementById('status'); 
           var imgUrl = document.getElementById('imgUrl');
           status.innerHTML = "<b>Calling VISION API with imgUrl: </b>" + imgUrl.value;
           console.log("Calling Vision API w/ imgUrl: " + imgUrl.value);
           google.script.run
             .withFailureHandler(function(error) {
               status.innerHtml = 'Error calling server function makeRequest: ' + error;
             })
             .withSuccessHandler(function(result){
             console.log('Raw response from Vision API: ' + result);
               var JResp =  JSON.parse(result); 
               showResponse(JResp, imgUrl.value);
           }).makeRequest(imgUrl.value);  
         }
         
         
         function showResponse(JSON, imgUrl){
           var status = document.getElementById('status');
           var imgTag = document.getElementById('ImgTag');
           if (typeof(JSON['responses'][0]['textAnnotations']) != "undefined"){
             var textResp = JSON['responses'][0]['textAnnotations'][0];
             var description = textResp["description"];
             var locale = textResp['locale'];    
             status.innerHTML = '<b>Converted Text:</b> ' + description;
             imgTag.src = imgUrl;      
           } else
             status.innerHTML = 'Unable to analyze text. Try an image with better contrast.';
         }
             
      </script>
   </head>
   <body>
      <h2>Google Cloud Vision API & G Suite</h2>
      <h3>Document Text Detection (OCR)</h3>
      <div>
         <input id="imgUrl" type="text" placeholder="http://<<URL of image>>" size="80"/>
         <button onClick="callVisionAPI()">Call Vision API</button>
      </div>
      <br/>
      <div>
         <image id="ImgTag" height="400" width="600"/>
      </div>
      <br/>
      <div id="status"></div>
   </body>
</html>

●プロジェクトを保存します。

この Vision API アプリを動かすのに必要な Apps Script コードはこれだけです。

ステップ 3: アプリの試行

次に、Apps Script プロジェクトをウェブアプリとしてデプロイして、アプリをテストしましょう。

●[公開] > [ウェブアプリとしてデプロイ…]

https://storage.googleapis.com/gweb-cloudblog-publish/images/6_GOeps1U.max-800x800_IIZ1ZpY.jpg

デフォルトのオプションを受け入れて、[デプロイ] をクリックします。

注: 最初のデプロイ時に、次の認可手順がトリガーされます:

https://storage.googleapis.com/gweb-cloudblog-publish/images/7_ASLVwnM.max-800x800_w1vc63p.jpg

[許可を確認] をクリックして、許可ダイアログに進みます。

https://storage.googleapis.com/gweb-cloudblog-publish/images/8_JKdjoP6.max-900x900_dl9umwk.jpg

●[許可] をクリックします。

●そうすると、実際のデプロイダイアログが表示されます
（以降のデプロイでは、これらの認可手順はスキップされます）。

●重要な注意事項: 一般ユーザー向けアカウントや Gmail アカウントを使用する場合など、特定のケースでは、「このアプリは確認されていません」という警告ダイアログが表示されます。

https://storage.googleapis.com/gweb-cloudblog-publish/images/9_oBbsCPn.max-1200x1200_vmLTDGL.jpg

これは、自分だけが実行できる独自のアプリには適用されない、追加のフィッシング対策です。続行するには、[詳細] リンクをクリックし、[テストプロジェクトに移動（安全でない）] をクリックします。詳しくは、こちらのガイドをご覧ください。

https://storage.googleapis.com/gweb-cloudblog-publish/images/10_4wJqpvV.max-800x800_arsCsR5.jpg

●[OK] をクリックする前に、ウェブアプリの URL をコピーするか、ダイアログの [最新のコード] をクリックします。このリンクをクリックするだけで、ウェブアプリのアドレスが読み込まれたブラウザウィンドウが起動します。

●繰り返しになりますが、アプリをテストするために、ウェブアプリの URL をブラウザに貼り付けるか、デプロイ画面の [最新のコード] リンクをクリックします。

●ブラウザがアプリをロードすると、画像 URL の入力フィールドと [Call Vision API] ボタンがレンダリングされます。

https://storage.googleapis.com/gweb-cloudblog-publish/images/11_Cf8ZRpd.max-1200x1200_9LXE1ba.jpg

アプリを実行するには、テキストが含まれている画像を探し、その URL をアプリの入力フィールドに入力する必要があります。デプロイされたアプリは、この画像にアクセスできる必要があります。アプリを作成したアカウントからアクセスできない場合、アプリはこの画像を分析できません。
この例では、ゲティスバーグの演説を印刷したものの写真を撮り、次のように、それを Google Cloud Storage の共有バケットにロードしました:

https://storage.googleapis.com/gweb-cloudblog-publish/images/12_gt5pe71.max-600x600_D0dN1YA.jpg

ユーザー独自の画像 URL を入力するか、上の Google Storage にロードした画像を使用します。

○重要な注意事項: Google Cloud Storage の画像を使用する場合は、最初にブラウザで画像を個別に表示してから、次のような形式の拡張 URL をコピーして使用する必要があります: https://...-apidata.googleusercontent.com/download/storage/v1/b/<<path-to-bucket>>?qk=...

[Call Vision API] をクリックして変換を開始します。

https://storage.googleapis.com/gweb-cloudblog-publish/images/13_2LyNk6u.max-1400x1400_dqqU7Az.jpg

●成功すると、「Converted Tex」セクションが画像の下に表示されます。

仕組み

ここで仕組みをより明確に把握するために、この例の主要な要素をいくつか見て行きましょう。GCP プロジェクトの部分は、Vision API へのアクセスを可能にするだけです。この例で実際に重要部分は、以下を実行する Apps Script コードにあります。

●画像 URL を収集するためのシンプルなウェブ UI を提供する。

●次に、REST 呼び出しを介して、API キーとともに画像 URL を Vision API に送信する。

●API がレスポンスを送信し、ウェブアプリが変換されたテキストで UI を更新する。

画像 URL を収集するウェブ UI を構築する

Apps Script を使用してウェブアプリを構築するのはとても簡単です。これには HTML ファイルを呼び出す初期コードを使用します。Apps Script プロジェクトとそのデフォルトの Code.gs ファイルを作成した後、ブラウザからの HTTP GET リクエストに doGet() を使用して応答し、「Main」という名前の HTML ページを返すコードスニペットを追加します。

読み込んでいます...

これが、入力フィールドとボタンを表示するための UI コードを含む個別の HTML ファイルMain.html を作成する必要がある理由です。

読み込んでいます...

Main.html には、選択された画像（ImgTag）と Vision API からのレスポンステキスト（status）の両方のプレースホルダとして機能する div タグも含まれています。

読み込んでいます...

Vision API を呼び出して結果を処理する

この例の要点は、Vision API を呼び出して結果を処理する 2 つの関数にあります。この関数は、Main.html ファイルまたは別のファイルに追加することもできます。わかりやすくするために、コードは Main.html ファイルに直接追加します。

そして、このコードの中核となる内容は次のとおりです。

読み込んでいます...

このコードは、画像 URL を使用してサーバー側の関数 makeRequest() を呼び出します。呼び出しが完了したら、showResponse() を呼び出して、レスポンスを処理して表示します。

読み込んでいます...

このコードは、API から返された JSON からテキストレスポンスを抽出し、変換されたテキストで HTML div statusを更新します。

そして最後に、Code.gs ファイルのサーバー側コード makeRequest() は次のとおりです。

読み込んでいます...

このコードの重要な部分は、関数 buildJSONRequest() を使用して JSON リクエストを作成することです。

読み込んでいます...

この関数は、画像 URL とリクエストタイプ DOCUMENT_TEXT_DETECTION を使用して、適切にフォーマットされた JSON を組み立てます（Vision API のテキスト検出機能で詳細をご覧ください）。

この JSON オブジェクトは、Apps Script の UrlFetchApp.fetch() 呼び出しを使用して API エンドポイントに送信されます。

レスポンスが返されると、それがクライアントに返され、変換されたテキストでウェブページが更新されます。

考慮すべき次のステップ

この例からわかるように、G Suite アプリケーションを Vision API に接続することは、Apps Script プロジェクトの Main.html と Code.gs の 2 つのファイルを使用するだけで簡単に行えます。このアプリの構築と拡張を続けるには、Apps Script を使用して、生成されたテキストから新しいドキュメントを作成したり、言語を検出したりするだけでなく、Google Cloud Translation API を使用してドキュメントをお好みのターゲット言語に翻訳することもできます。

これらの手順は、以下のガイダンスに従うことで、この開始手順の例に比較的簡単に追加できます。

●ドキュメントの作成レスポンステキストは Apps Script のサーバーで利用できるため、DocumentApp.create() 関数を使用して、変換されたテキストで Google ドキュメントを簡単に作成できます。詳細については、こちらをご覧ください。

●言語の検出テキストの言語を判別するには、Apps Script のUrlFetchApp.fetch() 呼び出しを使用して、REST 呼び出しを介して、Google Translate API を使用できます。詳細についてはこちらをご覧ください。

●言語の翻訳テキストを別の言語に翻訳するには、Apps Script 関数 LanguageApp.translate() を使用するだけです。詳細については、こちらをご覧ください。

この例が、皆さんの G Suite アプリに多数の新しい優れたビジュアル AI 機能を追加するきっかけとなることを願っています。G Suite のビルドまたは Vision API を使用した開発の詳細については、それぞれのデベロッパーページをご覧ください。また、7 月 14 日から開催される Next OnAir にご登録ください。

- Google Cloud デベロッパーアドボケイト Christian Schalk

投稿先