HTMLのページ遷移を正常にしたい！2

カテゴリ	用語	内容
' + category + '	' + replace + '	' + word + '	' + content + '

皆様、ご閲覧ありがとうございます。

以前も同様のタイトルにて質問させていただいた内容と同じで恐縮なのですが、同じエラーが発生してしまいました。
しかし、今回は前回の教えの通り修正したものの、正常に動作がせず困っております。

今回もHTMLの方でエラーが発生しております。
エラー内容としては、ページ上部にある「全件表示」、又は検索ウィンドウ横にある「送信」をクリックすると全く別のURLに飛んでしまうということです。
この問題を解決して、それぞれのherfに設定しているURLに飛ぶことが出来れば理想通りです。

ただ、今回の件に関しましては、スプレッドシートに社内情報が詰まっており、そちらを公開することが出来ません。
iDのタイプミスが無いことは何度も確認しておりますので、そちらをご理解頂けると幸いです。

現状については、HTML及びGASのコードとスプレッドシートのURL及び画像を以下に記載しております。
大変面倒なお願いであることは重々承知しております。
お手数をおかけしますが、どうぞよろしくお願い致します。

【悩み】
ページ上の該当箇所をクリックした際に、設定しているURLへページが飛ばない
1.「全件表示」及び「検索ウィンドウ」横の「送信」をクリックした場合

【目標・ゴール】
ページ上の該当箇所をクリックした際に、設定しているURLへページが飛ぶこと

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7  <style>
8  #header-fixed{
9    border: 5px solid #fff;    /* 表示領域を白枠で囲う */
10    position: fixed;            /* ヘッダーの固定 */
11    padding:10px 0 10px;       /* 上10px、下20pxをあける */
12    top:  0px;                   /* 位置(上0px) */
13    left: 10px;                  /* 位置(右0px) */
14    width: 100%;                /* 横幅100%　*/
15    height:50px;                /* 縦幅50px */
16    background-color:#FFF      /* バックの色 */
17  }
18  #content{
19    top:  70px;                   /* 位置(上0px) */
20    left: 10px;                  /* 位置(右0px) */
21    padding:60px 0 0px;
22    width: 100%;                /* 横幅100%　*/
23    background-color: "#000000" /* バックの色 */
24  }
25  #menu{
26    font-size : 15px;
27    border : 1px;
28    padding : 10px 20px 0px 0px;
29  }
30  table.search {
31    border: solid 1px #000000;
32    border-collapse: collapse;
33  }
34</style>
35  <div id='header-fixed'>
36   <form name="searchForm" method="post" action="サイトURL/exec?name=searchWord"> 
37    <a id='menu' href="サイトURL/exec">全件表示</a>
38    検索文字：<input type="text" width="30%" name="searchWord" required>
39    <input type="submit">
40    <font size="1px">　　　　　　現在の時刻：<span id="clock_time"></span></font>
41    </form>
42<script>
43function clock()
44{
45    // 現在日時を表すインスタンスを取得
46    var now = new Date();
47    var dateTime =  now.getTime();
48    var year = now.getFullYear();
49    var month = now.getMonth()+1;
50    var day = now.getDate(); 
51    var h = now.getHours();
52    var mi = now.getMinutes();
53    var s = now.getSeconds();
54    document.getElementById("clock_time").innerHTML = year + "年" + month + "月" + day + "日 " + h + "時" + mi + "分" + s + "秒";
55}
56setInterval(clock, 1000);
57</script>
58  </div>
59  <div id='content'>
60    <ul>
61      <?
62      //  シートから用語集を表示する
63　　     var id ='スプレッドシートのID';
64    　　 var mySheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
65        var endrow = mySheet.getLastRow();
66        var myData = mySheet.getRange(2, 1 , endrow-1 , 4).getValues();
67        myMail = Session.getActiveUser().getEmail();
68        search = getSearch();
69        output.append('検索文字='+ escape_html(search));
70        output.append('<table class="search" border="1">');
71        output.append('<tr bgcolor="#aaccff"><th>カテゴリ</th><th>用語</th><th>内容</th></tr>');
72        y=0; //検索結果のカウンタ
73        for(var i=0;i<myData.length;i++){
74          category = myData[i][0];
75          word = myData[i][1];
76　　　　　　content = myData[i][2];
77          url = myData[i][3];
78          if(search !== undefined){
79            if (word.indexOf(search) !== -1){
80              replace = word.replace(search, '<font color="#ff0000" size="2px"><b>' + search + '</b></font>');
81              output.append('<tr>');
82              output.append('<td width="10%" valign="top"><font color="#000000" size="2px">'+ category +'</font></td>');
83              output.append('<td width="20%" align="left" valign="top"><font size="2px">'+ replace +'</font></td>');
84              output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+　content +'</font></td>');
85              output.append('</tr>');
86              y ++;
87            }
88          }else{
89            output.append('<tr>');
90            output.append('<td width="10%" valign="top"><font color="#000000" size="2px">'+ category +'</font></td>');
91            output.append('<td width="20%" align="left" valign="top"><font color="#000000" size="2px">'+ word +'</font></td>');
92            output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+　content +'</font></td>');
93            output.append('</tr>');
94          }
95        }
96        output.append('</table>');
97        if (y == 0){
98          output.append('検索できませんでした。キーワードを変えてもう一度検索してください。');
99        }
100      ?>
101      <?
102        function escape_html (string) {
103          if(typeof string !== 'string') {
104            return string;
105          }
106          return string.replace(/[&'`"<>]/g, function(match) {
107            return {
108            '&': '&amp;',
109            "'": '&#x27;',
110            '`': '&#x60;',
111            '"': '&quot;',
112            '<': '&lt;',
113            '>': '&gt;',
114            }[match]
115          });
116        }
117      ?>
118    </ul>
119    </div>
120</body>
121</html>

