GoogleスプレッドシートとGASを使って用語集を作りたい

現在、社内で使うための**「Googleスプレッドシートで作る用語集アプリ」の作成**に取り組んでおります。
そして、その制作にピッタリなサイトも見つけました。（こちらです）
しかし、コピペをして再現しようとしたのですが上手くいかず、色々と試してはみたものの、改善には至りませんでした。
そこで皆様の知識をお借りさせていただけないでしょうか。
ご協力の程どうぞよろしくお願い致します。
また、質問の方法が違うなどのご指摘があれば修正致しますのでご容赦ください。

【達成目標】
参考サイトの動きを再現

【出てくるファイル・ページ】
・スプレッドシート（ファイル名:経営用語集、シート名:用語集）
・GAS（プロジェクト名:用語集、コード:search.gs)
・HTML（ファイル名:index(.html))

【問題点】
・参考サイトからファイル名やコードを真似て作成したスクリプトファイルにエラーが出てしまう。
・HTMLをウェブ上で表示した際に、UIが上手く表示されていない。
→どこが問題なのかを理解できていません....。

【これまで試したこと】
・openByIdをopenByUrlへ変更→エラー内容に変化無し
・エラー箇所発見のためにconsole.logの使用→ファイル上部には問題なし(?)

現状のコードとログは次の通りです。

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

また、参考サイト内に登場する「index.html」と「スプレッドシート」、及びHTMLをウェブ上で開いた状態も以下に追加いたします。
ちなみに、HTML内で修正を行ったのは

<div id='header-fixed'>内のURL2箇所と <div id='content'>内のURL１箇所です。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7  <style>
8＊文字数の関係で内容省略
9　</style>
10  <div id='header-fixed'>
11    <form name="serchForm" action="https://docs.google.com/spreadsheets/d/16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y/edit#gid=0/exec?name=search">
12    <a id='menu' href="https://docs.google.com/spreadsheets/d/16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y/edit#gid=0/exec">全件表示</a>
13    検索文字：<input type="text" width="30%" name="searchWord" required>
14    <input type="submit">
15    <font size="1px">　　　　　　現在の時刻：<span id="clock_time"></span></font>
16    </form>
17<script>
18function clock()
19{
20    // 現在日時を表すインスタンスを取得
21   ＊文字数の関係で内容省略
22}
23setInterval(clock, 1000);
24</script>
25  </div>
26  <div id='content'>
27    <ul>
28      <?
29      //  シートから用語集を表示する
30　　     var id ='16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y';
31    　　 var mySheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
32        var endrow = mySheet.getLastRow();
33        var myData = mySheet.getRange(2, 1 , endrow-1 , 4).getValues();
34        myMail = Session.getActiveUser().getEmail();
35        search = getSearch();
36        output.append('検索文字='+ escape_html(search));
37        output.append('<table class="search" border="1">');
38        output.append('<tr bgcolor="#aaccff"><th>カテゴリ</th><th>用語</th><th>内容</th></tr>');
39        y=0; //検索結果のカウンタ
40        for(var i=0;i<myData.length;i++){
41          category = myData[i][0];
42          word = myData[i][1];
43　　　　　　content = myData[i][2];
44          url = myData[i][3];
45          if(search !== undefined){
46            if (word.indexOf(search) !== -1){
47              ＊文字数の関係で内容省略
48            }
49          }else{
50           ＊文字数の関係で内容省略
51          }
52        }
53        output.append('</table>');
54        if (y == 0){
55          output.append('検索できませんでした。キーワードを変えてもう一度検索してください。');
56        }
57      ?>
58      <?
59        function escape_html (string) {
60          if(typeof string !== 'string') {
61            return string;
62          }
63          return string.replace(/[&'`"<>]/g, function(match) {
64            return {
65            '&': '&amp;',
66            "'": '&#x27;',
67            '`': '&#x60;',
68            '"': '&quot;',
69            '<': '&lt;',
70            '>': '&gt;',
71            }[match]
72          });
73        }
74      ?>
75    </ul>
76    </div>
77</body>
78</html>

スプレッドシート

HTMLをウェブで開いた画面

お力添え頂ければ幸いです。
どうぞよろしくお願い致します。

★★★5/20更新★★★
お二人の方にアドバイスを頂き、完成へ近付いているという実感があります。
ありがとうございます。
しかし、依然としてエラーが出てしまっており、そちらの解決方法についてもご教授いただければ幸いです。

【行った修正】
・「プロジェクトの設定」から「Chrome V8 ランタイムを有効にする」チェックを外す。
・参考サイトのhtmlコードには余分な全角空白がいくつか混じっているので、取り除く。（不十分な部分があるかもしれません）
・<form ～> の action と #menuのhrefのURLへはデプロイしたウェブアプリのURLを入力
・form actionのurl中のnameパラメータをsearchからsearchWordへ変更
・検索語句が数字の場合にエラーが発生しないようにするため、検索語句を文字列に変換
前:word = myData[i][1]; → 後:word = String(myData[i][1]);
・一度デプロイして、デプロイIDをHTML側にコピーし、デプロイの管理から一番上のアクティブなデプロイを選び編集ボタンを押し、バージョンのセレクトボックスから新バージョンを選択し、「適切なコメント」を入力して再度デプロイ
→「適切なコメント」を正しく理解出来ていないかもしれませんが、ご記入いただいた手順の通り修正を行いました。

