6727


スプレッドシートから情報を取り出し，Google サイトのページ上に表示したいと思っているのですが難航しています． GAS で UI
サービスがなくなるにあたって，今までのものを書き換えようとしていきなり躓いています．以下のコードの間違いを指摘していただけたら助かります．当方初心者ですごく基本的なことなのかもしれませんがよろしくお願いします．

Code.gs

[code]

    function doGet() {
          return HtmlService.createHtmlOutputFromFile('index')
              .setSandboxMode(HtmlService.SandboxMode.IFRAME);
    }
    
    function test(myform) {
      var name = SpreadsheetApp.openById("スプレッドシート名")
         .getSheetByName("シート名").getRange(2, 1).getValue();
      myform.tbox.value = name;
    }
    
[/code]

index.html

[code]

    <html>
    <form name="myForm">
      <input type="text" name="tbox"/><br>
      <input type="button" value="表示"
          onClick="google.script.run.test(this.form)" />
    </form>
    </html>
    
[/code]


CC BY-SA 3.0
2015-02-19T01:51:34.250
6721
2015-02-19T11:12:40.570
2015-02-19T02:44:35.853
4978
8390
question
google-apps-script google-sites google-spreadsheet
Google Apps Script スプレッドシートの情報を Google サイトのページ上に表示させたい


上記のコードをが何をしたいかによって回答が変わりますが、  
最低限そのまま動くように直すのであれば以下のようになります。

Code.gs

[code]

    function doGet() {
          return HtmlService.createHtmlOutputFromFile('index')
              .setSandboxMode(HtmlService.SandboxMode.IFRAME);
    }
    
    function test(myform) {
      //↑test関数の引数myformはこの関数の入力値として使います。
      //例えばtextboxに入れた値をSpreadsheetに反映したい場合などです。
      //今回の処理では値をSpreadsheetから取得しているのみなので入力値は使いませんので必要ないはずで、なくても問題ないはずです。
    
      var name = SpreadsheetApp.openById("スプレッドシート名")
         .getSheetByName("シート名").getRange(2, 1).getValue();
      // myform.tbox.value = name;
      return {data: name}; //html側に返したいデータを返却します。 
      //上記が後述するwithSuccessHandlerコールバックの引数になります。
    }
    
[/code]

index.html

[code]

    <html>
    <form name="myForm">
      <input type="text" name="tbox"/><br>
      <input type="button" value="表示"
          onClick="onClick(this.parentNode)" /> <!-- ←の部分が長くなるので↓の<script>に移動しました。-->
    </form>
    <script>
    function onClick(form) {
      google.script.run
          .withSuccessHandler(function(result) {
              //withSuccessHandlerはCode.gs内の関数の戻り値を処理します。
              //今回の処理ではCode.gsのtestの戻り値{data: name}が引数resultに渡されます。
              document.getElementsByName("tbox")[0].value = result.data; 
          })
          .test(form); //form要素を渡すとform要素内にあるinput要素の値がCode.gs側の関数の引数として使えます。 またハマったら別の質問で聞いて下さい。
    }
    </script>
    </html>
    
[/code]


CC BY-SA 3.0
2015-02-19T03:29:49.217
6727
2015-02-19T03:29:49.217
4733
6721
answer


既にベストアンサーが出てはいますが、こんなやり方もあります。

GAS側コード:

[code]

    function doGet() {
      var output = HtmlService.createTemplateFromFile('index.html');
      var html = output.evaluate();
      return html;
    }
    
[/code]

HTML側コード:

[code]

    <script>
      var testman = <?!=JSON.stringify(SpreadsheetApp.openById("1SIeCloowtUiUc33T9prkKtbnAfpQ0w52nRFrxlHGsFU").getSheetByName("kinoko").getRange("A2:A").getValues());?>
    
      function onClick(){
        document.getElementById("tbox").value = testman[0];
      }
    </script>
    <form name="myForm">
    <input type="text" id="tbox"/><br>
    <input type="button" value="表示" onClick="onClick()" />
    </form>
    
[/code]

  * 設置してみたページ  
<https://sites.google.com/site/testscriptpage/home/kinoko>

  * スプレッドシート  
<https://docs.google.com/spreadsheets/d/1SIeCloowtUiUc33T9prkKtbnAfpQ0w52nRFrxlHGsFU/edit#gid=0>


CC BY-SA 3.0
2015-02-19T10:49:43.453
6773
2015-02-19T11:12:40.570
2015-02-19T11:12:40.570
8407
8407
6721
answer