前回からの続きです。

前提・対象レベルとか、その他記事をまとめております。

次のページ
②スプレッドシート→htmlに渡した値をテーブル形式に（jquery）

やること

GASで作成したWebページを開く際、

スプレッドシート→GAS（サーバー側、コード.gs）で値取得
GAS→javascript（クライアント側、index.html）に値受け渡し
javascript→htmlの要素へ値を渡して表示

スプレッドシート

	A	B	C
1	地域	都道府県	県庁所在地
2	首都圏	東京	東京
3	東海	愛知	名古屋
4	東北	宮城	仙台
5	関西	兵庫県	神戸
6	甲信越	山梨	甲府

結果

Webページ↓

実際のコード

GASコード（スプシ→GASで値取得、保持）

コード.gs


function valsget() {
  //GASに紐づくスプシ呼び出し→シート名からシート取得　　※シート名相違注意
  let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("テスト");
  
　//範囲を取得→getvaluesで値取得、二次元配列に格納
　let vals = ss.getDataRange().getValues();
  
  Logger.log(vals); 
  //[['地域','都道府県','県庁所在地'],['首都圏','東京','東京'],['東海','愛知','名古屋'],〜〜]をログで出力  
 
  return vals;
}

GASコード（htmlテンプレートの作成、出力）

コード.gs

//doGet関数を使う

function doGet(){
  let htmloutput = HtmlService.createTemplateFromFile('index').evaluate();
　//htmlテンプレートを作って再評価。再評価でjsの関数などを読み込み実行

  htmloutput.setTitle('CRUDテスト');
  return htmloutput;
  //htmlテンプレート返す

}

【解説】GAS関数（サーバー）をjavascript（クライアント）で呼び出すメソッド

  google.script.run.withSuccessHandler(コールバック関数＝クライアント側js).GAS関数();
  
/*
  1.GAS関数をまず実行
  2.GASで取得した戻り値 → コールバック関数に戻り値を渡す 
  3.コールバック関数=クライアント側jsを実行する
*/

index.htmlを作成→html、クライアント側javascriptをかく

index.html


<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>  
    <p id="test"></p>

        
  </body>
</html>



<script>
　
　//webページの読み込み時に実行
  window.onload = function(){

    google.script.run.withSuccessHandler(function(dt){ //valsgetの取得値をdtに渡す
      let testEl = document.getElementById('test');  //要素p取得
      testEl.innerHTML = dt;  //要素pのテキストにdtを入れる
      }).valsget();
  }  
</script>