質問編集履歴

1

ソースを追加

2020/07/03 12:49

投稿

rena_168
rena_168

スコア72

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,424 @@
10
10
 
11
11
  https://note.com/consul_addtag/n/nd581fe122540
12
12
 
13
+ ```HTML
14
+
15
+ <!DOCTYPE html>
16
+
17
+ <html>
18
+
19
+ <head>
20
+
21
+ <base target="_top">
22
+
23
+ </head>
24
+
25
+ <body>
26
+
27
+ <style>
28
+
29
+ #header-fixed{
30
+
31
+ border: 5px solid #fff; /* 表示領域を白枠で囲う */
32
+
33
+ position: fixed; /* ヘッダーの固定 */
34
+
35
+ padding:10px 0 20px; /* 上10px、下20pxをあける */
36
+
37
+ top: 0px; /* 位置(上0px) */
38
+
39
+ left: 10px; /* 位置(右0px) */
40
+
41
+ width: 100%; /* 横幅100% */
42
+
43
+ height:70px; /* 縦幅70px */
44
+
45
+ background-color:#FFF /* バックの色 */
46
+
47
+ }
48
+
49
+ #content{
50
+
51
+ top: 80px; /* 位置(上0px) */
52
+
53
+ left: 0px; /* 位置(右0px) */
54
+
55
+ padding:110px 0 0px;
56
+
57
+ width: 100%; /* 横幅100% */
58
+
59
+ background-color: "#000000" /* バックの色 */
60
+
61
+ }
62
+
63
+ #menu{
64
+
65
+ font-size : 20px;
66
+
67
+ border : 1px;
68
+
69
+ padding : 10px 20px 0px 0px;
70
+
71
+ }
72
+
73
+ thead {
74
+
75
+ display: block;
76
+
77
+ }
78
+
79
+ tbody {
80
+
81
+ overflow-x: hidden;
82
+
83
+ overflow-y: scroll;
84
+
85
+ }
86
+
87
+ </style>
88
+
89
+ <?
90
+
91
+ url = "https://script.google.com/macros/s//exec";
92
+
93
+ ?>
94
+
95
+ <div id='header-fixed'>
96
+
97
+ <font size="5pt" color="#5555ff">社員管理システム  </font>
98
+
99
+ <a id='menu' href="<?=url?>/exec?name=view">再表示</a>
100
+
101
+ <a id='menu' href="<?=url?>/exec?name=inputStuff">社員登録</a>
102
+
103
+ <!-- <font size='5px'> 只今の時刻<span id="clock_time"></span>です。</font> -->
104
+
105
+ </div>
106
+
107
+ <!-- ↑↑↑メニュー↑↑↑-->
108
+
109
+ <script>
110
+
111
+ function clock()
112
+
113
+ {
114
+
115
+ // 現在日時を表すインスタンスを取得
116
+
117
+ // var now = new Date();
118
+
119
+ // document.getElementById("clock_time").innerHTML = now;
120
+
121
+ }
122
+
123
+ setInterval(clock, 1000);
124
+
125
+ </script>
126
+
127
+ <?
128
+
129
+ myMail = Session.getActiveUser().getEmail();
130
+
131
+ output.append('<font size="2px" color="#5555ff">ログインユーザー:');
132
+
133
+ output.append( myMail);
134
+
135
+ ?>
136
+
137
+ <div id='content'>
138
+
139
+ <?
140
+
141
+ //スタッフリストのスプレッドIDを指定
142
+
143
+    var id ="";
144
+
145
+    var mySheet = SpreadsheetApp.openById(id).getSheetByName("");
146
+
147
+ var endrow = mySheet.getLastRow();
148
+
149
+ var headData = mySheet.getRange("A1:N1").getValues();
150
+
151
+ var myData = mySheet.getRange(2, 1 , endrow-1 , 14).getValues();
152
+
153
+ output.append('<table border="1" cellspacing="0" cellpadding="5" bordercolor="#333333" style="table-layout:fixed;width:100%;">');
154
+
155
+ output.append('<thead><div fixed>');
156
+
157
+ output.append('<colgroup>');
158
+
159
+ output.append('<col style="width:3%;"><col style="width:7%;"><col><col><col><col><col><col style="width:20%;"><col style="width:10%;"><col><col style="width:10%;"><col style="width:15%;"><col style="width:5%;"><col>');
160
+
161
+ output.append('</colgroup>');
162
+
163
+ output.append('<tr>');
164
+
165
+ headprefix = '<th bgcolor="#5555ff"><font color="#FFFFFF" size="2px">';
166
+
167
+ headbackfix = '</font></th>';
168
+
169
+
170
+
171
+ //ヘッダー情報取得
172
+
173
+ no = headData[0][0];
174
+
175
+ name = headData[0][1];
176
+
177
+ commit = headData[0][2];
178
+
179
+ company = headData[0][3];
180
+
181
+ payroll = headData[0][4];
182
+
183
+ roll = headData[0][5];
184
+
185
+ post = headData[0][6];
186
+
187
+ profile = headData[0][7];
188
+
189
+ tag = headData[0][8];
190
+
191
+ avalable = headData[0][9];
192
+
193
+ address = headData[0][10];
194
+
195
+ facebook = headData[0][11];
196
+
197
+ ndadate = headData[0][12];
198
+
199
+ status = headData[0][13];
200
+
201
+
202
+
203
+ //テーブルヘッダー作成
204
+
205
+ output.append(headprefix + no + headbackfix);
206
+
207
+ output.append(headprefix + name + headbackfix);
208
+
209
+ output.append(headprefix + commit + headbackfix);
210
+
211
+ output.append(headprefix + company + headbackfix);
212
+
213
+ output.append(headprefix + payroll + headbackfix);
214
+
215
+ output.append(headprefix + roll + headbackfix);
216
+
217
+ output.append(headprefix + post + headbackfix);
218
+
219
+ output.append(headprefix + profile + headbackfix);
220
+
221
+ output.append(headprefix + tag + headbackfix);
222
+
223
+ output.append(headprefix + avalable + headbackfix);
224
+
225
+ output.append(headprefix + address + headbackfix);
226
+
227
+ output.append(headprefix + facebook + headbackfix);
228
+
229
+ output.append(headprefix + ndadate + headbackfix);
230
+
231
+ output.append(headprefix + status + headbackfix);
232
+
233
+ output.append('</tr>');
234
+
235
+ output.append('</thead></div>');
236
+
237
+
238
+
239
+ //テーブルボディの作成
240
+
241
+ output.append('<tbody>');
242
+
243
+ y=0;
244
+
245
+ for(var i=0; i<myData.length; i++){
246
+
247
+ no = myData[i][y];
248
+
249
+ name = myData[i][y+1];
250
+
251
+ commit = myData[i][y+2];
252
+
253
+ company = myData[i][y+3];
254
+
255
+ payroll = myData[i][y+4];
256
+
257
+ roll = myData[i][y+5];
258
+
259
+ post = myData[i][y+6];
260
+
261
+ profile = myData[i][y+7];
262
+
263
+ tag = myData[i][y+8];
264
+
265
+ avalable = myData[i][y+9];
266
+
267
+ address = myData[i][y+10];
268
+
269
+ facebook = myData[i][y+11];
270
+
271
+ ndadate = myData[i][y+12];
272
+
273
+ status = myData[i][y+13];
274
+
275
+
276
+
277
+       headprefix = '<td style="word-wrap:break-word;"><font color="#000000" size="1px">';
278
+
279
+ headbackfix = '</font></td>';
280
+
281
+
282
+
283
+ if (status === "解約" || status === "退職"){
284
+
285
+ output.append('<tr bgcolor = "#333333">');
286
+
287
+ }else if(status === "停止中"){
288
+
289
+ output.append('<tr bgcolor = "#AAAAAA">');
290
+
291
+ }else{
292
+
293
+ output.append('<tr bgcolor = "#FFFFFF">');
294
+
295
+ }
296
+
297
+ output.append(headprefix + no + headbackfix);
298
+
299
+ output.append(headprefix + getModifyUrl(no,name) + headbackfix);
300
+
301
+ output.append(headprefix + commit + headbackfix);
302
+
303
+ output.append(headprefix + company + headbackfix);
304
+
305
+ output.append(headprefix + payroll + headbackfix);
306
+
307
+ output.append(headprefix + roll + headbackfix);
308
+
309
+ output.append(headprefix + post + headbackfix);
310
+
311
+ output.append(headprefix + getLink(profile) + headbackfix);
312
+
313
+ output.append(headprefix + tag + headbackfix);
314
+
315
+ output.append(headprefix + avalable + headbackfix);
316
+
317
+ output.append(headprefix + getMailAddress(address) + headbackfix);
318
+
319
+ output.append(headprefix + getLink(facebook) + headbackfix);
320
+
321
+ output.append(headprefix + getViewDate(ndadate) + headbackfix);
322
+
323
+ output.append(headprefix + status + headbackfix);
324
+
325
+ output.append('</tr>');
326
+
327
+ }
328
+
329
+ output.append('</tbody>');
330
+
331
+ output.append('</table>');
332
+
333
+ ?>
334
+
335
+ <?
336
+
337
+ //上記から参照する関数群
338
+
339
+ function escape_html (string) {
340
+
341
+ if(typeof string !== 'string') {
342
+
343
+ return string;
344
+
345
+ }
346
+
347
+ return string.replace(/[&'`"<>]/g, function(match) {
348
+
349
+ return {
350
+
351
+ '&': '&amp;',
352
+
353
+ "'": '&#x27;',
354
+
355
+ '`': '&#x60;',
356
+
357
+ '"': '&quot;',
358
+
359
+ '<': '&lt;',
360
+
361
+ '>': '&gt;',
362
+
363
+ }[match]
364
+
365
+ });
366
+
367
+ }
368
+
369
+
370
+
371
+ //修正画面リンクを埋め込む関数
372
+
373
+ function getModifyUrl (no, name) {
374
+
375
+ var modifyUrl = url + "/exec?name=modify&no=" + no;
376
+
377
+ return '<a href="' + modifyUrl + '" target="_top">' + name + '</a>';
378
+
379
+ };
380
+
381
+
382
+
383
+      //URLリンクを埋め込む関数
384
+
385
+ function getLink (stringUrl) {
386
+
387
+ var pattern = 'http';
388
+
389
+ if(stringUrl.indexOf(pattern) === 0){
390
+
391
+ return '<a href="' + stringUrl + '" target="_blank">' + stringUrl + '</a>';
392
+
393
+ }else{
394
+
395
+ return stringUrl;
396
+
397
+ }
398
+
399
+ };
400
+
401
+
402
+
403
+ //メールリンクを埋め込む関数
404
+
405
+ function getMailAddress (stringMail) {
406
+
407
+ if(stringMail.indexOf('@') != -1){
408
+
409
+ return '<a href="mailto:' + stringMail + '">' + stringMail + '</a>';
410
+
411
+ }else{
412
+
413
+ return stringMail;
414
+
415
+ }
416
+
417
+ };
418
+
419
+
420
+
421
+ ?>
422
+
423
+ </div>
424
+
425
+ </body>
426
+
427
+ </html>
428
+
429
+ ```
430
+
13
431
 
14
432
 
15
433
  HTMLはあんまり書いたことがないので、このような時にうまく修正できないんです。