BETA

GASのHtmlServiceでスプレッドシートのデータを表示する

投稿日:2020-07-12
最終更新:2020-07-19

スプレッドシートのデータ

id name
1 aaa
2 bbb
3 ccc
4 ddd
5 eee

GASのコード

function doGet() {  
  var output = HtmlService.createTemplateFromFile('index');  
  return output.evaluate().setTitle('sample_page');  
}  

function getData(){  
  var sheets = SpreadsheetApp.openById("(sheet_id)").getSheets();//シートを取得する  
  var range = sheets[0].getRange(2,2,3);//row2,col1から3行(1列)の範囲  
  var datas = range.getValues();//データを取得する  
//  Logger.log(datas);  
  return datas;  
}  

index.html

<!DOCTYPE html>  
<html>  
  <head>  
    <base target="_top">  
  </head>  
  <body>  
    <?  
      var datas = getData();  
      for(var i = 0;i < datas.length; i++){  
        output._ = "<p>" + datas[i] + "</p>";  
      }  
    ?>  
  </body>  
</html>  

画面表示

こんな感じの画面表示になる。

aaa

bbb

ccc

gasでサーバ側のメソッドを動かして返り値を取得して描画する

html

  <div id="app">  
    <p>{{ msg }}</p>  
            <input type="button" value="click" v-on:click="onclick">  
  </div>  

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  <script>  
var app = new Vue({  
      el: '#app',  
      data: {  
        msg: "hello!!!!!"  
      },  
      methods: {  
        onclick: function(){  
          google.script.run.withSuccessHandler(this.onSuccess).server_test("test_string");  
        },  
        onSuccess: function(res){  
          this.msg = res;  
        }  
      }  
    });  
  </script>  

サーバ側のgas

function server_test(){// 現時点では,クライアント側から引数を受け取らない簡単な関数にしている  
  return "server_test_return";// 単純に文字列を返す  
}  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@mihiraTakashiの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう