gas 埋め込みスクリプトをscriptタグに移動させたい

実現したいこと

スプレッドシートにリストを持っている
html(gas作成)にスプレッドシートのリスト（jsで作成するカレンダーとマージして）を表示させたい

前提

予約システムを作成中
gasでHTMLを作成中（googlesフォームだとエラーチェックができないため）
詳しくないため、いろいろなページを見ながら作成中（なのでコードがごちゃごちゃしています）
スプレッドシートに予約可能数は保存されています

スプレッドシートイメージ
|日付|予約上限|予約数|予約可能数
|3/1|10|2|8
|3/2|10|3|7
|3/3|10|2|8
|3/4|30|28|2

※スプレッドシートの予約数は関数を組んで実際の予約から計算して表示しています
※予約可能数は予約上限-予約数です

できていること

◇カレンダーの表示
html(calender.html)にはJSを利用してカレンダーを表示しています
（一か月先まで受付可能としたく、2か月分のカレンダーを表示）

◇スプレッドシートデータ取得
bodyに<? ?>と埋め込み式に表示することは可能

こまっていること　と　やったこと

①<?　の内容をJSに移動すると何も表示されなくなる
→var をconstにしたら改善したことがあったので変更してみましたがNGでした

②予約表は以前からの日付が入っており、カレンダーとマージしたい
→①ができないので実現できなかった。今日日付は取得できているので、スプレッドシートの値を入れたdateのdate[i][0]をforで回せば取得できますでしょうか？

③スプレッドシートの値（日付）が長くなる
：Wed Mar 01 2023 00:00:00 GMT+0900 (日本標準時)
→toStringDateや　toDateが使えるとありましたがいずれもダメでした

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

エラーメッセージは表示されずそもそもカレンダーが表示されない

OKなソースコード(ただしカレンダーとリストが別々に表示される)

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

    <div id="calendar"  class="field"></div>
  </body>


    <h2>Gas埋め込みテスト</h2>
    <br />

    <?
  var ssId = 'XXXXXXXXXXXXXXXX';
  var ss = SpreadsheetApp.openById(ssId);
  var sheetName = 'シート1';
  var data = ss.getSheetByName(sheetName).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][3].toString() + "</td>";
        result += '</tr>';
      }
      result += '</table>';
 
      output._ = result;
    ?>

<script>
function goToNext() {
    google.script.run
      .withSuccessHandler(function(result) {
        // 成功
        // resultとしてHTMLが返されます。
      })
      .withFailureHandler(function(result) {
        // 失敗
      }).gotoSecondPages(/*渡したいデータ*/);
  }

const weeks = ['日', '月', '火', '水', '木', '金', '土']
const date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
const config = {
    show: 2,
}

function showCalendar(year, month) {
    for ( i = 0; i < config.show; i++) {
        const calendarHtml = createCalendar(year, month)
        const sec = document.createElement('section')
        sec.innerHTML = calendarHtml
        document.querySelector('#calendar').appendChild(sec)

        month++
        if (month > 12) {
            year++
            month = 1
        }
    }
}

