Google Apps ScriptからHTMLへデータを受け渡す方法

2021/03/07 2021/07/10

5年前にGASからHTMLへのデータの受け渡し方法について書きましたが、どうやら仕様が変わっていたらしくうまく動作できませんでした。改めて現在動作可能な正しい手順を書こうと思います。いつの間にすごくシンプルな仕組みになっていました。いつ仕様が変わったのでしょうか？

HTMLに<?= 変数名 ?>を埋め込む

GASからのデータをHTML側で受け取る場合は、＜?=変数名 ?＞というタグを埋め込みます。かつてはHTMLに埋め込んだJavascriptで受け取っていたことを考えると非常にシンプルになりました。

以下が例です。変数名をmessageとしました。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1><?=message ?></h1>
  </body>
</html>

次にGAS側のソースコードです。HTML側で設定した変数messageに「Hello World!」を送るようにします。doGet関数はGASをWebアプリケーションとして実行する場合に最初に呼び出される関数です。

function doGet() {
  var t = HtmlService.createTemplateFromFile('index.html');
  t.message="Hello World!";
  return t.evaluate();
}

実行結果は以下の通りです。ちゃんとデータを受け取れました。

今度はTextArea内でデータを受け取ってみます。HTMLは以下のとおりです。GAS側は変えていません。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <textarea><?=message ?></textarea>
  </body>
</html>

実行結果はご覧の通りです。TextArea内でも受け取れました。