質問するログイン新規登録

質問編集履歴

2

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

2021/05/20 13:19

投稿

k2zu1112
k2zu1112

スコア18

title CHANGED
File without changes
body CHANGED
@@ -69,33 +69,8 @@
69
69
  </head>
70
70
  <body>
71
71
  <style>
72
- #header-fixed{
73
- border: 5px solid #fff; /* 表示領域を白枠で囲う */
74
- position: fixed; /* ヘッダーの固定 */
75
- padding:10px 0 10px; /* 上10px、下20pxをあける */
76
- top: 0px; /* 位置(上0px) */
77
- left: 10px; /* 位置(右0px) */
78
- width: 100%; /* 横幅100% */
79
- height:50px; /* 縦幅50px */
80
- background-color:#FFF /* バックの色 */
81
- }
82
- #content{
83
- top: 70px; /* 位置(上0px) */
84
- left: 10px; /* 位置(右0px) */
85
- padding:60px 0 0px;
86
- width: 100%; /* 横幅100% */
87
- background-color: "#000000" /* バックの色 */
88
- }
89
- #menu{
90
- font-size : 15px;
91
- border : 1px;
72
+ *文字数の関係で内容省略
92
- padding : 10px 20px 0px 0px;
93
- }
94
- table.search {
95
- border: solid 1px #000000;
96
- border-collapse: collapse;
97
- }
98
- </style>
73
+  </style>
99
74
  <div id='header-fixed'>
100
75
  <form name="serchForm" action="https://docs.google.com/spreadsheets/d/16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y/edit#gid=0/exec?name=search">
101
76
  <a id='menu' href="https://docs.google.com/spreadsheets/d/16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y/edit#gid=0/exec">全件表示</a>
@@ -107,15 +82,7 @@
107
82
  function clock()
108
83
  {
109
84
  // 現在日時を表すインスタンスを取得
110
- var now = new Date();
85
+ *文字数の関係で内容省略
111
- var dateTime = now.getTime();
112
- var year = now.getFullYear();
113
- var month = now.getMonth()+1;
114
- var day = now.getDate();
115
- var h = now.getHours();
116
- var mi = now.getMinutes();
117
- var s = now.getSeconds();
118
- document.getElementById("clock_time").innerHTML = year + "年" + month + "月" + day + "日 " + h + "時" + mi + "分" + s + "秒";
119
86
  }
120
87
  setInterval(clock, 1000);
121
88
  </script>
@@ -141,20 +108,10 @@
141
108
  url = myData[i][3];
142
109
  if(search !== undefined){
143
110
  if (word.indexOf(search) !== -1){
144
- replace = word.replace(search, '<font color="#ff0000" size="2px"><b>' + search + '</b></font>');
145
- output.append('<tr>');
146
- output.append('<td width="10%" valign="top"><font color="#000000" size="2px">'+ category +'</font></td>');
147
- output.append('<td width="20%" align="left" valign="top"><font size="2px">'+ replace +'</font></td>');
148
- output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+ content +'</font></td>');
149
- output.append('</tr>');
150
- y ++;
111
+ *文字数の関係で内容省略
151
112
  }
152
113
  }else{
153
- output.append('<tr>');
114
+ *文字数の関係で内容省略
154
- output.append('<td width="10%" valign="top"><font color="#000000" size="2px">'+ category +'</font></td>');
155
- output.append('<td width="20%" align="left" valign="top"><font color="#000000" size="2px">'+ word +'</font></td>');
156
- output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+ content +'</font></td>');
157
- output.append('</tr>');
158
115
  }
159
116
  }
160
117
  output.append('</table>');
@@ -192,4 +149,153 @@
192
149
  ![イメージ説明](8be396889ca075a1ccde87444c976883.png)
193
150
 
194
151
  お力添え頂ければ幸いです。
