質問編集履歴

2

コメント欄にいただいた内容の修正を行いました。しかし、未だにエラーは解決せず、行き詰ってしまっております。

2021/05/20 13:19

投稿

k2zu1112
k2zu1112

スコア18

test CHANGED
File without changes
test CHANGED
@@ -140,65 +140,307 @@
140
140
 
141
141
  <style>
142
142
 
143
- #header-fixed{
144
-
145
- border: 5px solid #fff; /* 表示領域を白枠で囲う */
146
-
147
- position: fixed; /* ヘッダーの固定 */
148
-
149
- padding:10px 0 10px; /* 上10px、下20pxをあける */
150
-
151
- top: 0px; /* 位置(上0px) */
152
-
153
- left: 10px; /* 位置(右0px) */
154
-
155
- width: 100%; /* 横幅100% */
156
-
157
- height:50px; /* 縦幅50px */
158
-
159
- background-color:#FFF /* バックの色 */
143
+ *文字数の関係で内容省略
144
+
145
+  </style>
146
+
147
+ <div id='header-fixed'>
148
+
149
+ <form name="serchForm" action="https://docs.google.com/spreadsheets/d/16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y/edit#gid=0/exec?name=search">
150
+
151
+ <a id='menu' href="https://docs.google.com/spreadsheets/d/16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y/edit#gid=0/exec">全件表示</a>
152
+
153
+ 検索文字:<input type="text" width="30%" name="searchWord" required>
154
+
155
+ <input type="submit">
156
+
157
+ <font size="1px">      現在の時刻:<span id="clock_time"></span></font>
158
+
159
+ </form>
160
+
161
+ <script>
162
+
163
+ function clock()
164
+
165
+ {
166
+
167
+ // 現在日時を表すインスタンスを取得
168
+
169
+ *文字数の関係で内容省略
170
+
171
+ }
172
+
173
+ setInterval(clock, 1000);
174
+
175
+ </script>
176
+
177
+ </div>
178
+
179
+ <div id='content'>
180
+
181
+ <ul>
182
+
183
+ <?
184
+
185
+ // シートから用語集を表示する
186
+
187
+    var id ='16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y';
188
+
189
+    var mySheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
190
+
191
+ var endrow = mySheet.getLastRow();
192
+
193
+ var myData = mySheet.getRange(2, 1 , endrow-1 , 4).getValues();
194
+
195
+ myMail = Session.getActiveUser().getEmail();
196
+
197
+ search = getSearch();
198
+
199
+ output.append('検索文字='+ escape_html(search));
200
+
201
+ output.append('<table class="search" border="1">');
202
+
203
+ output.append('<tr bgcolor="#aaccff"><th>カテゴリ</th><th>用語</th><th>内容</th></tr>');
204
+
205
+ y=0; //検索結果のカウンタ
206
+
207
+ for(var i=0;i<myData.length;i++){
208
+
209
+ category = myData[i][0];
210
+
211
+ word = myData[i][1];
212
+
213
+       content = myData[i][2];
214
+
215
+ url = myData[i][3];
216
+
217
+ if(search !== undefined){
218
+
219
+ if (word.indexOf(search) !== -1){
220
+
221
+ *文字数の関係で内容省略
222
+
223
+ }
224
+
225
+ }else{
226
+
227
+ *文字数の関係で内容省略
228
+
229
+ }
230
+
231
+ }
232
+
233
+ output.append('</table>');
234
+
235
+ if (y == 0){
236
+
237
+ output.append('検索できませんでした。キーワードを変えてもう一度検索してください。');
238
+
239
+ }
240
+
241
+ ?>
242
+
243
+ <?
244
+
245
+ function escape_html (string) {
246
+
247
+ if(typeof string !== 'string') {
248
+
249
+ return string;
250
+
251
+ }
252
+
253
+ return string.replace(/[&'`"<>]/g, function(match) {
254
+
255
+ return {
256
+
257
+ '&': '&amp;',
258
+
259
+ "'": '&#x27;',
260
+
261
+ '`': '&#x60;',
262
+
263
+ '"': '&quot;',
264
+
265
+ '<': '&lt;',
266
+
267
+ '>': '&gt;',
268
+
269
+ }[match]
270
+
271
+ });
272
+
273
+ }
274
+
275
+ ?>
276
+
277
+ </ul>
278
+
279
+ </div>
280
+
281
+ </body>
282
+
283
+ </html>
284
+
285
+ ```
286
+
287
+
288
+
289
+ **スプレッドシート**
290
+
291
+ ![イメージ説明](c9fd8266f8ff60d0dc6bde69ddb62e43.png)
292
+
293
+
294
+
295
+ **HTMLをウェブで開いた画面**
296
+
297
+ ![イメージ説明](8be396889ca075a1ccde87444c976883.png)
298
+
299
+
300
+
301
+ お力添え頂ければ幸いです。
302
+
303
+ どうぞよろしくお願い致します。
304
+
305
+
306
+
307
+
308
+
309
+
310
+
311
+ ★★★5/20更新★★★
312
+
313
+ お二人の方にアドバイスを頂き、完成へ近付いているという実感があります。
314
+
315
+ ありがとうございます。
316
+
317
+ しかし、依然としてエラーが出てしまっており、そちらの解決方法についてもご教授いただければ幸いです。
318
+
319
+
320
+
321
+ 【行った修正】
322
+
323
+ ・「プロジェクトの設定」から「Chrome V8 ランタイムを有効にする」チェックを外す。
324
+
325
+ ・参考サイトのhtmlコードには余分な全角空白がいくつか混じっているので、取り除く。(不十分な部分があるかもしれません)
326
+
327
+ ・<form ~> の action と #menuのhrefのURLへはデプロイしたウェブアプリのURLを入力
328
+
329
+ ・form actionのurl中のnameパラメータをsearchからsearchWordへ変更
330
+
331
+ ・検索語句が数字の場合にエラーが発生しないようにするため、検索語句を文字列に変換
332
+
333
+ 前:word = myData[i][1]; → 後:word = String(myData[i][1]);
334
+
335
+ ・一度デプロイして、デプロイIDをHTML側にコピーし、デプロイの管理から一番上のアクティブなデプロイを選び編集ボタンを押し、バージョンのセレクトボックスから新バージョンを選択し、「適切なコメント」を入力して再度デプロイ
336
+
337
+ →「適切なコメント」を正しく理解出来ていないかもしれませんが、ご記入いただいた手順の通り修正を行いました。
338
+
339
+
340
+
341
+ 【現状発生しているエラー】
342
+
343
+ 1,スクリプトファイル上で「parameter」が読み取れていない。
344
+
345
+ ![イメージ説明](3249ceff50bbf495e57a196195bfd37c.jpeg)
346
+
347
+
348
+
349
+ 2,ウェブアプリの[URL](https://script.google.com/macros/s/AKfycbzQzvKu_mSPmUJoaLFem2fQ9CxItXJUF0PwFvpJD2NT6Sni2D8V6DHCZZi4uwQJycmh/exec)へ飛ぶと画面が字だらけになっている。
350
+
351
+ ![イメージ説明](3a2d57da2d119f82ffc32f82b59b800d.jpeg)
352
+
353
+
354
+
355
+ 【現状のコード】
356
+
357
+ ```JavaScript
358
+
359
+ search = "";
360
+
361
+ var id ='16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y';
362
+
363
+ var sheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
364
+
365
+
366
+
367
+ console.log(id); //エラーチェック
368
+
369
+ console.log(sheet.getName()) //エラーチェック
370
+
371
+
372
+
373
+ function doPost(e){
374
+
375
+ doGet(e);
376
+
377
+ return HtmlService.createTemplateFromFile("index").evaluate();
378
+
379
+ }
380
+
381
+ function doGet(e) {
382
+
383
+ search = e.parameter.searchWord;
384
+
385
+ if (e.parameter.name == undefined) {
386
+
387
+ //初期表示はビューのみ
388
+
389
+ //return HtmlService.createTemplateFromFile("index").evaluate();
390
+
391
+ return HtmlService.createHtmlOutputFromFile("index")
392
+
393
+ .setSandboxMode(HtmlService.SandboxMode.IFRAME);
160
394
 
161
395
  }
162
396
 
163
- #content{
164
-
165
- top: 70px; /* 位置(上0px) */
166
-
167
- left: 10px; /* 位置(右0px) */
397
+ if (e.parameter.searchWord !== undefined) {
168
-
398
+
169
- padding:60px 0 0px;
399
+ //検索時も同じ画面に返します
170
-
171
- width: 100%; /* 横幅100% */
400
+
172
-
173
- background-color: "#000000" /* バックの色 */
401
+ return HtmlService.createTemplateFromFile("index").evaluate();
174
402
 
175
403
  }
176
404
 
177
- #menu{
178
-
179
- font-size : 15px;
180
-
181
- border : 1px;
182
-
183
- padding : 10px 20px 0px 0px;
184
-
185
- }
405
+ }
406
+
186
-
407
+ function getSearch(){
408
+
187
- table.search {
409
+ return search;
188
-
189
- border: solid 1px #000000;
410
+
190
-
191
- border-collapse: collapse;
192
-
193
- }
411
+ }
412
+
413
+
414
+
194
-
415
+ ```
416
+
417
+
418
+
419
+ ```html
420
+
421
+ <!DOCTYPE html>
422
+
423
+ <html>
424
+
425
+ <head>
426
+
427
+ <base target="_top">
428
+
429
+ </head>
430
+
431
+ <body>
432
+
433
+ <style>
434
+
435
+ *文字数の関係で内容省略
436
+
195
- </style>
437
+  </style>
196
438
 
