Google Apps Script(GAS)でWEB-API(翻訳)を作成

今後、数回に渡って説明する翻訳/スピーチアプリケーションの機能概要を記します。
個々の詳細は、次回以降に記載したいと思います。
今回は、Google Apps Script(GAS)でWEB-APIを作成する方法の概要です！
今後想定して内容は以下です：

○翻訳アプリケーション及びWEBAPIの作成
○スピーチアプリケーション及びWEBAPIの作成
○音声入力の方法
○一括翻訳(日本語⇒英語、中国語、韓国語)
○WEB英文ページの翻訳表示及び任意言語変換
○音声入力、音声出力(ブラウザ機能及びWEB-API)
○画像から文字を抽出アプリケーション&WEB-API
○GASマクロの利用方法
○GASでメール送信、カレンダーイベント登録
○GASでグラフを作成する方法
○・・・・・・・・・・・・・

特記事項について

○GAS(Google Apps Script)環境は、基本的には無料のサービスですが、
○GCP(Google Cloud Platform)は有料のサービスです(但し無料で使用できる範囲があります)
※機能については、以下を参照して下さい：
※Google Cloud で簡単にビルド、テスト、デプロイ
※料金については、以下を参照して下さい：
Google Cloud Platform の無料枠
※今回の利用範囲では無料です、今の所、請求は来ていません。

用語について

今回使用する用語について整理する

WEB-APIとは

○有名なWEB-APIの例、無料/有料のサービスがありますが、代表的なWEB-APIの一覧を示します。
   公開されてWEB-API一覧(100例)

○有名な「Wikipedia API」の例、結果は「html」で返すように指定しています
   呼び出し例：http://wikipedia.simpleapi.net/api?keyword=Linux&output=html
   Linuxとは

○便利な「郵便番号検索API」の例、結果は「xml」で返してきます
   呼び出し例：http://zip.cgis.biz/xml/zip.php?zn=2470013
   郵便番号「2470013」の住所
○WEBAPIとは
   Webのブラウジングは閲覧者であるクライアントからWebブラウザを通して、「このサイトのデータが見たい！」とリクエストを送ります。
   アクセスを受けたWebサーバは、HTMLやCSSといったテキストデータ、画像や動画などのコンテンツをクライアントに対して提供します。
   Webサーバから配信されたデータを、ブラウザが受け取り・解釈し、人間に見やすいデザインに再現します。
   WEB-APIは、閲覧者のブラウザに変わり、プログラムが要求を出します。

○WEB-API説明図

ネット上からイメージが湧きやすい、説明図を列挙します。

   1.これから始めるエンタープライズ Web API 開発: https://www.ogis- ri.co.jp/otc/hiroba/technical/WebAPI/part1.html

   2.WEBAPI入門: https://www.slideshare.net/tmasao/web-api-49080729

   3.WebAPIについての説明: https://qiita.com/busyoumono99/items/9b5ffd35dd521bafce47

今回の構成について

ネットワーク上の構成図及び、アプリケーション構成画面です

ネットワーク上の構成図です
自宅サーバにアプリケーションを載せています
WEBAPIは、GAS/GCP環境に載せています
翻訳APIはGAS環境に載せています
スピーチAPIはGAS環境からGCPのSpeechToTextサービスを利用しています
WEBクライアントは、マイク、スピーカを使用して翻訳が可能です

日本語の音声入力、現在はブラウザ機能で実現していますが、WEB-API化準備中です
日本文⇒英文翻訳、英文⇒日本文翻訳機能があります
スピーチ機能も、日本文スピーチ、英文スピーチ機能があります
○「日本語を話す」ボタン：日本語音声入力が可能になります
○「英語に変換する」ボタン：日本文を英文に変換します
○「音声変換する」ボタン：テキストボックスの内容を音声に変換
○「▶」プレイボタン：音声を再生します
○「日本語に変換する」：ボタン：英文を日本文に変換します

ホームページの言語変換機能、現在は４言語としていますが100言語以上に対応可能です
GAS機能でWEB-APIを作成して実装しています
例えば、日本語ページと中国語ページを並行して見ることができます

画像から文字情報を抽出する機能
GoogleのVisionAPIを使用しています
回転した文字、帽子の書かれた文字も認識しています

翻訳APIを作成する

Google Apps Script(GAS)を使用して作成する、翻訳WEB-APIの概要です。
作成するAPI機能は、翻訳APIで、結果をJSON形式で返します

※サポートする言語数は100言語を超えています(日本語、中国語、韓国語、英語、独逸語、仏語・・・)。
○仕様について

○URLパラメータは以下：
  srcText:翻訳する英文の内容
  srcLang:英語(en)
  dstLang:日本語(ja)
