t-log

GASを使用してSpreadsheetの内容を表示するWebサイトを作成

GAS開発

GoogleFormやSpreadsheet等のGoogleサービスのデータを共有したい場合、GASを使うとデータの取得が容易で共有範囲を設定しやすい。

プロジェクト内にindex.htmlを作成、

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('Title')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

以上のように書いてウェブアプリとしてデプロイすることで、ウェブページを公開することができる。

デプロイする際に共有範囲や実行ユーザーを設定できるのでデータが個人情報などを含む場合にも使えそう。

スプレッドシートのデータを取得してみた。

function getSpreadsheetData() {


  try {
    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheet = SHEET_NAME ? ss.getSheetByName(SHEET_NAME) : ss.getActiveSheet();


    const data = sheet.getDataRange().getValues();


    if (data.length === 0) {
      return { headers: [], rows: [], sheetName: sheet.getName(), source: 'spreadsheet' };
    }


    // 1行目をヘッダーとして扱う
    const headers = data[0].map(String);
    const rows = data.slice(1).map(row =>
      row.map(cell => {
        if (cell instanceof Date) {
          return Utilities.formatDate(cell, Session.getScriptTimeZone(), 'yyyy/MM/dd');
        }
        return cell;
      })
    );


    return { headers, rows, sheetName: sheet.getName(), source: 'spreadsheet' };
  } catch (err) {
    const sample = getSampleData();
    sample.error = err.message;
    return sample;
  }
}
<body>
  <div id="table"></div>


  <script>
    google.script.run
      .withSuccessHandler(function(data) {
        var html = '<table border="1"><thead><tr>';
        data.headers.forEach(function(h) {
          html += '<th>' + h + '</th>';
        });
        html += '</tr></thead><tbody>';
        data.rows.forEach(function(row) {
          html += '<tr>';
          row.forEach(function(cell) {
            html += '<td>' + cell + '</td>';
          });
          html += '</tr>';
        });
        html += '</tbody></table>';
        document.getElementById('table').innerHTML = html;
      })
      .getSpreadsheetData();
  </script>
</body>

HTMLとGAS意外の形式のファイル(CSSとか)は作成できないのでHTML中に書く必要があるようだ。