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






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

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(ApplicatioProgramInterface)
厳格な定義はないが、広義にはHTTPプロトコルを用いてネットワーク越しに呼び出すアプリケーション間、システム間のインターフェースのこと。
今回は翻訳API、スピーチAPIを作成する
GAS GoogleAppsScript
GASはJavaScriptに、Googleのサービスを利用するためのさまざまなオブジェクトを追加したものであり、
「Google Apps Script」という独自のスクリプト言語があるというわけではありません。
今回はGASを使用してAPIを作成する
GCP Google Cloud Platform
Google がクラウド上で提供するサービス群の総称です。
今回はTextToSpeechサービスを利用する
BASE64 バイナリデータを一定の規則に基づいてテキスト(文字)データに置き換える変換方式の一つで、
64種類の英数字のみを用いてデータを表現する方式。電子メールの添付ファイル(MIME)などでよく用いられる。
今回音声データはBASE64形式を使用する
JSON Javascript Object Notation
XMLなどと同様のテキストベースのデータフォーマットです。
例:{ “name”: “Tanaka”, “age”: 26 }
今回、WEB-APIの結果はJSON形式で返す。

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化準備中です
日本文⇒英文翻訳、英文⇒日本文翻訳機能があります
スピーチ機能も、日本文スピーチ、英文スピーチ機能があります
○「日本語を話す」ボタン:日本語音声入力が可能になります
○「英語に変換する」ボタン:日本文を英文に変換します
○「音声変換する」ボタン:テキストボックスの内容を音声に変換
○「▶」プレイボタン:音声を再生します
○「日本語に変換する」:ボタン:英文を日本文に変換します



ホームページの言語変換機能、現在は4言語としていますが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の動作確認





翻訳APIの動作確認

○正式URL
    https://script.google.com/macros/s/AKfycbwhX4z2Tl3Z01op7UhNu9ShQpNHp3ilJoK0E4kcVB2PZBsMGg4/exec
○呼び出しサンプル
    https://script.google.com/macros/s/AKfycbwhX4z2Tl3Z01op7UhNu9ShQpNHp3ilJoK0E4kcVB2PZBsMGg4/exec?srcText=The greatest traveler in the fish world are salmon.&srcLang=en&dstLang=ja

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



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

次回は、

今回は初回ということで、作成するWEB-APIの概要を記しました
次回は、サーバレス環境とGASについて、初歩から、やって行きたいと考えています
特に、GAS環境について、詳しくやって行きたいと考えています
またGAS/GCP環境の設定方法も合わせて、詳細いたします。

著者:志村佳昭(株式会社トリニタス 技術顧問)