ログが残る翻訳アプリを作ってみる

どうもこんばんは、みかんです。

！！！！とつぜんですがたいせつなおしらせ！！！！

2020年1月27日
App Maker の提供終了に向けた対応のご案内
https://support.google.com/a/answer/9682494?p=am_announcement&visit_id=637157414793613981-426262357&rd=1

??!???!?!?!???!?

残念ながら2021年1月19日には終了してしまうそうです(涙)
移行先はAppSheetかApp EngineかGoogleフォームだそうです・・・

消すのは忍びないので記事は残して置きますが、何かの間違いじゃ無い限り役に立つことはないでしょう・・・

！！！！おしらせはおわりです！！！！！

今回は「ログが残る翻訳アプリを作ってみる」を書いてみます。
下記ステップでやっていきます。

• 1 下準備
• 2 実行してみる
• 3 日本語を選択肢に増やす
• 4 ログが残るようにしてみる

1 下準備

まずはアプリの新規作成ですね。
Blank Appでイチから作るか、言うてStarter Appから始めるか。。。

サンプル: 翻訳

こんなところにとても良さそうなサンプルがありました！
偶然にも程がありますよね(棒読み）

感謝の正拳突き(クリック)をしてみるとこのような感じに。
これは翻訳をしてくれるアプリですが、アプリ自体の翻訳は自分でやる必要があります。

ジャン

2 実行してみる

見事に英語からスペイン語に翻訳されました！
・・・スペイン語読めないんで見事なのかどうかサッパリわかりませんけどね！

3 日本語を選択肢に増やす

先程のプレビューで言語の選択肢を押して見ると、なんと日本語がありません（涙）
もちろん英語から日本語にしてもらう気でいるので、無いと困ってしまいます。

というわけで、いじっていきましょう。

まずは翻訳を実行するまでの流れを見ていきます。

処理の起点はこの「翻訳実行」ボタンなので、そこのonClickを見てみます。
onTranslateButtonClick(widget);という関数を呼び出していますね。

SCRIPTSのClientScriptを見てみます。

関数が２つありますね。
onPageAttach(page)の方では、ページのカスタムプロパティに初期値を入れているようです。最初から英語とスペイン語に設定していたのはここのコードだったということですね。onAttachイベントというのは、ページが表示された時 (表示するためにアタッチされた時）に処理をするためのイベントです。
初期値はDBから読み出すとしたほうが色々良かったりしますが、規模が小さいアプリなんかではこんなやり方でも十分だと思います。

脇道にそれましたが、ボタンから呼んでいたのはonTranslateButtonClickという関数です。
見てみると、サーバースクリプトにそのまま変換よろしく！ってやってるだけのようですね。
こちらでもページのカスタムプロパティをガンガン使ってますね。

ならばとサーバースクリプトを確認すると、こうなっています。

/**
 * Serviceを使ってテキストを翻訳します。
 * @param {string} sourceLanguage - 元の言語
 * @param {string} targetLanguage - 変換後の言語
 * @param {string} sourceText - 変換するテキスト
 * @return {string} 変換されたテキスト.
 */
function translate(sourceLanguage, targetLanguage, sourceText) {
  return LanguageApp.translate(sourceText, sourceLanguage, targetLanguage);
}

LanguageApp.translateという関数に後よろしく！ってやっているだけのようですね！
シンプルの極みでした。動きも想像が付きますね。

さて、元々やりたかったのは言語を増やすことです。
言語選択の結果は、translate関数に対してはsourceLanguageおよびtargetLanguageに渡しています。
元のクライアントスクリプトも、props.SourceLanguageとprops.TargetLanguageから拾っているだけです。
onPageAttach関数でも、初期値を設定しているだけに過ぎません。

ということで答え合わせですが、選択を可能とするウィジェット「Dropdown」を見ていきます。
まんまプロパティの方に答えが書いてありますね。

画面で選ぶ時に表示される文字はnamesというプロパティに設定します。
namesに対応する、プログラムで参照する文字列はoptionsというプロパティに設定します。
そして実際に選んだ選択肢はvalueに設定されます。設定される文字列はoptionsに指定されているものです。

ここでvaluesの設定では@properties.SourceLanguageとバインディングがかけてあるので、ユーザーが選択した内容は、ページのカスタムプロパティSourceLanguageまたはTargetLanguageにも同時に設定されます。
これらは、クライアントスクリプトの中で参照していましたね。

よって、このoptionsとnamesの値を編集すれば良さそうです。
実最終的にtransalte関数に渡されるのはoptionsの方で、現在は['en', 'es', 'fr', 'it', 'de', 'ru'] と設定されています。
まずは、ここに日本語っぽい文字列を入れてみる形になります。

当てずっぽうでも当たりそうですが、キチンと公式ドキュメントを見てみることにしましょう。

下記が、LanguageAppのtranslate関数のドキュメントです。
https://developers.google.com/apps-script/reference/language/language-app#translate(String,String,String)

LanguageAppを用意しているのはApp Makerではなく、Google Apps Scriptになります。なのでそういったドキュメントは基本的にこちら側に存在します。GASのドキュメントはガイドも含め英語で、なにやら大変そうですが、やっている人も多いのでググれば大体解決します。解決しないこともあります。

A list of language codes is available here.
と書いてあるのでhereしてみます。

欲しい情報にたどり着けた気がしますね！
ドキュメントを見ると、日本語はjaということがわかりました。

さっそく、optionsとnamesをそれぞれ
['en', 'ja', 'es', 'fr', 'it', 'de', 'ru']
['English', '日本語', 'Spanish', 'French', 'Italian', 'German', 'Russian']
という感じで、上の方に日本語を追加してみましょう。

そして実行。

バッチリですね。

4 ログが残るようにしてみる

サンプルのまんまだと、本家Google翻訳の単なる劣化版なので面白くないです。
なのでとりあえず本家には無い機能を作ってみましょう。

ログが残るようにしてみます。
次のようなモデルを作ります。

とりあえずこんなもんでいいでしょう。作成日に関しては、自動的に付与されるようにしたいと思います。

onBeforeCreateという、レコード作成手前で処理をかけるイベントあるので、そこに新しい日付データを設定するコードを書くことで、必ず作成日が付与されるように強制することができます。

翻訳を実行したタイミングで、このログデータが自動的に記録されるようにコードを書きます。

こんなふうに書きます。createItem()は、関数を指定しておくとレコードが作られた後にその関数をレコードと共に呼び出してくれるので、そのレコードにログに残したい追加データを記録しているイメージです。
書いた後に気づきましたが、EmailもonBeforeCreateに書けば良さそうですね。

最後に、ログデータを確認するためのテーブルを、画面の下の方に設置します。

ということで実行してみます。

本家にも履歴があります？
いやいやこれはアプリ使う人みんな共通なので。みんなの利用っぷりを見て何かができる点が違いますって！
海外出張予定組で一緒に使ってもらって、一緒に勉強してる感出すとか。きっと何かあるはず。。

以上です。良いApp Makerライフを!