195
- どうぞよろしくお願い致します。
152
+ どうぞよろしくお願い致します。
153
+
154
+
155
+
156
+ ★★★5/20更新★★★
157
+ お二人の方にアドバイスを頂き、完成へ近付いているという実感があります。
158
+ ありがとうございます。
159
+ しかし、依然としてエラーが出てしまっており、そちらの解決方法についてもご教授いただければ幸いです。
160
+
161
+ 【行った修正】
162
+ ・「プロジェクトの設定」から「Chrome V8 ランタイムを有効にする」チェックを外す。
163
+ ・参考サイトのhtmlコードには余分な全角空白がいくつか混じっているので、取り除く。(不十分な部分があるかもしれません)
164
+ ・<form ~> の action と #menuのhrefのURLへはデプロイしたウェブアプリのURLを入力
165
+ ・form actionのurl中のnameパラメータをsearchからsearchWordへ変更
166
+ ・検索語句が数字の場合にエラーが発生しないようにするため、検索語句を文字列に変換
167
+ 前:word = myData[i][1]; → 後:word = String(myData[i][1]);
168
+ ・一度デプロイして、デプロイIDをHTML側にコピーし、デプロイの管理から一番上のアクティブなデプロイを選び編集ボタンを押し、バージョンのセレクトボックスから新バージョンを選択し、「適切なコメント」を入力して再度デプロイ
169
+ →「適切なコメント」を正しく理解出来ていないかもしれませんが、ご記入いただいた手順の通り修正を行いました。
170
+
171
+ 【現状発生しているエラー】
172
+ 1,スクリプトファイル上で「parameter」が読み取れていない。
173
+ ![イメージ説明](3249ceff50bbf495e57a196195bfd37c.jpeg)
174
+
175
+ 2,ウェブアプリの[URL](https://script.google.com/macros/s/AKfycbzQzvKu_mSPmUJoaLFem2fQ9CxItXJUF0PwFvpJD2NT6Sni2D8V6DHCZZi4uwQJycmh/exec)へ飛ぶと画面が字だらけになっている。
176
+ ![イメージ説明](3a2d57da2d119f82ffc32f82b59b800d.jpeg)
177
+
178
+ 【現状のコード】
179
+ ```JavaScript
180
+ search = "";
181
+ var id ='16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y';
182
+ var sheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
183
+
184
+ console.log(id); //エラーチェック
185
+ console.log(sheet.getName()) //エラーチェック
186
+
187
+ function doPost(e){
188
+ doGet(e);
189
+ return HtmlService.createTemplateFromFile("index").evaluate();
190
+ }
191
+ function doGet(e) {
192
+ search = e.parameter.searchWord;
193
+ if (e.parameter.name == undefined) {
194
+ //初期表示はビューのみ
195
+ //return HtmlService.createTemplateFromFile("index").evaluate();
196
+ return HtmlService.createHtmlOutputFromFile("index")
197
+ .setSandboxMode(HtmlService.SandboxMode.IFRAME);
198
+ }
199
+ if (e.parameter.searchWord !== undefined) {
200
+ //検索時も同じ画面に返します
201
+ return HtmlService.createTemplateFromFile("index").evaluate();
202
+ }
203
+ }
204
+ function getSearch(){
205
+ return search;
206
+ }
207
+
208
+ ```
209
+
210
+ ```html
211
+ <!DOCTYPE html>
212
+ <html>
213
+ <head>
214
+ <base target="_top">
215
+ </head>
216
+ <body>
217
+ <style>
218
+ *文字数の関係で内容省略
219
+  </style>
220
+ <div id='header-fixed'>
221
+ <form name="serchForm" action="https://script.google.com/macros/s/AKfycbzQzvKu_mSPmUJoaLFem2fQ9CxItXJUF0PwFvpJD2NT6Sni2D8V6DHCZZi4uwQJycmh/exec?name=searchWord">
222
+ <a id='menu' href="https://script.google.com/macros/s/AKfycbzQzvKu_mSPmUJoaLFem2fQ9CxItXJUF0PwFvpJD2NT6Sni2D8V6DHCZZi4uwQJycmh/exec">全件表示</a>
223
+ 検索文字:<input type="text" width="30%" name="searchWord" required>
224
+ <input type="submit">
225
+ <font size="1px">      現在の時刻:<span id="clock_time"></span></font>
226
+ </form>
227
+ <script>
228
+ function clock()
229
+ {
230
+ *文字数の関係で内容省略
231
+ }
232
+ setInterval(clock, 1000);
233
+ </script>
234
+ </div>
235
+ <div id='content'>
236
+ <ul>
237
+ <?
238
+ // シートから用語集を表示する
239
+    var id ='16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y';
240
+   var mySheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
241
+ var endrow = mySheet.getLastRow();
242
+ var myData = mySheet.getRange(2, 1 , endrow-1 , 4).getValues();
243
+ myMail = Session.getActiveUser().getEmail();
244
+ search = getSearch();
245
+ output.append('検索文字='+ escape_html(search));
246
+ output.append('<table class="search" border="1">');
247
+ output.append('<tr bgcolor="#aaccff"><th>カテゴリ</th><th>用語</th><th>内容</th></tr>');
248
+ y=0; //検索結果のカウンタ
249
+ for(var i=0;i<myData.length;i++){
250
+ category = myData[i][0];
251
+ word = String(myData[i][1])
252
+ content = myData[i][2];
253
+ url = myData[i][3];
254
+ if(search !== undefined){
255
+ if (word.indexOf(search) !== -1){
256
+ replace = word.replace(search, '<font color="#ff0000" size="2px"><b>'+ search +'</b></font>');
257
+ output.append('<tr>');
258
+ output.append('<td width="10%" valign="top"><font color="#000000" size="2px">'+ category +'</font></td>');
259
+ output.append('<td width="20%" align="left" valign="top"><font size="2px">'+ replace +'</font></td>');
260
+ output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+ content +'</font></td>');
261
+ output.append('</tr>');
262
+ y ++;
263
+ }
264
+ }else{
265
+ output.append('<tr>');
266
+ output.append('<td width="10%" valign="top"><font color="#000000" size="2px">'+ category +'</font></td>');
267
+ output.append('<td width="20%" align="left" valign="top"><font color="#000000" size="2px">'+ word +'</font></td>');
268
+ output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+ content +'</font></td>');
269
+ output.append('</tr>');
270
+ }
271
+ }
272
+ output.append('</table>');
273
+ if (y == 0){
274
+ output.append('検索できませんでした。キーワードを変えてもう一度検索してください。');
275
+ }
276
+ ?>
277
+ <?
278
+ function escape_html (string) {
279
+ if(typeof string !== 'string') {
280
+ return string;
281
+ }
282
+ return string.replace(/[&'`"<>]/g, function(match) {
283
+ return {
284
+ '&':'&amp;',
285
+ "'":'&#x27;',
286
+ '`':'&#x60;',
287
+ '"':'&quot;',
288
+ '<':'&lt;',
289
+ '>':'&gt;',
290
+ }[match]
291
+ });
292
+ }
293
+ ?>
294
+ </ul>
295
+ </div>
296
+ </body>
297
+ </html>
298
+ ```
299
+
300
+ 」画面中が字で埋め尽くされる」エラーの内容から考えると初歩的なミスであるかもしれません。
301
+ 申し訳ありませんが、再度お力添えの程よろしくお願い致します。

1

現状項目の追加

2021/05/20 13:19

投稿

k2zu1112
k2zu1112

スコア18

title CHANGED
File without changes
body CHANGED
@@ -8,8 +8,15 @@
8
8
  【達成目標】
9
9
  [参考サイト](https://note.com/consul_addtag/n/ncfc792de4fa9)の動きを再現
10
10
 
11
+ 【出てくるファイル・ページ】
12
+ ・スプレッドシート(ファイル名:経営用語集、シート名:用語集)
13
+ ・GAS(プロジェクト名:用語集、コード:search.gs)
14
+ ・HTML(ファイル名:index(.html))
15
+
11
16
  【問題点】
12
- 参考サイトからファイル名やコードを真似て作成したスクリプトファイルにエラーが出てしまう。
17
+ 参考サイトからファイル名やコードを真似て作成したスクリプトファイルにエラーが出てしまう。
18
+ ・HTMLをウェブ上で表示した際に、UIが上手く表示されていない。
19
+ →どこが問題なのかを理解できていません....。
13
20
 
14
21
  【これまで試したこと】
15
22
  ・openByIdをopenByUrlへ変更→エラー内容に変化無し