Googleの翻訳AIのページ作りのお手伝い

知り合いの方が、Googleの翻訳AIを使った多言語翻訳機のWebページを作られました。英語をはじめとした様々な言語に翻訳してくれてすごいのです。

ただ翻訳結果の表示があっさりとしたテキストのみ表示になってしまうということで、私も内容をチェックしてみることにしました。

Google Apps Script

Webページのソースに書かれていたJavaScriptをチェックしてみたところGoogle Apps Scriptを使っているらしいことが分かりました。

Google Apps Scriptは以前から興味があり、良い機会なので触ってみることに。

はじめてのGoogle Apps Script

Google Apps Scriptにアクセスしてみました。
https://script.google.com/home
Googleにログイン済みだったため、あっさりアクセスできました。

手順

こちらの記事を参考にさせて頂きました。
「3 分で作る無料の翻訳 API with Google Apps Script」
https://qiita.com/tanabee/items/c79c5c28ba0537112922

スクリプトの準備

記事に従って新規スクリプトとプロジェクトを作り、スクリプトをコピペ。

HTMLファイルの準備

知人のHTMLファイルの内容や記事を参考に、Google Apps Scriptで「ウェブアプリケーションのURL」として出力されたものを埋め込んだHTMLファイルを作り、レンタルサーバにアップしました。

結果

知人のサイトと同じ状況が再現できました！

対策

変更前


function doGet(e) {
  var p = e.parameter;
  var translatedText = LanguageApp.translate(p.text, p.source, p.target);
  return ContentService.createTextOutput(translatedText);
}

知人の希望が、翻訳結果の表示について文字の大きさや背景色を整えたいとのことでしたので、HTMLタグやbodyタグが書けるHTMLとして出力できるか変更してみました。

変更後


function doGet(e) {
  var p = e.parameter;
  var translatedText = LanguageApp.translate(p.text, p.source, p.target);

  return HtmlService.createHtmlOutput(translatedText);
}

これで翻訳結果がHTMLで書かれたページとして出力されるようになりました。

課題１：ページに表示されるメッセージ

ページのトップに

上記のようなメッセージが表示されてしまいます。これは仕様なのかもしれません。

課題２：背景色の制御ができない

HtmlService.createHtmlOutput(translatedText);
で生成されるオブジェクトによってWebページが表示されるのですが、背景色の設定方法などが分かりませんでした。

2018/05/27追記

対策

背景色は変えられるようになりました。ひとまずHTMLで背景色の設定をしています。（~~CSSでもできそうですがテストは改めて。多分~~ できました）


function doGet(e) {
  var p = e.parameter;
  var translatedText = LanguageApp.translate(p.text, p.source, p.target);

  // 背景色を指定したひな形HTMLファイルを準備しました
  var html = HtmlService.createHtmlOutputFromFile("trans.html");

  // ひな型HTMLに、翻訳結果を追加
  var out = html.append(translatedText);  

  // 出力用にリターン
  return(out);

trans.html


<!DOCTYPE html>
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test1</title>

</head>

<!-- 背景色の設定を指定 -->
<body bgcolor="#00cccc">

</body>
</html>

埋め込みCSSを使った場合