○起動方法
  ブラウザから実行する場合、例えば以下のように指定する
  https://[URL]?srcText=”This is a pencil”&srcLang=en&dstLang=ja
○翻訳の結果
  英文を日本語に翻訳して、以下の様なJSON形式で返される
  { “result”:”これは鉛筆です”}
※WEB-APIなので、JavaScriptからも起動できる

○ソースコードについて

/* エントリポイント(method="get") */
function doGet(e) {
  var srcText = e.parameter.srcText;
  var srcLang = e.parameter.srcLang;
  var dstLang = e.parameter.dstLang;
  
  Logger.log("doGet:"+srcText+"*"+srcLang+"*"+dstLang);
  
  var result = LanguageApp.translate(srcText, srcLang, dstLang);
  
  return createaResponse(result);
}

/* JSON形式で返す */
function createaResponse(result) {
  var data = {result:result};
  var payload = JSON.stringify(data)
  var output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(payload);
  
  return output;
}

スピーチAPIを作成する

Google Apps Script(GAS)及びGCPのTextToSpeechサービスを使用して作成する、スピーチWEB-APIの概要です。
作成するAPI機能は、スピーチAPIで、結果をJSON形式で返します

○仕様について

○URLパラメータは以下：
  text:スピーチする英文の内容
  lang:スピーチ内容の言語
○起動方法
  ブラウザから実行する場合、例えば以下のように指定する
    https://[URL]?text=”This is a pencil”&srcLang=en&lang=en
○翻訳の結果
  英文のスピーチ内容をbase64エンコードしたもの(.mp3形式)を、以下の様なJSON形式で返される
  { “result”:”MP3形式のbase64エンコードしたもの”}

○ソースコードについて

/* エントリポイント(method="get") */
function doGet(e) {
  var text = e.parameter.text;
  var lang = e.parameter.lang;

  Logger.log("doGet:"+text+"*"+lang);
  
/*  var result = LanguageApp.translate(text, lang); */
  var result = SpeechToBase64(text, lang);
  return createaResponse(result);
}

/* JSON形式で返す */
function createaResponse(result) {
  var data = {result:result};
  var payload = JSON.stringify(data)
  var output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(payload);
  
  return output;
}

/* 音声作成して、BASE64で返す*/
function SpeechToBase64(srcText, lang) {

  var voices = {"ja":"ja-JP", "en":"en-US", "cn":"zh-CN","ko":"ko"}; 
  voice = voices[lang];
  
  speechText =srcText
  
   Logger.log(speechText);
   Logger.log(lang);
   Logger.log(voice);
     
  //cloudText-to-SpeechにAPIでリクエスト時に送るjsonを定義します。
  //synthesizeメソッドで使うパラメータはhttps://cloud.google.com/text-to-speech/docs/reference/rest/v1/text/synthesize?hl=jaを参照してください。
  var json = {
    "audioConfig": {
      "audioEncoding": "MP3",
      "pitch": "5.00",
     "speakingRate": "1.10"
    },
    "input": {
    "text": speechText
    },
    "voice": {
      "languageCode": voice,
/*      "name": "ja-JP-Wavenet-A" */
    }
  }

  //APIリクエストするためのペイロードやURL、ヘッダー情報を定義します。
  var payload = JSON.stringify(json);
  var url = "https://texttospeechURL/text:synthesize";  //左記のサービスは有料なので一部変更
  var headers = {
    "Content-Type": "application/json; charset=UTF-8",
    "Authorization": "Bearer " + ScriptApp.getOAuthToken(),
  };

  Logger.log(ScriptApp.getOAuthToken());

  //APIをポストするためのオプションを定義し、URLフェッチを行います。
  var options = {
    "method": "post",
    "headers": headers,
    "payload": payload,
    "muteHttpExceptions": true,
  };
  var data = UrlFetchApp.fetch(url, options);
  Logger.log(data);
  //取得したJSONデータをパースして取り扱えるようにします。
  var talkData =JSON.parse(data);


  Logger.log(talkData.audioContent);
  return talkData.audioContent;


}

WEB-APIを利用する側(クライアント)

作成した翻訳WEB-APIを、ブラウザから利用する方法と、HTML+JavaScriptで利用する方法を紹介します。
○ブラウザから直接実行する場合

○ブラウザアプリから実行する場合

○ソースコードについて

	
	





翻訳APIの動作確認
○正式URL

	    https://script.google.com/macros/s/[APIキー]/exec


○呼び出しサンプル

	    https://script.google.com/macros/s/[APIキー]/exec?srcText=The greatest traveler in the fish world are salmon.&srcLang=en&dstLang=ja



翻訳したい英文を入力して下さい：




The greatest traveler in the fish world are salmon.




翻訳した日本語内容です：
日本語翻訳した内容

次回は、