Google Apps Script試行錯誤 Blog: HTML Serviceの.html側から.gsのコードを実行して結果を受け取る

2017年12月10日日曜日

HTML Serviceの.html側から.gsのコードを実行して結果を受け取る

.html側から.gs側へ「hello」を送って
.gs側で「, world」をくっつけて返し
成功したらalertに結果を出して失敗したらalertにメッセージを出す
というコードの例です

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function get_value_gs(value) {
  var result = value + ", world";
  return result;
}

意訳.gs

この処理は以下を実行する
指定したHTMLファイルを表示する


この処理は以下を実行する
受け取ったvalueにテキストを追加して
返す

index.html

<!DOCTYPE html>
<html>
<body>
  <input type="button" id="bt" value="get value">
</body>
<script>
  document.getElementById("bt").onclick = get_value;

  function get_value() {
    var value = "hello";
    google.script.run
      .withFailureHandler(onFailure)
      .withSuccessHandler(onSuccess)
      .get_value_gs(value);
  }

  function onSuccess(result) {
    alert(result);
  }

  function onFailure(e) {
    alert([e.message, e.stack]);
  }
</script>
</html>

意訳.gs

HTMLであることを宣言する
ここからhtml
ここからbody
ボタンを配置
ここまでbody
ここからscript
btというidがクリックされたらget_valueを実行する

この処理は以下を実行する
valueにhelloを入れる
以下の処理を下から順に実行する
失敗したらonFailureを実行する
成功したらonSuccessを実行する
get_value_gsを実行する


この処理は以下を実行する
受け取ったresultをアラートに出す


この処理は以下を実行する
エラーメッセージと過程をアラートに出す

ここまでscript
ここまでhtml

関連記事

Google Apps ScriptのWebアプリ雛形

参考

Class google.script.run (Client-side API)
https://developers.google.com/apps-script/guides/html/reference/run