Google Apps Scriptでサイドバーから呼び出したGAS関数からその戻り値を受け取る方法


call-back

photo credit: Go-tea 郭天 Connexion established? via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

GASでサイドバーを作成する方法についてお伝えしています。

前回の記事はこちら。

Google Apps Scriptでサイドバーのボタンを押してGAS側の関数を呼び出す方法
Google Apps Scriptでサイドバーを作成する方法についてお伝えしています。今回はGASでサイドバーのボタンを押してGAS側の関数を呼び出す、google.script.runの使い方をお伝えします。

サイドバーのボタンをクリックしてGASの関数を呼び出す方法をお伝えしました。

で、GASの関数を呼び出すのはOK。その際にデータを渡すこともできる。

では、GAS関数から再度サイドバーにデータを投げ返したいこと…ありますよね?

ということで、今回はGoogle Apps Scriptでサイドバーから呼び出したGAS関数からその戻り値を受け取る方法です。

では、行ってみましょう!

前回のおさらい

では、まずおさらいからです。

まず、サーバー側GASの「コード.gs」はこちら。

showSidebarは「index.html」をもとにサイドバーを表示する関数、logTestはサイドバーのボタンクリックで呼び出されてログを出力するというものです。

こちらがサイドバーに表示する内容を記述している「index.html」です。

それで、その「index.html」に埋め込むJavaScriptとCSSを記述する、「js.html」と「css.html」がこちら。

「js.html」では、サイドバーの「Translate」ボタンのクリックにより、GAS側の関数「logTest」を呼び出す内容になっていますね。

さて、ゆくゆくはGAS関数を呼び出して、Languageサービスで翻訳をして、その結果をサイドバーに反映したいのです。

ですから、呼び出したGAS関数からサイドバー側にデータを投げ返す方法を知る必要があるんですね。

今回は、その部分を進めていきます。

呼び出したGAS関数の戻り値を受け取る

サイドバーから呼び出したGAS関数の戻り値をサイドバーで受け取るには、前回大活躍したgoogle.script.runオブジェクトがポイントになります。

google.script.runオブジェクトのwithSuccessHandlerメソッドを使います。

google.script.run.withSuccessHandler(コールバック関数).関数名(引数1, 引数2,…)

ちょうど、runの間と、GASで呼び出す関数名の間に「withSuccessHandler(コールバック関数)」が入る感じですが。

ふむ…コールバック関数…ちょっとややこしいですね。

もうちょっと噛み砕いて書くと、こう書けます。

google.script.run
 .withSuccessHandler(function(仮引数){ //呼び出し成功時の処理 })
 .関数名(引数1, 引数2,…)

動作としては以下のようになります。

  1. サーバー側GASの「関数名」で指定された関数を呼び出す
  2. その呼び出しが成功したら、その戻り値を仮引数で受け取り「//呼び出し成功時の処理」を実行

お…良さそうですね。

GAS側から戻り値を受け取りアラート表示する

では、呼び出したGAS関数から文字列をほぼオウム返しして、それをアラート表示するようにしていきましょう。

まず、「コード.gs」のlogTestですがログ出力ではなくて、returnで戻り値を返すように変更しましょう。一応、GAS側から戻したという印として「★」をつけてます。

サイドバー側の「js.html」ですが、ボタンを押された際にそのlogTestを呼び出しますが、その呼び出し成功時に戻り値を仮引数dataに受け取り、それをアラート表示するというものです。

実行結果

では、実行して試してみましょう。

各ファイルを保存して、サイドバーを表示して、サイドバーの「Translate」ボタンをクリックします。

GAS関数から受け取った値をアラート表示

このように、バッチリGAS関数logTestから受け取った文字列をアラート表示することができました。

まとめ

以上、Google Apps Scriptでサイドバーから呼び出したGAS関数からその戻り値を受け取る方法をお伝えしました。

これで、サイドバーからサーバー側のGASへ、そしてその結果をサイドバーへ…というデータの受け渡しができるようになりました。

あとは、その結果をテキストエリアに放り込みたいですね…

次回以降、その部分を進めていきます。

どうぞお楽しみに!

連載目次:GASで初めてのサイドバーを作ろう!

Google Apps Scriptではスプレッドシートやドキュメントの業務を手助けするサイドバーを自作することができます。このシリーズではHTMLを学びながらサイドバーの作り方を易しく紹介していきます。
  1. Google Apps Scriptでサイドバーを作る方法のはじめの一歩の概要編
  2. Google Apps Scriptで最も簡単なサイドバーを作成する方法
  3. Google Apps Scriptでサイドバーを作るための初めてのHTML基礎知識
  4. GASでサイドバーを作るときに使用するいくつかのフォーム部品の作り方
  5. GASによる自作のサイドバーにCSSパッケージを適用する方法
  6. GASのサイドバーをdivタグ&class属性でスタイル設定する
  7. Google Apps Scriptでサイドバーのボタンを押して動作させる方法
  8. GASでサイドバーを作る際にJavaScriptを別ファイルに分離する方法
  9. Google Apps Scriptでサイドバーのボタンを押してGAS側の関数を呼び出す方法
  10. Google Apps Scriptでサイドバーから呼び出したGAS関数からその戻り値を受け取る方法
  11. Google Apps Scriptのサイドバーでテキストエリアを翻訳するスクリプト
  12. GASでGoogleドキュメントのカーソル位置にテキストを挿入する方法

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

コメント