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

回答編集履歴

4

追記

2021/05/28 00:06

投稿

Tatsunosuke
Tatsunosuke

スコア599

answer CHANGED
@@ -17,7 +17,7 @@
17
17
  '<table class="search" border="1">' +
18
18
  '<tr bgcolor="#aaccff"><th>カテゴリ</th><th>用語</th><th>内容</th></tr>';
19
19
 
20
- myData.forEach(e => {
20
+ myData.forEach((e) => {
21
21
  var category = e[0];
22
22
  var word = e[1];
23
23
  var content = e[2];

3

修正

2021/05/28 00:06

投稿

Tatsunosuke
Tatsunosuke

スコア599

answer CHANGED
@@ -33,8 +33,7 @@
33
33
  result += '<td width="20%" align="left" valign="top"><font color="#000000" size="2px">' + word + '</font></td>';
34
34
  }
35
35
  result += '<td valign="top"><font style="bold" size="2px" color="#000000">' + content + '</font></td>' +
36
- '</tr>' +
36
+ '</tr>'
37
- '</table>'
38
37
  })
39
38
  result += "</table>"
40
39
 

2

追記

2021/05/27 13:18

投稿

Tatsunosuke
Tatsunosuke

スコア599

answer CHANGED
@@ -1,5 +1,79 @@
1
1
  追記
2
2
 
3
+ ノーテストで申し訳ないですが、これでいけるはずです!
4
+
5
+
6
+ ```gas
7
+ const id = 'スプレッドシートのID';
8
+ const mySheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
9
+ const endrow = mySheet.getLastRow();
10
+ const myData = mySheet.getRange(2, 1, endrow - 1, 4).getValues();
11
+
12
+
13
+ function getValue(searchWord) {  //④
14
+ //スプレッドシートから必要な処理を行う。
15
+
16
+ var result = '検索文字=' + escape_html(searchWord) +
17
+ '<table class="search" border="1">' +
18
+ '<tr bgcolor="#aaccff"><th>カテゴリ</th><th>用語</th><th>内容</th></tr>';
19
+
20
+ myData.forEach(e => {
21
+ var category = e[0];
22
+ var word = e[1];
23
+ var content = e[2];
24
+ var url = e[3];
25
+
26
+ result += '<tr>' +
27
+ '<td width="10%" valign="top"><font color="#000000" size="2px">' + category + '</font></td>';
28
+
29
+ if (searchWord || word.indexOf(searchWord) !== -1) {
30
+ var replace = word.replace(searchWord, '<font color="#ff0000" size="2px"><b>' + search + '</b></font>');
31
+ result += '<td width="20%" align="left" valign="top"><font size="2px">' + replace + '</font></td>';
32
+ } else {
33
+ result += '<td width="20%" align="left" valign="top"><font color="#000000" size="2px">' + word + '</font></td>';
34
+ }
35
+ result += '<td valign="top"><font style="bold" size="2px" color="#000000">' + content + '</font></td>' +
36
+ '</tr>' +
37
+ '</table>'
38
+ })
39
+ result += "</table>"
40
+
41
+ if (myData.length <= 1) {
42
+ result += '検索できませんでした。キーワードを変えてもう一度検索してください。'
43
+ }
44
+
45
+ return result
46
+ }
47
+
48
+ function escape_html(string) {
49
+ if (typeof string !== 'string') {
50
+ return string;
51
+ }
52
+ return string.replace(/[&'`"<>]/g, function (match) {
53
+ return {
54
+ '&': '&amp;',
55
+ "'": '&#x27;',
56
+ '`': '&#x60;',
57
+ '"': '&quot;',
58
+ '<': '&lt;',
59
+ '>': '&gt;',
60
+ }[match]
61
+ });
62
+ }
63
+
64
+
65
+
66
+ function doGet(e) {
67
+ return HtmlService.createTemplateFromFile("index").evaluate();
68
+
69
+ }
70
+
71
+ ```
72
+
73
+
74
+ ---
75
+ 追記
76
+
3
77
  コードバッサリ省略させていただきました!
4
78
 
5
79
  ①送信ボタンを押すとsend()が呼ばれます。

1

修正

2021/05/27 13:17

投稿

Tatsunosuke
Tatsunosuke

スコア599

answer CHANGED
@@ -1,3 +1,78 @@
1
+ 追記
2
+
3
+ コードバッサリ省略させていただきました!
4
+
5
+ ①送信ボタンを押すとsend()が呼ばれます。
6
+ ②検索値を取得します。
7
+ ③検索値をGAS側のgetValue関数に、検索値を渡します。
8
+ ④GAS側で必要な処理を行い、値を返します。
9
+ ⑤ ④が成功したらinnerHTMLFunc関数を呼び出します。
10
+ ⑥HTMLに値を書き込みます。
11
+
12
+
13
+ こんな流れになります。
14
+
15
+ 今のコードを見させていただくと、
16
+ <?= … ?>でhtml上でGAS側の処理を行われているようなので、管理や修正がしにくい状態になっています。
17
+ そのためdoGetが呼び出された時に、スプレッドシートの内容を取得し、グローバル変数等に保存しておきます。
18
+ そして、htmlが読み込まれる際に、処理を行い表示してあげれば良いかと!
19
+
20
+ すみません、全部のコード修正しようと思ったんですが、諦めてしまいました。
21
+
22
+
23
+ ```html
24
+ <html>
25
+
26
+ <body>
27
+ <form name="searchForm">
28
+   検索文字:<input type="text" width="30%" id="searchWord">
29
+   <input type="button" value="送信" onclick="send()">  //①
30
+   <div id="innerResluts"></div>
31
+ </form>
32
+
33
+
34
+ <script>
35
+ // HTMLに書き込む処理
36
+ function innerHTMLFunc(resluts) {   //⑥
37
+ innerResluts.innerHTML = resluts
38
+ }
39
+
40
+ function send() {
41
+ //検索ワード
42
+ var searchWord = document.getElementById("searchWord") //②
43
+     //GAS側の関数を呼び出す。
44
+ //=>GAS側:getValue関数(検索値)成功したら、HTML側:innerHTMLFuncに結果を渡す。
45
+ google.script.run.withSuccessHandler(innerHTMLFunc)  //③  //⑤
46
+ .getValue(searchWord.value)
47
+ }
48
+
49
+ </script>
50
+ </body>
51
+
52
+ </html>
53
+
54
+ ```
55
+ ```gas
56
+ const id ='スプレッドシートのID';
57
+ const mySheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
58
+ const endrow = mySheet.getLastRow();
59
+ const myData = mySheet.getRange(2, 1 , endrow-1 , 4).getValues();
60
+
61
+
62
+ function getValue(searchWord){  //④
63
+ //スプレッドシートから必要な処理を行う。
64
+ var resluts = "サンプルテキスト 検索値は:"+searchWord;
65
+ return resluts
66
+ }
67
+ function doGet(e) {
68
+ return HtmlService.createTemplateFromFile("index").evaluate();
69
+
70
+ }
71
+ ```
72
+
73
+ ---
74
+
75
+
1
76
  簡易版にして試してみたのですがGASの仕様か不明ですが元のURLに戻ってこれませんでした。
2
77
  循環してしまうので、ダメなのかも。。。
3
78