グーグルサイトに応答型のgoogle app scriptを埋め込みたい[html初心者]

現在、グーグルサイトにgasを埋め込み、グーグルサイトから文字列を送信し、条件によってgoodかbadかを返し、サイトに表示したいと考えています。

現状のソースコードは以下の通りです。

test.gs
1function doGet() {
2  const htmlTemplate = HtmlService.createTemplateFromFile('index');
3  htmlTemplate.errorMsg = "";
4  return htmlTemplate.evaluate();
5}
6
7
8function doPost(e) {
9  let box;
10  let htmlTemplate;
11
12  box=e.parameter.mozi;
13  if (box.length>5){
14    let flag="good"
15  }
16  else{
17    let flag="bad"
18  }
19
20  htmlTemplate = HtmlService.createTemplateFromFile('result');
21  htmlTemplate.mozi = flag;
22
23  return htmlTemplate.evaluate();
24}

index.html
1<html lang="ja">
2  <head>
3    <base target="_top">
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>デモサイト</title>
7  </head>
8  <body>
9    <header>
10      <h1>デモサイト</h1>
11    </header>
12    <form action="https://script.google.com/a/macros/xxxx/exec" method="post">
13      <p><?=errorMsg ?></p>
14      <div>
15        <label for="exam-num">文字を入力してください</label>
16        <input type="text" name="mozi" required>
17      </div>
18      <div>
19        <input type="submit" value="送信">
20      </div>
21    </form>
22  </body>
23</html>

result.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>デモサイト</title>
8  </head>
9  <body>
10    <header>
11      <h1>デモサイト</h1>
12    </header>
13    <table>
14      <tbody>
15        <tr>
16          <td>返ってきた文字</td>
17          <td><?=mozi ?></td>
18        </tr>
19      </tbody>
20    </table>
21  </body>
22</html>

です。
htmlは触ったことがなく大変困っています。
現状では送信をしても応答がなく、返信が返ってきません。
現状、グーグルサイトでこのようなプログラムができるかどうかもわからない状態で教えていただければ幸いです。

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

回答1件

まず、もともとのコードでは、test.gs の doPost 関数の中で変数 flag が if文の中で宣言されているため、
if文の外の htmlTemplate.mozi = flag;
の部分でアクセスできずエラーになります。
下記のようにif文の外で宣言してください。

js
1function doPost(e) {
2  let box;
3  let htmlTemplate;
4  let flag = '';
5  let box = e.parameter.mozi;
6  if (box.length > 5) {
7    flag = 'good';
8  }
9  else {
10    flag = 'bad';
11  }
12
13  htmlTemplate = HtmlService.createTemplateFromFile('result');
14  htmlTemplate.mozi = flag;
15
16  return htmlTemplate.evaluate();
17}

また、上記の修正を行ってもGoogleサイトに埋め込んだ場合そのままのコードでは動作しません。
Google サイトの中にGASで作ったwebサイトを埋め込んだ時、埋め込んでいる部分の外側はプロパティ編集不可の iframe になっていて、「webアプリ内でフォーム投稿後に埋め込み元の親ページを遷移させない」というようなことはできません。
これはセキュリティ上の制限です。

・ボタンをクリックしてテキストボックス内の値を送信。
・その値に応じて、GAS側でデータを加工して元のページに返す
というような単純なwebアプリであれば、下記のようにajaxを利用すればよいでしょう。
test.gs

js
1function doGet() {
2  const htmlTemplate = HtmlService.createTemplateFromFile('index');
3  htmlTemplate.errorMsg = '';
4  return htmlTemplate.evaluate();
5}
6
7function fn(inputText) {
8  if (inputText.length > 5) {
9    return 'good';
10  }
11  return 'bad';
12}

index.html

