HTMLからgsファイル内の関数を呼び出す方法

スポンサーリンク

ソース

main.gsをこんなふうに作成

function getHello() {
  return "Hello World";
}

function hello (message) {
  Logger.log(message);
}


index.htmlをこんなふうに作成

<!DOCTYPE html>
<html>
  <head>
    <script>
      google.script.run.withSuccessHandler(hello).getHello();
    </script>
  </head>
  <body>
  </body>
</html>

ざっくりとした解説

google.script.runでサーバーサイド(gsファイル)の関数をクライアントサイド(HTML)から呼ぶことができます。

詳しくはGoogleAppScriptの公式ドキュメントに載っています。

Class google.script.run (Client-side API)  |  Apps Script  |  Google Developers

ドキュメントによると、

google.script.run is an asynchronous client-side JavaScript API

asynchronousとあるように、google.script.runは非同期なAPIです。
非同期処理は呼び出すタイミングを間違えるとすーぐぬるぽ(NullPointerException)を吐くので注意が必要です。
(取得してるつもりの値がとれてない!なんてことが頻繁に起こる)

今回の場合、呼び出される順番は

google.script.run → getHello → hello

の順です。
getHelloの返り値がhelloの第一引数となります。getHelloが問題なく実行されたらwithSuccessHandlerの中の関数が実行されます。
実はgoogle.script.runにはwithFailureHandlerというのもありまして、本当はそれも実装しないといけないんでしょうけどめんどいので割愛。
(動きゃあいいんだよ!動きゃあ!(屑エンジニア))

非同期処理についてはこちらをどうぞ(Androidを例に取ってますが、非同期処理に関してはGASもAndroidも共通してます)

www.sirloin-nagurigaki.net

参考

Class google.script.run (Client-side API)  |  Apps Script  |  Google Developers

【GAS】html Serviceでスプレッドシートの値を非同期に取得する - Qiita

GASのWebアプリでクライアント側JavaScriptからサーバー側の関数を呼び出す方法

https://www.hop-step-engineering.com/wp/wp-content/uploads/2018/07/GoogleAppsScript.png

にほんブログ村 IT技術ブログへ
にほんブログ村