197
439
  <div id='header-fixed'>
198
440
 
199
- <form name="serchForm" action="https://docs.google.com/spreadsheets/d/16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y/edit#gid=0/exec?name=search">
441
+ <form name="serchForm" action="https://script.google.com/macros/s/AKfycbzQzvKu_mSPmUJoaLFem2fQ9CxItXJUF0PwFvpJD2NT6Sni2D8V6DHCZZi4uwQJycmh/exec?name=searchWord">
200
-
442
+
201
- <a id='menu' href="https://docs.google.com/spreadsheets/d/16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y/edit#gid=0/exec">全件表示</a>
443
+ <a id='menu' href="https://script.google.com/macros/s/AKfycbzQzvKu_mSPmUJoaLFem2fQ9CxItXJUF0PwFvpJD2NT6Sni2D8V6DHCZZi4uwQJycmh/exec">全件表示</a>
202
444
 
203
445
  検索文字:<input type="text" width="30%" name="searchWord" required>
204
446
 
@@ -214,25 +456,7 @@
214
456
 
215
457
  {
216
458
 
217
- // 現在日時を表すインスタンスを取得
218
-
219
- var now = new Date();
459
+ *文字数の関係で内容省略
220
-
221
- var dateTime = now.getTime();
222
-
223
- var year = now.getFullYear();
224
-
225
- var month = now.getMonth()+1;
226
-
227
- var day = now.getDate();
228
-
229
- var h = now.getHours();
230
-
231
- var mi = now.getMinutes();
232
-
233
- var s = now.getSeconds();
234
-
235
- document.getElementById("clock_time").innerHTML = year + "年" + month + "月" + day + "日 " + h + "時" + mi + "分" + s + "秒";
236
460
 
237
461
  }
