Google Apps Scriptで簡易ウェブサイト生成とSpreadsheetデータの非同期データロード

· ·

概要 🔗

Google Apps Script を利用して Google Spreadsheet のデータを非同期で読み込むレスポンシブなウェブサイトを構築する

構成 🔗

Google Apps Script を利用してウェブサービスを作ることができます。ただし Google 検索に Index されることはたぶん無いので、イントラとして利用したりと利用用途は限られる気がします。

今回は毎日定期的に更新される Google Spreadsheet を非同期で読み込むウェブサイトを以下 3 ファイルを用いて構築する。かつ viewport 設定でレスポンシブウェブデザインとしてスマートフォンでも快適に閲覧出来るようにする。

main.gs
index.html
JavaScript.html

main.gs ファイルの中身は以下の通り。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


// HTMLサービスの生成
function doGet(e) {
  var output = HtmlService.createTemplateFromFile("index.html");
  var pageData = output
    .evaluate()
    .setTitle("●●サイトタイトル●●")
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .addMetaTag("viewport", "width=device-width, initial-scale=1")
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return pageData;
}

// StyleSheetやJavaScriptを別ファイルに書き出して呼び出す
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

// Spreadsheetのデータを読み込む
function getLotsOfThings() {
  var ss = SpreadsheetApp.openById("●●SpreadsheetのSheet ID●●");
  var sheet = ss.getActiveSheet();
  var data = sheet.getDataRange().getValues();
  return data;
}

main.gs ファイルで以下の index.html ファイルを読み込む。Javascript ファイルは別に作成する JavaScript.html ファイルで作り main.gs で作成した include 関数を利用して読み込む。同様に StyleSheet も読み込めば普通のウェブサイトのようなキレイなウェブデザインで構築することが出来る。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
    <?!= include('JavaScript'); ?>
  </head>
  <body>
    <h1>ページ</h1>
    <p>リストコンテンツを非同期で読み込む</p>
    <p>&nbsp;</p>
    <ul id="things">
      <li>loading...</li>
    </ul>
  </body>
</html>

JavaScript.html の中身はこちら。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<script>
  $(function () {
    google.script.run.withSuccessHandler(showThings).getLotsOfThings();
  });

  <!-- gsファイルで読み込んだSpreadsheetの1カラム目と2カラム目を読み込んでいる -->
  function showThings(data) {
    console.log(data);
    var list = $("#things");
    list.empty();
    for (var i = 1; i < data.length; i++) {
      list.append(
        '<li><a href="' +
          data[i][1] +
          '" target="_blank" rel="noreferrer noopener">' +
          data[i][0] +
          "</a></li>"
      );
    }
  }
</script>

Spreadsheet データがより大きくなっても JavaScript.html ファイルを更新することで対応できるし、StyleSheet ファイルを別に作って include で読み込めばキレイなウェブサイトも作ることができる。

参考 🔗

HTML Service: Best Practices

GAS