teratail
回答率
85.36%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップGoogle Apps Scriptに関する質問gas 埋め込みスクリプトをscriptタグに移動させたい

編集履歴

回答編集履歴

10

　

2023/03/20 15:01

投稿

退会済みユーザー
test CHANGED
@@ -210,6 +210,7 @@
210
210
  |3/24 |10 |3 |7|
211
211
  |3/25 |10 |2 |8|
212
212
  |3/26 |30 |28 |2|
213
+
213
214
  質問者さんのインスピレーションに従って for ループを使うなら
214
215
  カレンダーに3月1日を書き込むとき→予約表の4行を走査して3月1日があるか調べる→ないので0
215
216
  カレンダーに3月2日を書き込むとき→予約表の4行を走査して3月2日があるか調べる→ないので0

9

　

2023/03/20 14:59

投稿

退会済みユーザー
test CHANGED
@@ -203,17 +203,23 @@
203
203
  > ②予約表は以前からの日付が入っており、カレンダーとマージしたい
204
204
  > 今日日付は取得できているので、スプレッドシートの値を入れたdateのdate[i][0]をforで回せば取得できますでしょうか？
205
205
 
206
- たとえば下記のようなデータで、正しく取得するにはどうしたらよいでしょうか。
206
+ たとえば下記のようなデータがあるとして・・・
207
207
  |日付|予約上限|予約数|予約可能数|
208
208
  |:--|:--|:--|:--|
209
209
  |3/23 |10 |2 |8|
210
210
  |3/24 |10 |3 |7|
211
211
  |3/25 |10 |2 |8|
212
212
  |3/26 |30 |28 |2|
213
-
214
213
  質問者さんのインスピレーションに従って for ループを使うなら
214
+ カレンダーに3月1日を書き込むとき→予約表の4行を走査して3月1日があるか調べる→ないので0
215
+ カレンダーに3月2日を書き込むとき→予約表の4行を走査して3月2日があるか調べる→ないので0
216
+ ・・・
217
+ カレンダーに3月24日を書き込むとき→予約表の4行を走査して3月24日があるか調べる→あるので3列目の予約数を取得
218
+ ・・・
219
+ というようにすればよいですね。
220
+
215
- 「記入しようとしている年月日が予約表の中にあるかを検索して、
221
+ つまり「記入しようとしている年月日が予約表の中にあるかを検索して、
216
- 予約表の中にある日付であれば、予約表3列目を返す」というやり方ができそうですね。
222
+ 予約表の中にある日付であれば、予約表3列目を返す」というやり方ができそうです。
217
223
  これを関数にすると以下のようになります。
218
224
  ```js
219
225
  /**

8

　

2023/03/20 14:22

投稿

退会済みユーザー
test CHANGED
@@ -69,10 +69,13 @@
69
69
  const config = {
70
70
  show: 2,
71
71
  };
72
+
73
+
72
74
  /**
75
+ * 予約数を返す関数。
73
- * year, month, date: 検索対象の年月日
76
+ * year, month, date: 検索対象の年月日
74
- * data:　予約表のデータ（2次元配列）
77
+ * data:　予約表のデータ（2次元配列）
75
- * return: 3列目の予約数
78
+ * return: 3列目の予約数
76
79
  */
77
80
  function getNumberOfReservations(year, month, date, data) {
78
81
  //予約表の1行目はラベルなので、2行目以降から検索

7

　

2023/03/20 14:19

投稿

退会済みユーザー
test CHANGED
@@ -37,7 +37,7 @@
37
37
  ここは、google.script.run を使って呼び出す必要があります。
38
38
  google.script.run は非同期呼び出しになるので、withSuccessHandler 内で処理が完結するように、コードの形を変える必要があります。
39
39
  また、シートデータを呼び出す処理を index.html から GAS 側（コード.gs）に移す必要があります。
40
- 修正後の全体は下記になります。
40
+ 修正後の全体は下記になります。(②の分も含めて修正してます）
41
41
 
42
42
  index.html
43
43
  ```html
@@ -69,6 +69,23 @@
69
69
  const config = {
70
70
  show: 2,
71
71
  };
72
+ /**
73
+ * year, month, date: 検索対象の年月日
74
+ * data:　予約表のデータ（2次元配列）
75
+ * return: 3列目の予約数
76
+ */
77
+ function getNumberOfReservations(year, month, date, data) {
78
+ //予約表の1行目はラベルなので、2行目以降から検索
79
+ for (let i = 1; i < data.length; i++) {
80
+ const reservedate = new Date(data[i][0]); // 予約表の日付（1列目）
81
+ if (year == reservedate.getYear() + 1900 &&
82
+ month == reservedate.getMonth() + 1 &&
83
+ date == reservedate.getDate()) {
84
+ return data[i][2]; // 3列目の予約数を返す。
85
+ }
86
+ }
87
+ return 0; // 見つからなければ0を返す。
88
+ }
72
89
 
