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

2021/08/18 2021/08/20

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

5年前にGASからHTMLへのデータの受け渡し方法について書きましたが、どうやら仕様が変わっていたらしくうまく動作できませんでした。改めて現在動作可能な正しい手順を書こうと思います。いつの間にすごくシンプルな仕組みになっていました。いつ仕様が変わったのでしょうか？ HTMLに<?= 変数名 ?>を埋め込むGASからのデータをHTML側で受け取る場合は、＜?=変数名 ?＞というタグを埋め込みます。かつてはHTMLに埋め込んだJavascriptで受け取っていたことを考えると非常にシンプルになりました。以下が例です。変数名をmessa...

これだと、値だけを送るので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ファイルの追加は以下の記事を参考にしてください。

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

【2021年更新】GASでHTMLファイルの追加方法とウェブアプリとして公開するまでの手順

Google Apps Script（GAS）でHTMLファイルを追加する方法と、それをウェブアプリとして公開するまでの手順までを書き留めておきます。以前にも書きましたがエディタの様式が変わって手順もだいぶ変わったので改めて書きます。こちらがGASのスクリプトエディタ。新しい様式となったものです。左サイドメニューの「ファイル」の右横にある「＋」をクリックすると、以下のようなプルダウンメニューが現れます。「HTML」を選びましょう。ファイル名を聞いてくるので入力します。拡張子は入れないでください。今回は「index」と...

以下が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>

実行結果

Webアプリケーションとして実行するとご覧の通りスプレッドシートのデータをTable上に表示させることができました。※Webアプリケーションの実行方法についてはこちらを参照ください。

- Google Apps Script