Google Apps Scriptを触ってみました
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で書かれたページとして出力されるようになりました。
課題1:ページに表示されるメッセージ
ページのトップに
上記のようなメッセージが表示されてしまいます。これは仕様なのかもしれません。
課題2:背景色の制御ができない
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);
<!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を使った場合
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>sudo test1</title>
<style>
body{
background-color:#cccccc;
}
</style>
</head>
<body>
</body>
</html>
---2018/05/27追記ここまで。
ひとまず現況の記録ということで。
Author And Source
この問題について(Google Apps Scriptを触ってみました), 我々は、より多くの情報をここで見つけました https://qiita.com/takako_sudou/items/c3d9c9acd0cc9b1e1f51著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .