前提・実現したいこと

スプレッドシートの複数のセルに入力されている値を、
Google Apps Scriptを通じて作るHTML内に、
値が変わるのに合わせて、HTML内に動的に反映させたいと思っています。
GASの使い方が紹介されているウェブサイトを見ながら進めてきました。

今回は、備品の貸出予約、借受帳の記入の仕組みを作っておりました。

Googleフォーム(貸出予約)
→スプレッドシート(集計)
→html化（スプレッドシート内に表示の値（メールアドレス・期間を反映、また、html内に次のフォームのリンクも貼る）
→Googleフォーム(貸出帳)
→スプレッドシート(集計)
→html化（スプレッドシート内に表示の値（メールアドレス・期間を反映、また、html内に次のフォームのリンクも貼る）
→Googleフォーム(貸出予約)

以上のようにループさせて、予約する人、実際に借りる人に
利用前の状況の確認をしてもらったうえでフォーム送信してもらおう、
というように考えております。

また、htmlはスマホの小さい画面で開くことを想定し、
反映される複数のセルの値を、改行したりしながら表示させたいと思います。

発生している問題・エラーメッセージ

1つのセルの値のみを反映させることは以下のソースコードで、実現できました。
しかしながら、2つ以上（今回は6つ）のセルを反映させる方法が分かりません。

該当のソースコード

【コード.gs】
function doGet() {

var sh=SpreadsheetApp.openById("スプレッドシートid");
var ss=sh.getSheetByName("シート名");

var msg=ss.getRange(10,1).getValue();
var t=HtmlService.createTemplateFromFile("index");
t.msg=msg;

return t.evaluate().setTitle("");

}

【index.html】

<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <?= msg ?> ただいまの予約状況は上記の通りです。 あなたが使用しようとする期間と上記期間が重なる場合、 予約者にご確認の上、貸出受付フォームへお進みください。 <a href="https://docs.google.com/forms/d/e/">https://docs.google.com/forms/</a> </body> </html>

試したこと

HTML内の<?= msg ?>が参照している、
GSに記述の、
var msg=ss.getRange(10,1).getValue();
var t=HtmlService.createTemplateFromFile("index");
t.msg=msg;
内のgetrange部分をセル指定(F1:I1)にしたり、
上記3行を２つ書いてみたりと、
また、２つめの記述にはmsg2など別の書き方にしてみたりと、
しましたが、うまくゆきません。

以上です。

みなさまのお力添えをお願い致します。

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

回答1件

たとえば下記のようなユースケースを考えてみます。

・貸出予約フォームで「メールアドレス、氏名、貸出日、返却予定日、返却フラグ」を集計しており、
スプレッドシートに下記のようなデータが蓄積されているとします。

これを下記のようなイメージで出力したい場合：

コードは下記のようになります。
【コード.gs】

function doGet() {

  var sh = SpreadsheetApp.openById("スプレッドシートID");
  var ss = sh.getSheetByName("シート1");

  var msg = ss.getDataRange().getValues();
  var t = HtmlService.createTemplateFromFile("index");
  t.msg = msg;

  return t.evaluate().setTitle("");

}

【index.html】

js
1<!DOCTYPE html>
2<html>
3
4<head>
5  <base target="_top">
6</head>
7
8<body>
9  <?
10    var num = 1;  
11    for (var i = 1; i < msg.length; i++) {
12      if (msg[i][5] === '完了') continue;
13      var startDate = Utilities.formatDate(new Date(msg[i][3]), 'Asia/Tokyo', "MM/dd")
14      var endDate = Utilities.formatDate(new Date(msg[i][4]), 'Asia/Tokyo', "MM/dd")
15  ?>
16  (<?= num ?>)メールアドレス:<?= msg[i][1] ?><br>
17     氏名:<?= msg[i][2] ?><br>
18     期間:<?= startDate ?>～<?= endDate ?><br><br>
19  <?
20      num++;
21    } 
22  ?>
23  <br>
24  ただいまの予約状況は上記の通りです。<br>
25  あなたが使用しようとする期間と上記期間が重なる場合、<br>
26  予約者にご確認の上、貸出受付フォームへお進みください。<br>
27  <a href="https://docs.google.com/forms/d/e/">https://docs.google.com/forms/</a>
28</body>
29
30</html>

説明

テンプレートに配列を渡す

js
1var t=HtmlService.createTemplateFromFile("index");
2t.msg=msg;

上記のような、テンプレートに値を渡すときのテクニックであるプロパティの付与ですが、
単一の値だけでなく、配列やオブジェクトも渡せます。

たとえば下記のようにすることで、msgに、シートのデータ範囲の配列全部を渡すことができます。

js
1  var msg = ss.getDataRange().getValues();  // シートのデータの配列
2  var t = HtmlService.createTemplateFromFile("index");
3  t.msg = msg;  // テンプレートに配列を渡す

（標準の）スクリプトレットとプリンタブルスクリプトレット

<? と ?>で挟んだ部分はスクリプトレットと言います。
HTMLの中でスクリプトレットになっている部分は、最初にHTMLページを読み込んだ時に、GASのスクリプトとして解釈され実行されます。

左側ブラケットの?の右に=のついたもの（<?=～?>）で囲まれているものは特に「プリンティングスクリプトレット」と言います。

プリンティングスクリプトレットは、通常のスクリプトレットと異なり、スクリプトレットタグ内の最初の文の計算結果がHTMLページ上のテキストとして表示されます。
（ただし展開された中身はエスケープされます）
（強制出力スクリプトレットというのもありますがここでは割愛します）

下記コードを上記結果の画像と見比べると、

<?= ~ ?>となっている部分は、その変数の内容に置き換わっていることがお分かりになるかと思います。

<body>
  <?
    var num = 1;  
    for (var i = 1; i < msg.length; i++) {
      if (msg[i][5] === '完了') continue;  // フラグが「完了」ならば表示不要なのでスキップ
      var startDate = Utilities.formatDate(new Date(msg[i][3]), 'Asia/Tokyo', "MM/dd")
      var endDate = Utilities.formatDate(new Date(msg[i][4]), 'Asia/Tokyo', "MM/dd")
  ?>
  (<?= num ?>)メールアドレス:<?= msg[i][1] ?><br>
     氏名:<?= msg[i][2] ?><br>
     期間:<?= startDate ?>～<?= endDate ?><br><br>
  <?
      num++;
    } 
  ?>
  <br>

投稿2021/11/17 15:49

編集2021/11/17 15:57