JavaScript
1search = "";
2var id ='スプレッドシートのID';
3var sheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
4
5function doPost(e){
6    doGet(e);
7    return HtmlService.createTemplateFromFile("index").evaluate(); 
8}
9function doGet(e) {
10  search = e.parameter.searchWord;
11  if (e.parameter.name == undefined) {
12    //初期表示はビューのみ
13    return HtmlService.createTemplateFromFile("index").evaluate(); 
14  }
15  if (e.parameter.searchWord !== undefined) {
16    //検索時も同じ画面に返します
17    return HtmlService.createTemplateFromFile("index").evaluate(); 
18  }
19}
20function getSearch(){
21    return search;
22}

行動規範の内容に同意します

回答1件

ベストアンサー

追記

ノーテストで申し訳ないですが、これでいけるはずです！

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

追記

コードバッサリ省略させていただきました！

①送信ボタンを押すとsend（）が呼ばれます。
②検索値を取得します。
③検索値をGAS側のgetValue関数に、検索値を渡します。
④GAS側で必要な処理を行い、値を返します。
⑤　④が成功したらinnerHTMLFunc関数を呼び出します。
⑥HTMLに値を書き込みます。

こんな流れになります。

今のコードを見させていただくと、

<?= … ?>でhtml上でGAS側の処理を行われているようなので、管理や修正がしにくい状態になっています。

そのためdoGetが呼び出された時に、スプレッドシートの内容を取得し、グローバル変数等に保存しておきます。
そして、htmlが読み込まれる際に、処理を行い表示してあげれば良いかと！

すみません、全部のコード修正しようと思ったんですが、諦めてしまいました。

html
1<html>
2
3<body>
4  <form name="searchForm">
5    　　検索文字：<input type="text" width="30%" id="searchWord">
6    　　<input type="button" value="送信" onclick="send()">　　//①
7    　　<div id="innerResluts"></div>
8  </form>
9
10
11  <script>
12    // HTMLに書き込む処理
13    function innerHTMLFunc(resluts) {　　　//⑥
14      innerResluts.innerHTML = resluts
15    }
16
17    function send() {
18      //検索ワード
19      var searchWord = document.getElementById("searchWord")　//②
20　　　 //GAS側の関数を呼び出す。
21      //=>GAS側:getValue関数（検索値）成功したら、HTML側:innerHTMLFuncに結果を渡す。
22      google.script.run.withSuccessHandler(innerHTMLFunc)　　//③　　//⑤
23        .getValue(searchWord.value)
24    }
25
26  </script>
27</body>
28
29</html>
30