73
90
  function showCalendar(year, month, data) {
74
91
  for (i = 0; i < config.show; i++) {
@@ -128,7 +145,9 @@
128
145
  calendarHtml += `<td class="is-disabled">${dayCount}</td>`;
129
146
  //calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</td>`;
130
147
  } else {
148
+ // 予約数を表示
149
+ const reservations = getNumberOfReservations(year, month, dayCount, data);
131
- calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}<br>予約数</td>`;
150
+ calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</br>予約数:${reservations}</td>`;
132
151
  }
133
152
  dayCount++;
134
153
  }
@@ -214,8 +233,7 @@
214
233
  ```
215
234
  getYear に 1900 を足す＆ getMonth に1を足す必要がある点に注意してください。
216
235
 
217
- この関数を追加した結果のコードは下記。
218
- （修正箇所は、上記の getNumberOfReservations() 関数の追加と、下記の47～49行目に該当する部分です）
236
+ さらに index.html のカレンダー表示部分で上記の関数を呼びだすようにしています。
219
237
  index.html
220
238
  ```html
221
239
  <!DOCTYPE html>
@@ -224,66 +242,11 @@
224
242
  <script>
225
243
  略
226
244
  ...
227
- ...
228
-
229
- /**
230
- * year,month,date:検索対象の年月日
231
- * data:　予約表のデータ
232
- * return 3列目の予約数
233
- */
234
- function getNumberOfReservations(year, month, date, data) {
235
- //予約表の1行目はラベルなので、2行目以降から検索
236
- for (let i = 1; i < data.length; i++) {
237
- const reservedate = new Date(data[i][0]); // 予約表の日付（1列目）
238
- if (year == reservedate.getYear() + 1900 &&
239
- month == reservedate.getMonth() + 1 &&
240
- date == reservedate.getDate()) {
241
- return data[i][2]; // 3列目の予約数を返す。
242
- }
243
- }
244
- return 0; // 見つからなければ0を返す。
245
- }
246
-
247
-
248
- function createCalendar(year, month, data) {
249
- 　...略...
250
-
251
- for (let d = 0; d < 7; d++) {
252
- if (w == 0 && d < startDay) {
253
- // 1行目で1日の曜日の前
254
- let num = lastMonthendDayCount - startDay + d + 1
255
- calendarHtml += '<td class="is-disabled">' + num + '</td>'
256
-
257
- } else if (dayCount > endDayCount) {
258
- // 末尾の日数を超えた
259
- let num = dayCount - endDayCount
260
- calendarHtml += '<td class="is-disabled">' + num + '</td>'
261
- dayCount++
262
- } else {
263
- if (month == today_month && dayCount <= today_day) {
264
- calendarHtml += `<td class="is-disabled">${dayCount}</td>`
265
- //calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</td>`
266
245
  } else {
267
246
  // 予約数を表示
268
247
  const reservations = getNumberOfReservations(year, month, dayCount, data);
269
248
  calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</br>予約数:${reservations}</td>`;
270
249
  }
271
- dayCount++;
272
- }
273
- }
274
- calendarHtml += '</tr>';
275
- }
276
- calendarHtml += '</table>';
277
-
278
- return calendarHtml;
279
- }
280
-
281
- google.script.run
282
- ....
283
- 以下略
284
- ...
285
- </script>
286
- </body>
287
250
  ```
288
251
 
289
252
 

6

　

2023/03/20 14:04

投稿

退会済みユーザー
test CHANGED
@@ -200,7 +200,7 @@
200
200
  * return: 3列目の予約数
201
201
  */
202
202
  function getNumberOfReservations(year, month, date, data) {
203
- //予約表の1列目はラベルなので、2行目以降から検索
203
+ //予約表の1行目はラベルなので、2行目以降から検索
204
204
  for (let i = 1; i < data.length; i++) {
205
205
  const reservedate = new Date(data[i][0]); // 予約表の日付（1列目）
206
206
  if (year == reservedate.getYear() + 1900 &&
@@ -232,7 +232,7 @@
232
232
  * return 3列目の予約数
233
233
  */
234
234
  function getNumberOfReservations(year, month, date, data) {
235
- //予約表の1列目はラベルなので、2行目以降から検索
235
+ //予約表の1行目はラベルなので、2行目以降から検索
236
236
  for (let i = 1; i < data.length; i++) {
237
237
  const reservedate = new Date(data[i][0]); // 予約表の日付（1列目）
238
238
  if (year == reservedate.getYear() + 1900 &&

5

　

2023/03/20 13:57

投稿

退会済みユーザー
test CHANGED
@@ -151,8 +151,13 @@
151
151
  </script>
152
152
  </body>
153
153
  ```
154
+ ---
155
+ コード.gs （doGet がある方）も下記のように直します。
156
+ 具体的には、html 側から呼び出す getData() 関数を追加しています。
157
+ （一部推定している部分がありますが実際のコードに合わせてください）
154
- コード.gs（例）'シートID' の部分は実際のスプレッドシートIDに変えてください。
158
+ ※ 'シートID' の部分は実際のスプレッドシートIDに変えてください。
155
- ```js
159
+ ```js
160
+ // コード.gs
156
161
  function doGet() {
157
162
  // 質問では明らかにされていないので仮
158
163
  return HtmlService.createTemplateFromFile('index').evaluate();
@@ -170,8 +175,9 @@
170
175
  return JSON.stringify(data);
171
176
  }
172
177
  ```
173
- 　
178
+ ---
174
- 　
179
+
180
+
175
181
  > ②予約表は以前からの日付が入っており、カレンダーとマージしたい
176
182
  > 今日日付は取得できているので、スプレッドシートの値を入れたdateのdate[i][0]をforで回せば取得できますでしょうか？
177
183
 

4

　　

2023/03/20 13:51

投稿

退会済みユーザー
test CHANGED
@@ -260,7 +260,7 @@
260
260
  } else {
261
261
  // 予約数を表示
262
262
  const reservations = getNumberOfReservations(year, month, dayCount, data);
263
- calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</br>予約数${reservations}</td>`;
263
+ calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</br>予約数:${reservations}</td>`;
264
264
  }
265
265
  dayCount++;
266
266
  }

3

　

2023/03/20 13:50

投稿

退会済みユーザー
test CHANGED
@@ -175,10 +175,6 @@
175
175
  > ②予約表は以前からの日付が入っており、カレンダーとマージしたい
176
176
  > 今日日付は取得できているので、スプレッドシートの値を入れたdateのdate[i][0]をforで回せば取得できますでしょうか？
177
177
 
178
- data の data[i][0] は1列目ですから、ただの日付ですよね？
179
- 予約数なら3列目だから date[i][2] になるでしょう。
180
- また、予約データは全部の日付ではなく、一部の日付しかないので、単純にfor を回しただけでは取得できませんよね。
181
-
182
178
  たとえば下記のようなデータで、正しく取得するにはどうしたらよいでしょうか。
183
179
  |日付|予約上限|予約数|予約可能数|
184
180
  |:--|:--|:--|:--|

2

追記

2023/03/20 13:49

投稿

退会済みユーザー
test CHANGED
@@ -1,3 +1,4 @@
1
+ > ①<?　の内容をJSに移動すると何も表示されなくなる
1
2
  1.　まず、構文エラーがあるのでこの時点でうまく動きません。
2
3
  下でコメントを付けた括弧は削除してください。
3
4
  ```js
@@ -39,7 +40,7 @@
39
40
  修正後の全体は下記になります。
40
41
 
41
42
  index.html
42
- ```js
43
+ ```html
43
44
  <!DOCTYPE html>
44
45
  <html>
45
46
  <head>
@@ -169,5 +170,149 @@
169
170
  return JSON.stringify(data);
170
171
  }
171
172
  ```
173
+ 　
174
+ 　
172
-
175
+ > ②予約表は以前からの日付が入っており、カレンダーとマージしたい
173
-
176
+ > 今日日付は取得できているので、スプレッドシートの値を入れたdateのdate[i][0]をforで回せば取得できますでしょうか？
177
+
178
+ data の data[i][0] は1列目ですから、ただの日付ですよね？
179
+ 予約数なら3列目だから date[i][2] になるでしょう。
180
+ また、予約データは全部の日付ではなく、一部の日付しかないので、単純にfor を回しただけでは取得できませんよね。
181
+
182
+ たとえば下記のようなデータで、正しく取得するにはどうしたらよいでしょうか。
183
+ |日付|予約上限|予約数|予約可能数|
184
+ |:--|:--|:--|:--|
185
+ |3/23 |10 |2 |8|
186
+ |3/24 |10 |3 |7|
187
+ |3/25 |10 |2 |8|
188
+ |3/26 |30 |28 |2|
189
+
190
+ 質問者さんのインスピレーションに従って for ループを使うなら
191
+ 「記入しようとしている年月日が予約表の中にあるかを検索して、
192
+ 予約表の中にある日付であれば、予約表3列目を返す」というやり方ができそうですね。
193
+ これを関数にすると以下のようになります。
194
+ ```js
195
+ /**
196
+ * year, month, date: 検索対象の年月日
197
+ * data:　予約表のデータ（2次元配列）
198
+ * return: 3列目の予約数
199
+ */
200
+ function getNumberOfReservations(year, month, date, data) {
201
+ //予約表の1列目はラベルなので、2行目以降から検索
202
+ for (let i = 1; i < data.length; i++) {
203
+ const reservedate = new Date(data[i][0]); // 予約表の日付（1列目）
204
+ if (year == reservedate.getYear() + 1900 &&
205
+ month == reservedate.getMonth() + 1 &&
206
+ date == reservedate.getDate()) {
207
+ return data[i][2]; // 3列目の予約数を返す。
208
+ }
209
+ }
210
+ return 0; // 見つからなければ0を返す。
211
+ }
212
+ ```
213
+ getYear に 1900 を足す＆ getMonth に1を足す必要がある点に注意してください。
214
+
215
+ この関数を追加した結果のコードは下記。
216
+ （修正箇所は、上記の getNumberOfReservations() 関数の追加と、下記の47～49行目に該当する部分です）
217
+ index.html
218
+ ```html
219
+ <!DOCTYPE html>
220
+ <html>
221
+ 略
222
+ <script>
223
+ 略
224
+ ...
225
+ ...
226
+
227
+ /**
228
+ * year,month,date:検索対象の年月日
229
+ * data:　予約表のデータ
230
+ * return 3列目の予約数
231
+ */
232
+ function getNumberOfReservations(year, month, date, data) {
233
+ //予約表の1列目はラベルなので、2行目以降から検索
234
+ for (let i = 1; i < data.length; i++) {
235
+ const reservedate = new Date(data[i][0]); // 予約表の日付（1列目）
236
+ if (year == reservedate.getYear() + 1900 &&
237
+ month == reservedate.getMonth() + 1 &&
238
+ date == reservedate.getDate()) {
239
+ return data[i][2]; // 3列目の予約数を返す。
240
+ }
241
+ }
242
+ return 0; // 見つからなければ0を返す。
243
+ }
244
+
245
+
246
+ function createCalendar(year, month, data) {
247
+ 　...略...
248
+
249
+ for (let d = 0; d < 7; d++) {
250
+ if (w == 0 && d < startDay) {
251
+ // 1行目で1日の曜日の前
252
+ let num = lastMonthendDayCount - startDay + d + 1
253
+ calendarHtml += '<td class="is-disabled">' + num + '</td>'
254
+
255
+ } else if (dayCount > endDayCount) {
256
+ // 末尾の日数を超えた
257
+ let num = dayCount - endDayCount
258
+ calendarHtml += '<td class="is-disabled">' + num + '</td>'
259
+ dayCount++
260
+ } else {
261
+ if (month == today_month && dayCount <= today_day) {
262
+ calendarHtml += `<td class="is-disabled">${dayCount}</td>`
263
+ //calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</td>`
264
+ } else {
265
+ // 予約数を表示
266
+ const reservations = getNumberOfReservations(year, month, dayCount, data);
267
+ calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</br>予約数${reservations}</td>`;
268
+ }
269
+ dayCount++;
270
+ }
271
+ }
272
+ calendarHtml += '</tr>';
273
+ }
274
+ calendarHtml += '</table>';
275
+
276
+ return calendarHtml;
277
+ }
278
+
279
+ google.script.run
280
+ ....
281
+ 以下略
282
+ ...
283
+ </script>
284
+ </body>
285
+ ```
286
+
287
+
288
+ > ③スプレッドシートの値（日付）が長くなる
289
+ Utilities.formatDate() 関数を使いましょう。
290
+
291
+ 質問文のOKバージョンを修正するなら、下記の様になります。
292
+ ```js
293
+ 略
294
+ <?
295
+ var ssId = 'シートID';
296
+ var ss = SpreadsheetApp.openById(ssId);
297
+ var sheetName = 'シート1';
298
+ var data = ss.getSheetByName(sheetName).getDataRange().getValues();
299
+
300
+ var result = '<table border="1">';
301
+ result += '<tr>';
302
+ result += "<td>" + data[0][0] + "</td>";
303
+ result += "<td>" + data[0][3] + "</td>";
304
+ result += '</tr>';
305
+
306
+ for(var i=1; i < data.length; i++){
307
+ result += '<tr>';
308
+ result += "<td>" + Utilities.formatDate(data[i][0],'Asia/Tokyo','yyyy年M月d日') + "</td>";
309
+ result += "<td>" + data[i][3] + "</td>";
310
+ result += '</tr>';
311
+ }
312
+ result += '</table>';
313
+
314
+ output._ = result;
315
+ ?>
316
+
317
+ ```
318
+

1

　

2023/03/20 11:30

投稿

退会済みユーザー
test CHANGED
@@ -150,7 +150,7 @@
150
150
  </script>
151
151
  </body>
152
152
  ```
153
- コード.gs（例）
153
+ コード.gs（例）'シートID' の部分は実際のスプレッドシートIDに変えてください。
154
154
  ```js
155
155
  function doGet() {
156
156
  // 質問では明らかにされていないので仮