238
462
 
@@ -250,9 +474,9 @@
250
474
 
251
475
  // シートから用語集を表示する
252
476
 
253
-    var id ='16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y';
477
+    var id ='16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y';
254
-
478
+
255
-    var mySheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
479
+   var mySheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
256
480
 
257
481
  var endrow = mySheet.getLastRow();
258
482
 
@@ -274,9 +498,9 @@
274
498
 
275
499
  category = myData[i][0];
276
500
 
277
- word = myData[i][1];
501
+ word = String(myData[i][1])
278
-
502
+
279
-       content = myData[i][2];
503
+ content = myData[i][2];
280
504
 
281
505
  url = myData[i][3];
282
506
 
@@ -284,7 +508,7 @@
284
508
 
285
509
  if (word.indexOf(search) !== -1){
286
510
 
287
- replace = word.replace(search, '<font color="#ff0000" size="2px"><b>' + search + '</b></font>');
511
+ replace = word.replace(search, '<font color="#ff0000" size="2px"><b>'+ search +'</b></font>');
288
512
 
289
513
  output.append('<tr>');
290
514
 
@@ -292,7 +516,7 @@
292
516
 
293
517
  output.append('<td width="20%" align="left" valign="top"><font size="2px">'+ replace +'</font></td>');
294
518
 
295
- output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+ content +'</font></td>');
519
+ output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+ content +'</font></td>');
296
520
 
297
521
  output.append('</tr>');
298
522
 
@@ -340,17 +564,17 @@
340
564
 
341
565
  return {
342
566
 
343
- '&': '&amp;',
567
+ '&':'&amp;',
344
-
568
+
345
- "'": '&#x27;',
569
+ "'":'&#x27;',
346
-
570
+
347
- '`': '&#x60;',
571
+ '`':'&#x60;',
348
-
572
+
349
- '"': '&quot;',
573
+ '"':'&quot;',
350
-
574
+
351
- '<': '&lt;',
575
+ '<':'&lt;',
352
-
576
+
353
- '>': '&gt;',
577
+ '>':'&gt;',
354
578
 
355
579
  }[match]
356
580
 
@@ -372,18 +596,6 @@
372
596
 
373
597
 
374
598
 
375
- **スプレッドシート**
376
-
377
- ![イメジ説明](c9fd8266f8ff60d0dc6bde69ddb62e43.png)
599
+ 」画面中が字で埋め尽くされる」エラの内容から考えると初歩的なミスであるかもしれません。
378
-
379
-
380
-
381
- **HTMLをウェブで開いた画面**
600
+
382
-
383
- ![イメージ説明](8be396889ca075a1ccde87444c976883.png)
384
-
385
-
386
-
387
- お力添え頂ければ幸いです。
388
-
389
- どうぞよろしくお願い致します。
601
+ 申し訳ありませんが、再度お力添えの程よろしくお願い致します。

1

現状項目の追加

2021/05/20 13:19

投稿

k2zu1112
k2zu1112

スコア18

test CHANGED
File without changes
test CHANGED
@@ -18,9 +18,23 @@
18
18
 
19
19
 
20
20
 
21
+ 【出てくるファイル・ページ】
22
+
23
+ ・スプレッドシート(ファイル名:経営用語集、シート名:用語集)
24
+
25
+ ・GAS(プロジェクト名:用語集、コード:search.gs)
26
+
27
+ ・HTML(ファイル名:index(.html))
28
+
29
+
30
+
21
31
  【問題点】
22
32
 
23
- 参考サイトからファイル名やコードを真似て作成したスクリプトファイルにエラーが出てしまう。
33
+ 参考サイトからファイル名やコードを真似て作成したスクリプトファイルにエラーが出てしまう。
34
+
35
+ ・HTMLをウェブ上で表示した際に、UIが上手く表示されていない。
36
+
37
+ →どこが問題なのかを理解できていません....。
24
38
 
25
39
 
26
40