非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

      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側のコード

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

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

 

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

 

 

TextArea内でデータを受け取る

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

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

 

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

 

スポンサーリンク

 - Google Apps Script