html
1<html lang="ja">
2
3<head>
4  <base target="_top">
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>デモサイト</title>
8</head>
9
10<body>
11  <p>
12    <?=errorMsg ?>
13  </p>
14  <div class="submit_view">
15    <div>
16      <label for="exam-num">文字を入力してください</label>
17      <input type="text" name="mozi" id="input_text">
18    </div>
19
20    <div>
21      <input type="button" onclick="handleClick()" value="送信"/>
22    </div>
23  </div>
24  <div class="response_view">
25    <table>
26      <tbody>
27        <tr>
28          <td>返ってきた文字</td>
29          <td>
30            <div id="output_text"><div>
31          </td>
32        </tr>
33      </tbody>
34    </table>
35  </div>
36
37  <script>
38    function handleClick() {
39      const inputText = document.getElementById('input_text');
40      google.script.run.withSuccessHandler(displayOutput).fn(inputText.value);
41    }
42
43    function displayOutput(outputText) {
44      document.getElementById('output_text').innerHTML = outputText;
45    }
46  </script>
47</body>
48
49</html>

ボタンクリック前とクリック後の表示を切り替えたい場合はcssを利用してクラスの表示非表示を制御すればできます。

投稿2022/07/15 11:37

編集2022/07/17 06:18

退会済みユーザー

総合スコア0

AGLAAGLA

2022/07/15 12:50

ありがとうございます。修正しても未だgood,badが返ってこなく、困っているのですが、このほか何か間違っているのでしょうか？

退会済みユーザー

2022/07/15 14:09 編集

自分の環境ではうまく動いています。質問者さんがうまく動かないと考えられる原因はいくつもあります。・「まだgood,badが返ってこなく」というのは、どのような状態でしょうか。全くの空白のページなのでしょうか。それとも、good、badが返ってこないだけで、何もエラーが表示されていないのでしょうか、それとも何か別の文字（エラーのようなもの）が表示されていないでしょうか。もしエラーのような文字列が表示されていれば、それを教えてください。・doPost関数について、上の回答に書いたコード全体をコピペして修正されましたか？御自分の思い込みで一部しか修正していない、または入力間違いをしている、等ということはないでしょうか？・コードを修正後、デプロイをきちんと更新されましたでしょうか？かつ、デプロイurl（コード中のhttps://script.google.com/a/macros/xxxx/exec の部分）は正しく更新後のURLに設定されていますか？・デプロイ時、「アクセスできるユーザー」を全員に設定していますか？

AGLAAGLA

2022/07/15 15:36

ご丁寧にありがとうございます。現在、グーグルサイトの右上にある挿入というボタンから埋め込むというボタンを押し、デプロイ後のURLを貼り付け、index.htmlのページを表示させています。そこにいくら送信ボタンを押そうがリロードされていません。しかし、その埋め込んだものを一度クリックすると新しいタブで開くというボタンがあり、新しいタブに遷移後、文字を入力し送信ボタンを押すと、goodまたはbadが表示されるようになりました。誠にありがとうございます。しかし、やはり遷移せずに、機能させたいというのが本音です。 qnoir様がグーグルサイトに詳しくなければ、以下の質問を無視していただいて構いません。 qnoir様はどのようにこのコードを動かしていますか？または、このような現象の解決方法はご存知でしょうか？

退会済みユーザー

2022/07/16 14:20

追記しました。

AGLAAGLA

2022/07/19 05:42

遅くなりました。想定していたもののヒントを下さって大変助かりました。ありがとうございます。しかし、前のものではデプロイしたもののURLをhtmlコードの中に書く必要があったのにも関わらず、今回のqnoir様が書いてくださったコードにはURLがなくとも動くのはなぜでしょうか？

AGLAAGLA

2022/07/19 06:04

やはり、別のresult.htmlというものに遷移する、といったことがセキュリティ上ダメだったのですね、、

退会済みユーザー

2022/07/23 10:30 編集

>前のものではデプロイしたもののURLをhtmlコードの中に書く必要があったのにも関わらず、今回のqnoir様が書いてくださったコードにはURLがなくとも動くのはなぜでしょうか →google.script.runで、元のGASの関数を呼び出しているからです。この場合エディタ上でHTMLとセットになっているスクリプトが自動で呼び出されるので、URLは必要ありません。

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