質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

4223閲覧

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

k2zu1112

総合スコア18

Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/05/19 13:02

編集2021/05/20 13:19

現在、社内で使うための**「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'>内のURL1箇所です。

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>

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

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

追記

スクリプトエディタ上でエラーが発生するのは、そもそもdoGetdoPostが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部分のみ編集したところ上手くいきました。 加えて、温かいお言葉をもありがとうございました。 この度のベストアンサーとさせていただきます。
guest

0

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

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

<!DOCTYPE html> <html>  略    ここ(↓)のURLは2つとも、デプロイしたウェプアプリの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() 以下略

 

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

diff

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

 

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

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についてはお気になさらず。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問