みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
GASでサイドバーを作成する方法についてお伝えしています。
前回の記事はこちらです。
JavaScriptのコードをHTMLとは別のファイルに分ける方法をお伝えしました。
さて、サイドバーのボタンを押して「翻訳」つまりLanguagesサービスを使っていきたいのですが、その場合はGoogleサーバー内のGASのスクリプトで実行しなくてはいけません。
つまり、クライアント側のJavaScriptからサーバー側のGASを呼び出すということになります。
ということで、今回はGASでサイドバーのボタンを押してGAS側の関数を呼び出す方法をお伝えします。
では、行ってみましょう！
前回のおさらい
まず前回のおさらいからです。
前回、JavaScriptとCSSの部分を別ファイルに分割しましたので、全部で４つのファイルで構成されるプロジェクトとなりました。
まず、唯一のGAS側のコードの「コード.gs」。こちらは、「index.html」の内容をもとにサイドバーを表示するスクリプトです。
function showSidebbar() {
var htmlOutput = HtmlService.createTemplateFromFile('index').evaluate();
DocumentApp.getUi().showSidebar(htmlOutput);
}
表示するサイドバーの内容はこちらの「index.html」。
そして、その中に埋め込むJavaScriptおよびCSSを記述するファイルはこちらです。
js.htmlですが、サイドバーの「Translate」「Insert」をクリックすると、アラートを表示するという内容でした。
サイドバーのボタンクリックでGASの関数を呼び出したい
「アラートの表示」はブラウザの操作ですから、クライアント側のJavaScript、つまり「js.html」内にJavaScriptを書いてそれを動作させれば良かったのです。
ただ、翻訳をしたり、ドキュメントにテキストを挿入したり…それについては、ブラウザでは動きません。
GASはサーバーで動作しますので、「コード.gs」などのgsファイルに書かないといけないのです。
まあ、ダメ元で、ひとまず、書いて、みましょうか。
例えば、「コード.gs」に以下のような新しいfunctionを書いて保存します。
function logTest(data){
Logger.log(data);
}
それで、「js.html」のほうの関数translateTextを以下のように変更します。つまり、単純に「コード.gs」の関数logTestを呼び出してみようというわけです。
function translateText(){
logTest('Translateをクリックしたよ');
}
実行して、ボタンをクリックすると…何も起きませんね。ログ出力するだけですから。
で、ログを確認すると…
何にも出力されません。GASの関数logTestの呼び出しに失敗しているのでしょうか。
では、確認のためにChromeブラウザをお使いであれば F12 を押して、デベロッパモードを開いてみましょう。
logTest is not defined
「logTestが定義されていません」というわけですね。
つまり、クライアント側JavaScriptから、そのままサーバー側GASの関数は呼び出せないんです。
なお、このようにクライアント側のJavaScriptの動作はデベロッパーモードで確認することができますので、ご活用くださいね。
GASの関数を呼び出すgoogle.script.run
では、どうすればよいでしょうか？
GASには、クライアント側JavaScriptからサーバー側の関数を呼び出すための命令が用意されています。
google.script.runです。
これでOKです。
では、先程の「js.html」のコードを変更します。
function translateText(){
google.script.run.logTest('Translateをクリックしたよ');
}
これを保存して、サイドバーを再度表示、ボタンをクリックしてログを確認します。
このように、クライアント側JavaScriptから渡したデータをもとにログ出力ができていますね。
サーバー側の関数logTestを呼び出すことができました。
これで、サイドバーのボタンクリックで、GASの機能呼び放題です…！
まとめ
以上、GASでサイドバーのボタンを押してGAS側の関数を呼び出す方法をお伝えしました。
google.script.run、便利ですね！
次回は翻訳機能の実装まで進めていきます。
どうぞお楽しみに！