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

2021/08/18 2021/08/20

前回、Google Apps Script（GAS）から送った値をHTMLで受け取って表示する方法について書きました。

これだと、値だけを送るのでHTML側で動的な処理をさせることができません。あとタグと一緒に送ってもタグがブラウザで表示されるだけになってしまいます。（これもPHP的）

HTMLファイル内で動的に処理したい場合は、PHPのように <? ?> 内でGASコードを埋め込むことができます。gsファイルでまとめるよりはこっちの方が楽かもしれません。もちろんスプレッドシートにもアクセスできます。

スプレッドシート側のデータ

以下のようなデータをスプレッドシートで用意したとします。これをHTMLに埋め込んだGAS側で読み込むようにしたいと思います。

GAS側のソースコード

GAS側に以下のコードは必要で、これがないとWebアプリケーションとして動きません。これ以外をHTMLで記述します。

function doGet() {
  var t = HtmlService.createTemplateFromFile('index.html');
  return t.evaluate();
}

HTML側のソースコード

HTMLファイルの追加は以下の記事を参考にしてください。

以下がHTML側（index.html）のソースコードとなります。 <? ?> 内にGASコードを記述します。以下のようにスプレッドシートにもアクセスできます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>bookmarks</title>
  </head>
  <body>
    <h2>Gas埋め込みテスト</h2>
    <br />
    <?
      var sheet = SpreadsheetApp.getActive().getSheetByName("bookmarks");
      var data = sheet.getDataRange().getValues();

      var result = '<table border="1">';
      for(var i=0; i<data.length; i++){
        result += '<tr>';
        result += "<td>" + data[i][0].toString() + "</td>";
        result += "<td>" + data[i][1].toString() + "</td>";
        result += "<td>" + data[i][2].toString() + "</td>";
        result += '</tr>';
      }
      result += '</table>';

      output._ = result;
    ?>
  </body>
</html>