【現状発生しているエラー】
1,スクリプトファイル上で「parameter」が読み取れていない。

2,ウェブアプリのURLへ飛ぶと画面が字だらけになっている。

【現状のコード】

JavaScript
1search = "";
2var id ='16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y';
3var sheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
4
5console.log(id); //エラーチェック
6console.log(sheet.getName()) //エラーチェック
7
8function doPost(e){
9    doGet(e);
10    return HtmlService.createTemplateFromFile("index").evaluate(); 
11}
12function doGet(e) {
13  search = e.parameter.searchWord;
14  if (e.parameter.name == undefined) {
15    //初期表示はビューのみ
16    //return HtmlService.createTemplateFromFile("index").evaluate(); 
17    return HtmlService.createHtmlOutputFromFile("index")
18.setSandboxMode(HtmlService.SandboxMode.IFRAME);
19  }
20  if (e.parameter.searchWord !== undefined) {
21    //検索時も同じ画面に返します
22    return HtmlService.createTemplateFromFile("index").evaluate(); 
23  }
24}
25function getSearch(){
26    return search;
27}
28

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7  <style>
8  ＊文字数の関係で内容省略
9　</style>
10  <div id='header-fixed'>
11    <form name="serchForm" action="https://script.google.com/macros/s/AKfycbzQzvKu_mSPmUJoaLFem2fQ9CxItXJUF0PwFvpJD2NT6Sni2D8V6DHCZZi4uwQJycmh/exec?name=searchWord">
12    <a id='menu' href="https://script.google.com/macros/s/AKfycbzQzvKu_mSPmUJoaLFem2fQ9CxItXJUF0PwFvpJD2NT6Sni2D8V6DHCZZi4uwQJycmh/exec">全件表示</a>
13    検索文字：<input type="text" width="30%" name="searchWord" required>
14    <input type="submit">
15    <font size="1px">　　　　　　現在の時刻：<span id="clock_time"></span></font>
16    </form>
17<script>
18function clock()
19{
20   ＊文字数の関係で内容省略
21}
22setInterval(clock, 1000);
23</script>
24  </div>
25  <div id='content'>
26    <ul>
27      <?
28      //  シートから用語集を表示する
29　　    var id ='16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y';
30    　　var mySheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
31        var endrow = mySheet.getLastRow();
32        var myData = mySheet.getRange(2, 1 , endrow-1 , 4).getValues();
33        myMail = Session.getActiveUser().getEmail();
34        search = getSearch();
35        output.append('検索文字='+ escape_html(search));
36        output.append('<table class="search" border="1">');
37        output.append('<tr bgcolor="#aaccff"><th>カテゴリ</th><th>用語</th><th>内容</th></tr>');
38        y=0; //検索結果のカウンタ
39        for(var i=0;i<myData.length;i++){
40          category = myData[i][0];
41          word = String(myData[i][1])
42          content = myData[i][2];
43          url = myData[i][3];
44          if(search !== undefined){
45            if (word.indexOf(search) !== -1){
46              replace = word.replace(search, '<font color="#ff0000" size="2px"><b>'+ search +'</b></font>');
47              output.append('<tr>');
48              output.append('<td width="10%" valign="top"><font color="#000000" size="2px">'+ category +'</font></td>');
49              output.append('<td width="20%" align="left" valign="top"><font size="2px">'+ replace +'</font></td>');
50              output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+ content +'</font></td>');
51              output.append('</tr>');
52              y ++;
53            }
54          }else{
55            output.append('<tr>');
56            output.append('<td width="10%" valign="top"><font color="#000000" size="2px">'+ category +'</font></td>');
57            output.append('<td width="20%" align="left" valign="top"><font color="#000000" size="2px">'+ word +'</font></td>');
58            output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+　content +'</font></td>');
59            output.append('</tr>');
60          }
61        }
62        output.append('</table>');
63        if (y == 0){
64          output.append('検索できませんでした。キーワードを変えてもう一度検索してください。');
65        }
66      ?>
67      <?
68        function escape_html (string) {
69          if(typeof string !== 'string') {
70            return string;
71          }
72          return string.replace(/[&'`"<>]/g, function(match) {
73            return {
74            '&':'&amp;',
75            "'":'&#x27;',
76            '`':'&#x60;',
77            '"':'&quot;',
78            '<':'&lt;',
79            '>':'&gt;',
80            }[match]
81          });
82        }
83      ?>
84    </ul>
85    </div>
86</body>
87</html>

」画面中が字で埋め尽くされる」エラーの内容から考えると初歩的なミスであるかもしれません。
申し訳ありませんが、再度お力添えの程よろしくお願い致します。

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

回答2件

ベストアンサー

参考サイトは情報が古く、そのままでは現在のGASでは動作しません。
以下の点を修正して再度デプロイして実行してみてください。

