スプレッドシートから得た文字列をGASでHTMLにわたす

この質問の続きです。
https://teratail.com/questions/340636

スプレッドシートに蓄えたデータからランダムに選んで英単語クイズを作成しました。
目標は、Googleフォームを送信したあと、ユーザが解答を見られるように、解答を表示したHTMLファイルにリダイレクトすることです。
いまは、フォームを送信したあと、回答完了画面のママです。
GAS側で以下のようなHTML用のStringデータを格納した変数var textを引数にし、

Q1:unwarranted1.(adjective) 不当な保証されていない公認されていない2.(noun) 火山3.(noun) トラフ (波などの)谷間 (景気などの)底4.(noun) 茎柄 (verb) 忍び寄るストーカー行為をする正解は「(adjective) 不当な保証されていない公認されていない」です。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7    <textarea><?=msg?></textarea>
8  </body>
9</html>

HTML側のmsgに格納するような関数function make_html(text)

GAS
1HTMLにtextをわたす関数make_html(text)は？

を作りたいです。
HTMLのファイル名をtest.htmlとすると、
GAS側で

GAS
1function doGet(){
2  return HtmlService.createHtmlOutput('test')
3}

で、うまくHTMLを表示できるようになるはずです。

Tatsunosuke

2021/05/28 09:35

>Googleフォームを送信したあと、ユーザが解答を見られるように、解答を表示したHTMLファイルにリダイレクトすることです。まず、Googleフォームからどのような値が送られてくるのでしょうか？フォームからリダイレクトは難しいと思うので、URLをメールで通知することは可能だと思います。 URLを踏んでもらう場合は、URLにパラメータを仕込む必要があります。どうしてもリダイレクトが良ければ、カスタマイズしたり、埋め込んだりと色々あるようですが、その手間を考えるとクイズ自体をGASで作った方が簡単な気がします。 https://codenote.net/g-suite/4512.html

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

回答1件

ベストアンサー

追記

失礼しました！
ご希望の内容を叶えるのは、ある程度GASやJSを使えないと難しいかもしれません。

Googleフォームを送信したあと、ユーザが解答を見られるように、解答を表示したHTMLファイルにリダイレクトすることです。

まず、HTMLを表示させるには、doGet()で受ける必要があります。

gas
1
2//'https://script.google.com/a/macros/***/exec
3//↑これにアクセスすると↓この関数が必ず呼ばれます。
4function doGet(e){
5　　//htmlの表示
6}

ただ、

Googleフォームを送信したあと、ユーザが解答を見られるように、解答を表示したHTMLファイルにリダイレクトすることです。

を実装しようとすると、GOOGLEフォームの今の仕様では、リダイレクトができないため
フォームの「ガワ」を自分で実装する必要があります。
そうなるとHTMlとCSSとGASとJS、そしてgoogle formの知識がそれぞれ必要となります。

そのため比較的に実装できる方法としては、フォームが送信されたタイミングで、ユーザに回答が表示されるURLを入れたメールを送信するという方法があります。

回答が表示されるURLを作るためには、ユーザがどのような回答をしたかをURLに含ませます。

gas
1//'https://script.google.com/a/macros/***/exec？answer=foo
2//↑これにアクセスすると↓e.parameterの中にanswer=fooが入っています。
3
4function doGet(e){
5　　var answer =e.parameter.answer
6   console.log(answer) //=> foo
7}
8

これを利用して、fooに対する答えをHTMlで表示する形になります。
そうなると結局こちらでもHTMlとCSSとGASとJSの知識がそれぞれ必要となります。
ガワだけ作るよりは簡単です

であれば、わざわざフォームを挟まなくても、最初からクイズ自体をGASのHTMLで作ってしまった方が、
やりたい内容に制約を受けずに作ることが可能です。

こちらの方の質問が、同じような感じです。
https://teratail.com/questions/339997

画面にキーワードを入れて、実行すると該当するアイテムが返ってくるという仕組みです。
簡易的に試してみたいということであれば、以下をGASに登録いただければ試せると思います。

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>

gas
1function getValue(searchWord){　　//④
2  //スプレッドシートから必要な処理を行う。
3  var resluts = "サンプルテキスト　検索値は:"+searchWord;
4  return resluts
5}
6function doGet(e) {
7    return HtmlService.createTemplateFromFile("index").evaluate(); 
8
9}

この内容が難しいなと感じるようでしたら、まずは、GASで自由にhtmlを表示させられるようになることを
目指されるのがいいかと思います！

こうなります。
e.parameterの部分は適宜変更ください。

gas
1
2var msg = ""
3
4function doGet(e){
5　　
6　make_html(e.parameter.text)　
7  return HtmlService.createHtmlOutput('test')
8}
9
10function make_html(text){
11  msg = text
12}
13