Zenn
👩‍💼

#78　【GAS】GASで作成したWEBアプリにスプレッドシートのデータを出力する

に公開
Google Sheets
Google Apps Script
tech

はじめに

今回は、前回の記事「【GAS】スプレッドシートの内容を読み取ってGASのログに出力してみた」をもとに、GASでWEBアプリの作成を行っていきます。
前回はスプレッドシートのデータをログに出力しましたが、今回はWEBアプリ上に一覧表示させたいと思います。

手順

1.前回の記事を参考に手順を実行する

前回の記事「【GAS】スプレッドシートの内容を読み取ってGASのログに出力してみた」を参考に「コード.gs」の中身を書き換える前まで進めてください。
今回はデータの出力先がログではなく、WEBアプリ上となるため、後ほどコード.gsのコードを書き換えます。

2.HTMLファイルの追加

GASの画面左側からHTMLファイルを追加します。
作成したHTMLファイルは「index.html」と命名しました。
image.png

※この後、コード内でHTMLファイルの名前を指定する必要があります。
※ファイル名を変更する場合は、コード内でHTMLファイルの名前を指定している箇所も忘れず変更してください。

3.コードを書き換える

「コード.gs」と「index.html」のコードをそれぞれ以下のように修正し、保存します。

コード.gs
// データを取得する関数
function readData() {
// 作成したシート"Sheet1"を取得する
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
// シートからデータの範囲を取得する
var dataRange = sheet.getDataRange();
// データ範囲からデータ（値）を取得
var dataValues = dataRange.getValues();
// データを返す
return dataValues;
}

// HTMLファイルを提供する関数
function doGet() {
// "index"という名前のHTMLファイルからHTMLの出力を作成
return HtmlService.createHtmlOutputFromFile('index')
// サンドボックスモードをIFRAMEに設定
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ユーザー一覧</title>
</head>
<body>
  <h1>ユーザー一覧</h1>
    <table id="data-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Occupation</th>
      </tr>
    </thead>
    <tbody>
      <!-- ここにデータが表示される -->
    </tbody>
  </table>

  <script>
    function getData() {
      // コード.gsのreadData()を呼び出してスプレッドシートのデータを取得する
      google.script.run.withSuccessHandler(makeRows).readData();
    }

    function makeRows(data) {
      // テーブルのtbody要素を取得
      var tableBody = document.querySelector('#data-table tbody');
      
      // tbodyの内容を初期化
      tableBody.innerHTML = '';

      // dataの最初の行[0]はヘッダーのためスキップ
      for (var i = 1; i < data.length; i++) {
        var row = data[i];

        // 取得したデータを使ってテーブルの行を作成
        var newRow = '<tr><td>' + row[1] + '</td><td>' + row[2] + '</td><td>' + row[3] + '</td></tr>';
        
        // 行をtbodyに追加
        tableBody.innerHTML += newRow;
      }
    }

    // ページを読み込んだときにgetData()を実行する
    window.onload = function() {
      getData();
    };
  </script>
</body>
</html>

3.デプロイ

画面右上のデプロイボタン＞「新しいデプロイ」を押下しデプロイの設定を行います。
デプロイの種類は「ウェブアプリ」を選択、他は好みで設定してください。
image.png

デプロイボタン押下時にアクセス許可を求められる場合があるので、その場合は許可してください。
デプロイが完了すると、ウェブアプリのURLが確認できるようになります。

4.デプロイしたウェブアプリを開く

URLを開くと以下の画像のような画面が表示され、スプレッドシートから取得したデータが適切に表示されていることが確認できます。
image.png

課題

今回の方法では画面を表示するまでに３秒ほどかかり、速度はあまり早くありませんでした。
また、今回はテスト用として作成しましたが、実際に使用する際にはセキュリティ対策なども考慮して活用していきたいです。

最後に

今回はGASを使ったウェブアプリを作成し、スプレッドシート上のデータを一覧表示させてみました。
課題もありますので、引き続き調べていきたいと思います。
ご覧いただきありがとうございました。

出典：https://developers.google.com/apps-script/guides/html/communication?hl=ja#index.html_3

Discussion