「プロジェクトの設定」から Chrome V8 ランタイムを有効にするチェックを外す。現在のデフォルトスクリプトエンジンはV8で、参考サイトのコードはそれ以前のランタイムでしか動作しません。
参考サイトのhtmlコードには余分な全角空白がいくつか混じっているので、取り除く。謎の文法エラーの原因になります。
フォームURLに設定するべきデプロイIDは新しくデプロイする度に変わります。デプロイIDは一度デプロイしないと分かりません。一度デプロイして、デプロイIDをデプロイの管理から調べ、デプロイIDをHTML側にコピーし、デプロイの管理から一番上のアクティブなデプロイを選び編集ボタンを押し、バージョンのセレクトボックスから新バージョンを選択し、適切なコメントを入力して再度デプロイ、という手順を踏まなければなりません。

以上の手順で参考サイトのアプリは一応動作します。ただ今後のスタンダードな実装ではないのであまり参考にしない方が良いかもしれません。

追記

スクリプトエディタ上でエラーが発生するのは、そもそもdoGetやdoPostがWebページ側から実行されるのが前提の引数を持っているからです。このエディタ上での単体実行では引数のパラメータが空になるので正常に実行できません。
デプロイのテストから実行してください。

HTMLがそのまま出力される件は、あなたがテストでコメントしたりいじっている個所がそのままだからです。全部元に戻しましょう。

とりあえず今まであなたがカスタマイズした点はポイして、参考サイトの丸コピーで動作確認ができるところを目指してみましょう。自分なりの修正はそれからでも遅くはないです。

投稿2021/05/19 15:44

編集2021/05/20 13:44

hope_mucci

総合スコア4447

k2zu1112

2021/05/20 13:23

hope_mucchi様、こんばんは。昨夜は貴重なアドバイスを頂きましてありがとうございました。おかげさまで昨夜の状況からは脱したのですが、また別のエラーが発生してしまいました。今回のものは昨夜のものよりは単純であるかと思っているのですが、自力で解決に至ることが出来ませんでした。そこで、何とかもう一度お力添え頂けないでしょうか。連日でお手数をおかけしますが、どうぞよろしくお願い致します。

k2zu1112

2021/05/20 13:28

昨夜からの修正点と現状につきましては、質問文中盤にございます「★★★5/20更新★★★」に記載しております。お手数をおかけ致します。

k2zu1112

2021/05/20 14:16

引数の件、理解いたしました。そして、HTMLの件についても一度リセットした後に、URL部分のみ編集したところ上手くいきました。加えて、温かいお言葉をもありがとうございました。この度のベストアンサーとさせていただきます。

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

以下気づいた点を記します。

（１）<form ～> の action と #menuのhrefのURLには、
スプレッドシートのURLではなく、デプロイしたウェブアプリのURL（https://script.google.com/macros/s/(スクリプトのID)/exec）を指定する必要があると思います。

<!DOCTYPE html>
<html>

 　略
　　　ここ（↓）のURLは２つとも、デプロイしたウェプアプリのURLを指定する。
　　　　　　　　　　　　　　　　　　　　　　　↓
    <form name="serchForm" action="https://script.google.com/macros/s/Axxxxxx/exec?name=searchWord">
　　　　　　　　　　　　　　　　　　　　　　　↓
    <a id='menu' href="https://script.google.com/macros/s/Axxxxxx/exec">全件表示</a>
  略
<script>
function clock()
以下略

　

（２）form actionのurl中のnameパラメータは、searchではなくsearchWordとする必要があります。

diff
1誤り
2-    <form name=～～略～～xxx/exec?name=search">
3　↓
4正しい
5+    <form name=～～略～～xxx/exec?name=searchWord">

　

（３）検索語句が数字の場合にエラーが発生しないようにするため、検索語句を文字列に変換する必要があります。

diff
1（略）
2        y=0; //検索結果のカウンタ
3        for(var i=0;i<myData.length;i++){
4          category = myData[i][0];
5-          word = myData[i][1];
6+          word = String(myData[i][1]);
7　　　　　　content = myData[i][2];
8(以下略)

投稿2021/05/19 14:38

編集2021/05/19 14:41

退会済みユーザー

総合スコア0

k2zu1112

2021/05/20 13:27

qnoir様、こんばんは。昨日はご回答いただきましてありがとうございます。誤りのコードと正しいコードの比較をご提示いただけて、非常に理解が深まりました。おかげさまで昨夜の状況からは脱却出来たのですが、現在は別のエラーに苦しめられております。そちらの詳細につきましては、本文中盤にございます「★★★5/20更新★★★」以降に記載しております。そちらの解決のために、連日でお手数をおかけすることになるのですが、もう一度お力添えいただけないでしょうか？どうぞよろしくお願い致します。

k2zu1112

2021/05/20 14:22

qnoir様、連投で失礼いたします。先ほど、他の方にご回答いただき、今回の問題につきましては解決いたしました。この度はベストアンサーに選ぶことが出来なかったのですが、本当に感謝しております。ありがとうございました。

退会済みユーザー

2021/05/20 14:23

解決したのであればよかったです。BAについてはお気になさらず。

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

あなたの回答