HTMLからGASへデータを転送する方法

2022/05/06

以前、GASからHTMLへのデータの受け渡し方法について書きましたが、逆のパターンを紹介していなかったので書きます。

Google Apps ScriptはPHPのようにHTML内に埋め込むことができる

前回、Google Apps Script（GAS）から送った値をHTMLで受け取って表示する方法について書きました。これだと、値だけを送るのでHTML側で動的な処理をさせることができません。あとタグと一緒に送ってもタグがブラウザで表示されるだけになってしまいます。（これもPHP的）HTMLファイル内で動的に処理したい場合は、PHPのように <? ?> 内でGASコードを埋め込むことができます。gsファイルでまとめるよりはこっちの方が楽かもしれません。もちろんスプレッドシートにもアクセスできます。スプレッドシート側のデータ以下...

以下の動画のようにモーダルウィンドウ（HTML）内のボタンを押すと、「OK」というデータがGAS側に送られ、それをシートに書き込むという単純なプログラムです。

GAS側のプログラム

ボタン押下時のイベントはshowDialog()で、HTMLからのコールバック関数がgetText(s)となります。

function showDialog() {
  var output = HtmlService.createTemplateFromFile('index');
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  　var html = output.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
             .setWidth(400)
             .setHeight(300)
             .setTitle('Test');
  sheet.show(html);    //メッセージボックスとしてを表示する
}

function getText(s){
  var sheet = SpreadsheetApp.getActiveSheet();
  sheet.getRange(1,1).setValue(s);
}

HTML側のプログラム

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <button onclick="submit()"> submit to GAS </button>
    <script>
      function submit(){
        google.script.run.getText2("OK");
        google.script.host.close();
      }
    </script>
  </body>
</html>

- Google Apps Script