スプレッドシートの値をhtmlに埋め込みたい

こんにちは.

gasで, スプレッドシートの値をブラウザに表示させて, buttonを押す毎に異なる行のスプレッドシートの値を表示するようなwebアプリを目指しているのですが, 初歩的なところでエラーが出て困っています.

以下スクリプトの状態で公開→ウェブアプリケーションとして導入を押すと, 以下エラーが出ます. htmlファイルの7行目のLogger.logではきちんとcount変数の値が参照できているのですが, 9行目のdataでdataを参照できていないようです.

参考にしたサイト : [Googleスプレッドシートの値をHTMLテンプレートに出力して保存する方法](https://www.terakoya.work/google-spread-sheet-html-template-output-save

どうしたらdataがセルの値にアクセスできるようにできるのでしょうか?
宜しくお願い致します.

gs
1var count = 1;
2var myData = SpreadsheetApp.getActiveSheet(); // アクティブなスプレッドシートファイルの取得
3var template = HtmlService.createTemplateFromFile("hello"); // テンプレートオブジェクトの取得
4
5function exportHTML(count) {
6  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("シート1"); // "シート1"を取得
7  template.data = sheet.getRange(count+1, 1, 1, 6).getValues(); // セルの値を取得し, テンプレートに付与
8  Logger.log(template.data);
9}
10
11function doGet() { 
12  return template.evaluate();
13}

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <base target="_top">
5    </head>
6    <body>
7        <?= Logger.log("問題" + count); ?>
8        <p><?= "問題" + count ?></p>
9        <p><?= data[1] ?></p> // 問題文を取得
10        <input type="button" id="Button1" value="1" onclick="answerButtonClick(this.value)">
11	    <input type="button" id="Button2" value="2" onclick="answerButtonClick(this.value)">
12	    <input type="button" id="Button3" value="3" onclick="answerButtonClick(this.value)">
13        <input type="button" id="Button4" value="4" onclick="answerButtonClick(this.value)">
14    </body>
15</html>

error
1ReferenceError: 「data」が定義されていません。（行 46、ファイル「code」）

draq

2019/11/28 08:50

参考サイトのURLがおかしいようです。修正をお願いします。

slimat

2019/11/28 09:14

ご指摘ありがとうございます. 修正致します.

macaron_xxx

2019/11/29 06:00

ちゃんとexportHTMLは実行してるんでしょうか？見た感じはできてないですけど。

slimat

2019/12/04 04:58

返信遅れて申し訳ございません. テンプレートのプロパティに渡したい値を設定する方法をやめ, 目的のデータをクライアント側に返す関数を作成することで解決できました. ありがとうございました.

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

回答1件

自己解決

ソースコードを以下のように書き換えたところクライアント側からサーバにあるデータを受け取ることができるようになりました.

// code.gs

var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("シート1"); // "シート1"を取得

function doGet() {
  Logger.log('doGet関数呼び出し完了');
  return HtmlService.createTemplateFromFile("hello").evaluate(); // テンプレートオブジェクトの取得
}

function QAInfo(count) { // evaluate後に呼び出されるので, doGet関数の定義の後でOK
    Logger.log('QAInfo関数呼び出し完了');
    var data = sheet.getRange(count+1, 1, 1, 6).getValues(); // セルの値を取得し, テンプレートに付与
    Logger.log('gsファイルでの' + count + '番目の問題文 = ' + data[0][0]);
  
    return data;
}

function answerButtonClick(click_value) {
  Logger.log('answerButtonClick');
  for(var j=1; j<=4; ++j) { // 選択肢でループ
    if (click_value == "Button" + j){ // ループの選択肢がユーザ選択と一致した場合
      if(myData.getRange("F" + (repeat + 1)).getValues() == click_value){
        output.append('正解');
      } else {
        output.append('不正解');
      }
      ++repeat;
    }
  } // for
} // function

// hello.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<p id="qNum">おはよう</p>
<p id='qSentence'>こんにちは</p> <!-- 問題文を取得 -->
<ol>
<li id='q1'></li> <!-- 選択肢1を表示 -->
<li id='q2'></li>
<li id='q3'></li>
<li id='q4'></li>
</ol>

<input type="button" id="Button1" value="1" onclick="answerButtonClick(this.value)">
<input type="button" id="Button2" value="2" onclick="answerButtonClick(this.value)">
<input type="button" id="Button3" value="3" onclick="answerButtonClick(this.value)">
<input type="button" id="Button4" value="4" onclick="answerButtonClick(this.value)">

<script>
//            $("#qNum").html('JQueryは健全動作中!');

            let closer = function(){
                let b = 0;
                return function(){
                    return ++b;
                };
            }();
            
            function returnQInfo(data, d){
                document.getElementById("Button4").insertAdjacentHTML('afterend','<p>returnQInfoは実引数の受け取りに成功した' + data[0][0] + '</p>');
           
                $("#qNum").html('問題' + d);
                $("#qSentence").html(data[0][0]);
                for (var j=1; j<=4; ++j){
                    $("#q" + j).html(data[0][j]);
                }
            }
            
            function failedAccess(){
                document.getElementById("Button4").insertAdjacentHTML('afterend','<p>missed to call QAInfo</p>');
            }
            
            try {
                do {
                    let d = closer();
                    document.getElementById("Button4").insertAdjacentHTML('afterend','<p>1であれば問題なし = ' + d + '</p>');
                    try {
                        google.script.run.withSuccessHandler(returnQInfo).withFailureHandler(failedAccess).withUserObject(d).QAInfo(d);
                    } catch (e) {
                        document.getElementById("Button4").insertAdjacentHTML('afterend','<p>error → hello.html → GASスクリプト関数呼び出し → ' + e.message + '</p>');
                    }
                } while(d == 1);
            } catch (k) {
                document.getElementById("Button4").insertAdjacentHTML('afterend','<p>error → hello.html → do while分中→ ' + k.message + '</p>');
            }
           
        </script>
    </body>
</html>

アプリの完成はまだですが, 無事質問内容の部分を解決できました.
ご教授ありがとうございました.

投稿2019/12/04 04:52

slimat

総合スコア57