Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

JavaScriptライブラリとして、jQueryを使用している
vue.jsで実装したのはこちら

デモ

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に以下のコードを貼り付ける
JavaScriptライブラリとしてjQueryを使用

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

merarli
社会人1年目、バックオフィスエンジニアとして働いています。 某デジタルメディアで長期就業型インターンやってました。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away