JavaScript
GoogleAppsScript
gas
スプレットシート

Google Apps Script(GAS) スプレッドシートの値を非同期でwebアプリケーションに表示する方法

はじめに

Google Apps Script(GAS) スプレッドシートの情報をWebアプリケーションから非同期通信を使って表示する。
これを利用すればページ移管なしで、情報を更新することができる。

デモ

fed86b9b3b38e661c8c6add47c42d323.gif

スプレッドシートにデータを書き込む

今回は2次元配列のデータをWebアプリケーションとして表示するため以下のようなデータを入れてみる

SS 2018-11-09 21.34.23.png

ツール > スクリプトエディタを立ち上げる
SS 2018-11-09 21.35.49.png

コードを書く

コード.gsに以下を貼り付ける

コード.gs
function doGet(e) {  
  htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();

  htmlOutput
  .setTitle('GASであそぼ')
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')

  return htmlOutput

}

function myFunction() {
  //アクティブじゃないシートの取得 名前指定で取得
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName('シート1');

  //シート内の最終行取得
  //1,1~sheet.getLastRow(),sheet.getLastColumn()を取得  ★書き込まれている範囲を全部取る★
  var range = sheet.getRange(1,1,sheet.getLastRow(),sheet.getLastColumn());

  //取得した全配列をdataにいれる
  var data = range.getValues();
  Logger.log(data[0][0]);

  return data;
}

続いてHTMLファイルを作成する
SS 2018-11-09 21.44.15.png

ファイル名を indexして[OK]
SS 2018-11-09 21.44.50.png

index.htmlに以下のコードを貼り付ける

index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <h1>表の書き出し</h1>
  <!-- クリックしたら index.html内のgetData()が呼び出される-->
  <button onclick="getData()">書き出し</button>
  <!-- resultのdivの中に書き出す -->
  <div id="result"></div>


  <script type="text/javascript">

  function getData(){
    google.script.run
    .withSuccessHandler(function(data) {
      // GAS正常終了時の処理
      //★ここが一番時間がかかる★
      console.log("正常 取得したデータ: " + data);

      //書き出し用の関数呼び出し
      outPut(data);
    })
    .withFailureHandler(function(data) {
      // GASエラー時の処理
      console.log("エラー 取得したデータ: " + data);
    })
    .myFunction();
  }


  function outPut(data){
    //テーブルタグとして出力
    var html = "";
    html += "<table class='table'>";
    html += "<tr>"
    html += "<th>名前</th>";
    html += "<th>住所</th>";
    html += "</tr>";
    for(var i = 0, l = data.length; i < l; i++) {
      html += "<tr>";
      html += "<td>" + data[i][0] + "</td>";
      html += "<td>" + data[i][1] + "</td>";
      html += "</tr>";
    }
    html += "</table>";

    $('#result').html(html);
  }


  </script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
</html>

function getData()を呼び出すとGAS内にあるmyFunction()が走りdataにデータが入る
そのdataを描画用の関数function outPut(data)に引数として渡す

Webアプリケーションとして走らせる

完成したらコード.gsindex.htmlを保存する
続いてWebアプリケーションとして導入する

導入を押す
SS 2018-11-09 22.08.23.png
SS 2018-11-09 22.09.45.png

許可を押す
SS 2018-11-09 22.10.09.png

承諾を押す
SS 2018-11-09 22.09.55.png

無事に導入できたので[最新のコードでテスト]を押す
SS 2018-11-09 22.10.21.png

無事に以下のように表示されたら成功です!
fed86b9b3b38e661c8c6add47c42d323.gif