function createCalendar(year, month) {
  

    



    const today_day = new Date().getDate()
    const today_month = new Date().getMonth() +1
    const startDate = new Date(year, month - 1, 1) // 月の最初の日を取得
    const endDate = new Date(year, month,  0) // 月の最後の日を取得
    const endDayCount = endDate.getDate() // 月の末日

    const lastMonthEndDate = new Date(year, month - 2, 0) // 前月の最後の日の情報
    const lastMonthendDayCount = lastMonthEndDate.getDate() // 前月の末日
    const startDay = startDate.getDay() // 月の最初の日の曜日を取得

    let dayCount = 1 // 日にちのカウント
    let calendarHtml = '' // HTMLを組み立てる変数

    calendarHtml += '<h1>' + year  + '/' + month + '</h1>'
    calendarHtml += '<table>'

    // 曜日の行を作成
    for (let i = 0; i < weeks.length; i++) {
        calendarHtml += '<td>' + weeks[i] + '</td>'
    }

    for (let w = 0; w < 6; w++) {
        calendarHtml += '<tr>'

        for (let d = 0; d < 7; d++) {
            if (w == 0 && d < startDay) {
                // 1行目で1日の曜日の前
                let num = lastMonthendDayCount - startDay + d + 1
                calendarHtml += '<td class="is-disabled">' + num  　+ '</td>'
            } else if (dayCount > endDayCount) {
                // 末尾の日数を超えた
                let num = dayCount - endDayCount
                calendarHtml += '<td class="is-disabled">' + num +  '</td>'
                dayCount++
            } else {
              if( month == today_month && dayCount <= today_day){
                  calendarHtml += `<td class="is-disabled">${dayCount}</td>`
                  //calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</td>`
                }else{
                  calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</br>予約数</td>`
                }
                dayCount++
            }
        }
        calendarHtml += '</tr>'
    }
    calendarHtml += '</table>'

    return calendarHtml
}

showCalendar(year, month)

</script>

NGなソースコード(何も表示されない)

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

    <div id="calendar"  class="field"></div>
  </body>


    <h2>Gas埋め込みテスト</h2>
    <br />



<script>
function goToNext() {
    google.script.run
      .withSuccessHandler(function(result) {
        // 成功
        // resultとしてHTMLが返されます。
      })
      .withFailureHandler(function(result) {
        // 失敗
      }).gotoSecondPages(/*渡したいデータ*/);
  }

const weeks = ['日', '月', '火', '水', '木', '金', '土']
const date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
const config = {
    show: 2,
}

function showCalendar(year, month) {
    for ( i = 0; i < config.show; i++) {
        const calendarHtml = createCalendar(year, month)
        const sec = document.createElement('section')
        sec.innerHTML = calendarHtml
        document.querySelector('#calendar').appendChild(sec)

        month++
        if (month > 12) {
            year++
            month = 1
        }
    }
}

function createCalendar(year, month) {
 var ssId = 'XXXXXXXXXXXXXXXX';
  var ss = SpreadsheetApp.openById(ssId);
  var sheetName = 'シート1';
  var data = ss.getSheetByName(sheetName).getDataRange().getValues();

 
 
    



    const today_day = new Date().getDate()
    const today_month = new Date().getMonth() +1
    const startDate = new Date(year, month - 1, 1) // 月の最初の日を取得
    const endDate = new Date(year, month,  0) // 月の最後の日を取得
    const endDayCount = endDate.getDate() // 月の末日

    const lastMonthEndDate = new Date(year, month - 2, 0) // 前月の最後の日の情報
    const lastMonthendDayCount = lastMonthEndDate.getDate() // 前月の末日
    const startDay = startDate.getDay() // 月の最初の日の曜日を取得

    let dayCount = 1 // 日にちのカウント
    let calendarHtml = '' // HTMLを組み立てる変数

    calendarHtml += '<h1>' + year  + '/' + month + '</h1>'
    calendarHtml += '<table>'

    // 曜日の行を作成
    for (let i = 0; i < weeks.length; i++) {
        calendarHtml += '<td>' + weeks[i] + '</td>'
    }

    for (let w = 0; w < 6; w++) {
        calendarHtml += '<tr>'

        for (let d = 0; d < 7; d++) {
            if (w == 0 && d < startDay) {
                // 1行目で1日の曜日の前
                let num = lastMonthendDayCount - startDay + d + 1
                calendarHtml += '<td class="is-disabled">' + num + '</td>'
               
            } else if (dayCount > endDayCount) {
                // 末尾の日数を超えた
                let num = dayCount - endDayCount
                calendarHtml += '<td class="is-disabled">' + num +  '</td>'
                dayCount++
            } else {
              if( month == today_month && dayCount <= today_day){
                  calendarHtml += `<td class="is-disabled">${dayCount}</td>`
                  //calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</td>`
                }else{
                  calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</td>`
                }
                dayCount++
            }
        }
        calendarHtml += '</tr>'
    }
    calendarHtml += '</table>'

    return calendarHtml
}

)

showCalendar(year, month)

</script>

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

回答1件

ベストアンサー

①<?　の内容をJSに移動すると何も表示されなくなる

1.　まず、構文エラーがあるのでこの時点でうまく動きません。
下でコメントを付けた括弧は削除してください。

js
1
2    return calendarHtml
3}
4
5)  # <--- 余計な括弧
6showCalendar(year, month)
7
8</script>

　

2. 前月の末日の計算が間違っています。2か月前の末日を取得しているように見受けられます。

js
1    const lastMonthEndDate = new Date(year, month - 2, 0); // 前月の最後の日の情報

　
ここは、下記のように直します。

js
1    const lastMonthEndDate = new Date(year, month - 1, 0); // 前月の最後の日の情報

　

3. ただし、上記を直しても、うまく動かないはずです。
理由は、JavaScript から Google Apps Script を直接呼び出すことはできないからです。
具体的には、NGとなっているコードの下記の部分

js
1function createCalendar(year, month) {
2 var ssId = 'XXXXXXXXXXXXXXXX';
3  var ss = SpreadsheetApp.openById(ssId);
4  var sheetName = 'シート1';
5  var data = ss.getSheetByName(sheetName).getDataRange().getValues();

ここは、google.script.run を使って呼び出す必要があります。
google.script.run は非同期呼び出しになるので、withSuccessHandler 内で処理が完結するように、コードの形を変える必要があります。
また、シートデータを呼び出す処理を index.html から GAS 側（コード.gs）に移す必要があります。
修正後の全体は下記になります。(②の分も含めて修正してます）

index.html

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7    <div id="calendar"  class="field"></div>
8    <h2>Gas埋め込みテスト</h2>
9    <br />
10  <script>
11  function goToNext() {
12    google.script.run
13      .withSuccessHandler(function(result) {
14        // 成功
15        // resultとしてHTMLが返されます。
16      })
17      .withFailureHandler(function(result) {
18        // 失敗
19      }).gotoSecondPages( /*渡したいデータ*/ );
20  }
21
22  const weeks = ['日', '月', '火', '水', '木', '金', '土'];
23  const date = new Date();
24  let year = date.getFullYear();
25  let month = date.getMonth() + 1;
26  const config = {
27    show: 2,
28  };
29
30
31  /**
32   * 予約数を返す関数。
33   *   year, month, date:  検索対象の年月日
34   *   data:　予約表のデータ（2次元配列）
35   *   return: 3列目の予約数
36   */
37  function getNumberOfReservations(year, month, date, data) {
38    //予約表の1行目はラベルなので、2行目以降から検索
39    for (let i = 1; i < data.length; i++) {
40      const reservedate = new Date(data[i][0]);  // 予約表の日付（1列目）
41      if (year == reservedate.getYear() + 1900 &&
42        month == reservedate.getMonth() + 1 &&
43        date == reservedate.getDate()) {
44        return data[i][2];  // 3列目の予約数を返す。
45      }
46    }
47    return 0;  // 見つからなければ0を返す。
48  }
49
50  function showCalendar(year, month, data) {
51    for (i = 0; i < config.show; i++) {
52      const calendarHtml = createCalendar(year, month, data);
53      const sec = document.createElement('section');
54      sec.innerHTML = calendarHtml;
55      document.querySelector('#calendar').appendChild(sec);
56
57      month++;
58      if (month > 12) {
59        year++;
60        month = 1;
61      }
62    }
63  }
64
65  function createCalendar(year, month, data) {
66    const today_day = new Date().getDate();
67    const today_month = new Date().getMonth() + 1;
68    const startDate = new Date(year, month - 1, 1) // 月の最初の日を取得
69    const endDate = new Date(year, month, 0); // 月の最後の日を取得
70    const endDayCount = endDate.getDate(); // 月の末日
71
72    // const lastMonthEndDate = new Date(year, month - 2, 0); // 前月の最後の日の情報
73    const lastMonthEndDate = new Date(year, month - 1, 0); // 前月の最後の日の情報
74
75    const lastMonthendDayCount = lastMonthEndDate.getDate(); // 前月の末日
76    const startDay = startDate.getDay(); // 月の最初の日の曜日を取得
77
78    let dayCount = 1; // 日にちのカウント
79    let calendarHtml = ''; // HTMLを組み立てる変数
80
81    calendarHtml += '<h1>' + year + '/' + month + '</h1>';
82    calendarHtml += '<table>';
83
84    // 曜日の行を作成
85    for (let i = 0; i < weeks.length; i++) {
86      calendarHtml += '<td>' + weeks[i] + '</td>';
87    }
88
89    for (let w = 0; w < 6; w++) {
90      calendarHtml += '<tr>';
91
92      for (let d = 0; d < 7; d++) {
93        if (w == 0 && d < startDay) {
94          // 1行目で1日の曜日の前
95          let num = lastMonthendDayCount - startDay + d + 1;
96          calendarHtml += '<td class="is-disabled">' + num + '</td>';
97
98        } else if (dayCount > endDayCount) {
99          // 末尾の日数を超えた
100          let num = dayCount - endDayCount;
101          calendarHtml += '<td class="is-disabled">' + num + '</td>';
102          dayCount++;
103        } else {
104          if (month == today_month && dayCount <= today_day) {
105            calendarHtml += `<td class="is-disabled">${dayCount}</td>`;
106            //calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</td>`;
107          } else {
108            // 予約数を表示
109            const reservations = getNumberOfReservations(year, month, dayCount, data);
110            calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</br>予約数:${reservations}</td>`;
111          }
112          dayCount++;
113        }
114      }
115      calendarHtml += '</tr>';
116    }
117    calendarHtml += '</table>';
118
119    return calendarHtml;
120  }
121
122  google.script.run
123  .withSuccessHandler(function(data) {
124    showCalendar(year, month, JSON.parse(data));
125  }).withFailureHandler(function(result) {
126    console.log("error!");
127    console.log(result);
128  }).getData();
129    
130</script>
131</body>

コード.gs （doGet がある方）も下記のように直します。
具体的には、html 側から呼び出す getData() 関数を追加しています。
（一部推定している部分がありますが実際のコードに合わせてください）
※ 'シートID' の部分は実際のスプレッドシートIDに変えてください。

js
1// コード.gs
2function doGet() {
3  // 質問では明らかにされていないので仮
4  return HtmlService.createTemplateFromFile('index').evaluate();
5}
6
7function goToNext() {
8  // 不明
9}
10
11function getData() {
12  const ssId = 'シートID';
13  const ss = SpreadsheetApp.openById(ssId);
14  const sheetName = 'シート1';
15  const data = ss.getSheetByName(sheetName).getDataRange().getValues();
16  return JSON.stringify(data);
17}

②予約表は以前からの日付が入っており、カレンダーとマージしたい
今日日付は取得できているので、スプレッドシートの値を入れたdateのdate[i][0]をforで回せば取得できますでしょうか？

たとえば下記のようなデータがあるとして・・・

日付	予約上限	予約数	予約可能数
3/23	10	2	8
3/24	10	3	7
3/25	10	2	8
3/26	30	28	2

質問者さんのインスピレーションに従って for ループを使うなら
カレンダーに3月1日を書き込むとき→予約表の4行を走査して3月1日があるか調べる→ないので0
カレンダーに3月2日を書き込むとき→予約表の4行を走査して3月2日があるか調べる→ないので0
・・・
カレンダーに3月24日を書き込むとき→予約表の4行を走査して3月24日があるか調べる→あるので3列目の予約数を取得
・・・
というようにすればよいですね。

つまり「記入しようとしている年月日が予約表の中にあるかを検索して、
予約表の中にある日付であれば、予約表3列目を返す」というやり方ができそうです。
これを関数にすると以下のようになります。

js
1/**
2 * year, month, date:  検索対象の年月日
3 * data:　予約表のデータ（2次元配列）
4 * return: 3列目の予約数
5 */
6function getNumberOfReservations(year, month, date, data) {
7  //予約表の1行目はラベルなので、2行目以降から検索
8  for (let i = 1; i < data.length; i++) {
9    const reservedate = new Date(data[i][0]);  // 予約表の日付（1列目）
10    if (year == reservedate.getYear() + 1900 &&
11      month == reservedate.getMonth() + 1 &&
12      date == reservedate.getDate()) {
13      return data[i][2];  // 3列目の予約数を返す。
14    }
15  }
16  return 0;  // 見つからなければ0を返す。
17}

getYear に 1900 を足す＆ getMonth に1を足す必要がある点に注意してください。

さらに index.html のカレンダー表示部分で上記の関数を呼びだすようにしています。
index.html

html
1<!DOCTYPE html>
2<html>
3略
4  <script>
5  略
6...
7          } else {
8            // 予約数を表示
9            const reservations = getNumberOfReservations(year, month, dayCount, data);
10            calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</br>予約数:${reservations}</td>`;
11          }

③スプレッドシートの値（日付）が長くなる

Utilities.formatDate() 関数を使いましょう。

質問文のOKバージョンを修正するなら、下記の様になります。

js
1略
2<?
3  var ssId = 'シートID';
4  var ss = SpreadsheetApp.openById(ssId);
5  var sheetName = 'シート1';
6  var data = ss.getSheetByName(sheetName).getDataRange().getValues();
7
8  var result = '<table border="1">';
9    result += '<tr>';
10    result += "<td>" + data[0][0] + "</td>";
11    result += "<td>" + data[0][3] + "</td>";
12    result += '</tr>';
13
14  for(var i=1; i < data.length; i++){
15    result += '<tr>';
16    result += "<td>" + Utilities.formatDate(data[i][0],'Asia/Tokyo','yyyy年M月d日') + "</td>";
17    result += "<td>" + data[i][3] + "</td>";
18    result += '</tr>';
19  }
20  result += '</table>';
21
22  output._ = result;
23?>
24

投稿2023/03/20 11:30

編集2023/03/20 15:01

退会済みユーザー

総合スコア0

testtesttest11.

2023/03/26 12:20

ご回答ありがとうございます。 ③については綺麗に表示されることが確認できました。＞3. ただし、上記を直しても、うまく動かないはずです。のところがうまくいきませんでした。具体的にはカレンダーが表示されなくなりました。シートIDの部分は上書きをしています。何も表示されず何をしたらよいのか一週間考えましたが、抜け出せませんでした。。ヒントいただけないでしょうか。 GASでデバッグの仕方がわからず、迷子になっています

testtesttest11.

2023/03/26 14:14

いろいろなサイトのスクリプトの寄せ集めのため、JSにconsole.logが残っておりそれが悪さをしておりました。うまく表示されました！ありがとうございました

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