【GAS→html　値渡す】①スプレッドシート→htmlへ値受け渡し（ロード、テンプレ読み込み時）

8261 ワード
HTML JavaScript スプレットシート 初心者 gas HTML テキストリンク

前回からの続きです。

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

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

やること

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

  1. スプレッドシート→GAS（サーバー側、コード.gs）で値取得
  2. GAS→javascript（クライアント側、index.html）に値受け渡し
  3. 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>