gas
1const id ='スプレッドシートのID';
2const mySheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
3const endrow = mySheet.getLastRow();
4const myData = mySheet.getRange(2, 1 , endrow-1 , 4).getValues();
5
6
7function getValue(searchWord){　　//④
8  //スプレッドシートから必要な処理を行う。
9  var resluts = "サンプルテキスト　検索値は:"+searchWord;
10  return resluts
11}
12function doGet(e) {
13    return HtmlService.createTemplateFromFile("index").evaluate(); 
14
15}

簡易版にして試してみたのですがGASの仕様か不明ですが元のURLに戻ってこれませんでした。
循環してしまうので、ダメなのかも。。。

doPost doGetで循環させなくても、　<input onclick="submit()"> で処理を実行すれば良いかと思いますがどうでしょうか？

html
1
2<form name="searchForm" method="post" action="サイトURL/exec?name=searchWord"> 
3    <a id='menu' href="サイトURL/exec">全件表示</a>
4    検索文字：<input type="text" width="30%" id="searchWord" required>
5    <input type="button" onclick="submit()">
6    <font size="1px">　　　　　　現在の時刻：<span id="clock_time"></span></font>
7</form>
8
9<script>
10
11function submit(){ 
12  //検索ワード
13　//これを検索用の関数に渡して結果を返せば問題ないかと。
14  var searchWord =document.getElementById("searchWord")
15
16}
17
18
19</script>
20
21

htmlの書き換え方法がわからないということであれば、
innnerHTML使えば書き換え可能です！

投稿2021/05/24 13:24

編集2021/05/28 00:06

Tatsunosuke

総合スコア599

k2zu1112

2021/05/25 12:53

Tatsunosuke様、連日の丁寧なご回答ありがとうございます。そして、innerHTMLについての記事も併せて拝見いたしました。その上で、ご提示いただきましたHTMLコードについて1つ質問なのですが、 submit()では、「(var) searchWord」へ代入したデータを【検索用の関数に渡して結果を返す】とありますが、それはJavaScript内にあるいずれかのメソッドのことでしょうか？渡し方もですが、そもそもどれに渡せばよろしいのかすら理解出来ていない状態です...。素人質問で大変申し訳ありませんが、お答え頂けますと大変光栄です。

k2zu1112

2021/05/26 23:08

Tatsunosuke様、再度アドバイス頂きましてありがとうございます。 1つの質問投稿に対してこれほどやり取りを長引かせてしまっていることが大変恐縮ですが、もう1つだけお聞かせいただきたいことがございます。この度の「追記」にてご説明いただきました ①送信ボタンを押すとsend（）が呼ばれます。～⑥HTMLに値を書き込みます。の流れは理解しました。ありがとうございます。そして、「searchForm」に入力し【送信】を押すと、文字がページ上で【サンプルテキスト　検索値は:〇〇】と出力されており、前述の動きは正常であることも把握しました。そこでですが、この手に入れた「検索値」を用いて部分一致の用語のみをページ上に表示するために、以前は「search.gs」にあった「getSearch()」を使って「search」を「index.html」側に返してHTML側で作業を行っていたのですが、今回の修正版では「④GAS側で必要な処理を行い、値を返します。」の段階に別途組み込む必要があるのでしょうか？それとも、今回ご提示いただいたコード以外の部分はそのままで、以前と同じく「for」や「if」の部分で実行するのでしょうか？結局、ほぼ全てのコードを修正いただいてしまっておりますが、どうかよろしくお願い致します。

k2zu1112

2021/05/27 14:50

Tatsunosuke様、本当にいつもありがとうございます。純粋に感謝の気持ちしかありません。今回はコードを全て作っていただき、この上なく嬉しく思っております。現在は「search.gs」の14行目に構文エラーが出てしまっているみたいなので、頑張って修正してみます！それによって動作に問題がなければすぐにベストアンサーと高評価をさせていただきます。何度もお伝えしますが、本当にありがとうございます。