Google Apps Scriptで得たスプレッドシートの値をhtmlに表示させたい

実現したいこと

Google Apps Script(GAS)でスプレッドシートの最終行の値(A列からE列)を読み込み、その値をHTMLで表示したい。

前提

以下のスクリプトを作成した。
これにより、function record_value()が実行されるとスプレッドシートの最終行の値がa, b, c, d, eに代入される。
この値をindex.htmlに表示したい。

GoogleAppsScript
1const doGet = () => {
2  return HtmlService.createTemplateFromFile("index").evaluate();
3};
4function record_value(){
5  const ss = SpreadsheetApp.getActiveSpreadsheet();
6  const sheet1 = ss.getSheetByName('シート1');
7  const lastRow = sheet1.getLastRow();
8  var a = sheet1.getRange(lastRow,1).getValue();
9  var b = sheet1.getRange(lastRow,2).getValue();
10  var c = sheet1.getRange(lastRow,3).getValue();
11  var d = sheet1.getRange(lastRow,4).getValue();
12  var e = sheet1.getRange(lastRow,5).getValue();
13
14  list =[a, b, c, d, e]
15  Logger.log(list)
16}
17

index.htmlを作ってみたのですがhtmlが分からないのでめちゃくちゃです。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Google Apps Script
    <p id="example"> test </p>
    </h1>
    <button id="button">ボタン</button>
      <script>
      const button = document.getElementById("button");
      button.addEventListener("click", () => {
        document.querySelector('#text').textContent = a;
                
      });
    </script>
  
  </body>
</html>

GASでfunction record_value()を実行すると、index.htmlの表示が、sheet1.getLastRow()で分かった最終行のデータに書き換わるようにしたいのですが、htmlに詳しくないので分かりません。

途中、ボタンを押したら変わるように出来ないかとか考えたのですが、やはり、GASでfunction record_value()を実行するとhtmlが書き換わると嬉しいです。

html知っている方、よろしくお願いします。

行動規範の内容に同意します

回答1件

自己解決

GASの関数 record_value()の最後にreturnで出力する。出力したい変数がvalue_textとするならreturn value_textとする。
HTMLの中の表示したいところに、<?= record_value(); ?>と記述すればそこにvalue_textの内容が表示される。

<?= record_value(); ?>は一回しか参照されない。

一回だけでなく値が変わりそのたびに変更するときはhtml側からjavascriptで
google.script.run.withSuccessHandler(コールバック関数).Google関数(引数)
を実行する。ただし、この関数から直接戻り値を受け取る方法れない。この関数はgoogle apps scriptの関数を実行して成功したら、指定したjavascriptの関数を実行する、その時にgoogle apps script関数の戻り値をJavascript関数実行時の引数として渡すという方法でデータを受け取る。受け取り用のjavascript関数を作る必要がある。

投稿2024/01/20 19:33

編集2024/01/23 00:19

Aki1000

総合スコア78