Zenn
CareNet EngineersPublicationへの投稿
📑

Google SpreadSheetに登録したデータをウェブサイトに表示する方法

Kou
2023/10/20に公開
Google Sheets
GAS
Google Apps Script
tech

イントロダクション

この記事では、HTML、JavaScript、および Google SpreadSheet、Google Apps Script を使用して、ウェブサイトのコンテンツを動的に更新する方法について説明します。

具体的には、ウェブサイトのコンテンツを、CMSの導入や大規模な改修なしにエクセル修正感覚で更新可能にします。

ウェブサイトを運営している場合、新しいコンテンツやアップデート情報を定期的に更新する必要があります。しかし、毎回の更新ごとにHTMLファイルを手動で変更するのは非効率的です。そこで、Google SpreadSheetを利用して、コンテンツを管理し、ウェブページに自動的に反映させる方法を紹介します。

概要

Google SpreadSheetを活用してデータを管理し、ウェブページに表示する仕組みを構築します。具体的なステップは以下の通りです：

  1. Google SpreadSheetでデータを管理します。
  2. SpreadSheetのウェブに公開機能を利用し、データを外部からアクセス可能な形式で公開します。※組織(Google Workspace)のポリシーによってはウェブ上のすべてのユーザーへ公開が出来ない設定にがあります。
  3. JavaScriptを使用して、公開されたデータを取得し、ウェブページに動的に表示します。

これにより、ウェブサイトのコンテンツを簡単に更新できる仕組みが実現されます。

STEP1. Google SpreadSheetでデータを管理する

まず最初に、Google SpreadSheetを使用してデータを管理します。データは次のような表の形式を作成します。

date caption link
YYYY/MM/DD ○○を更新しました。 http://www.example.com
YYYY/MM/DD ○○を更新しました。 http://www.example.com
YYYY/MM/DD ○○を更新しました。
  • date: 日付
  • caption: 表示させる内容
  • link: 詳細リンク

STEP2. Google Apps Scriptを作成しJSONで返す

ツールメニューから「スクリプトエディタ」を選択して、新しいGoogle Apps Scriptプロジェクトを作成します。

スクリプトを記述します。

Google Apps Scriptエディタで、以下のサンプルコードを使用してGoogle Spreadsheetからデータを読み取ります。このコードは、スプレッドシート内のシートの内容をJSON形式で取得し、HTMLページに表示します。

function getDataFromSpreadsheet() {
  var spreadsheet = SpreadsheetApp.openById('YOUR_SPREADSHEET_ID');
  var sheet = spreadsheet.getSheetByName('YOUR_SHEET_NAME');
  var data = sheet.getDataRange().getValues();

  var jsonData = [];
  var headers = data[0];

  for (var i = 1; i < data.length; i++) {
    var rowData = {};
    for (var j = 0; j < headers.length; j++) {
      rowData[headers[j]] = data[i][j];
    }
    jsonData.push(rowData);
  }

  return JSON.stringify(jsonData);
}

function doGet(e) {
  contents = getDataFromSpreadsheet();

  ContentService.createTextOutput()
  var output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(contents);
  
  return output;
}

'YOUR_SPREADSHEET_ID'と'YOUR_SHEET_NAME'を、実際のスプレッドシートのIDとシート名に置き換えます。
ウェブアプリケーションとして公開します。

スクリプトエディタで「デプロイ」メニューを選択し、「ウェブアプリ」を選択します。
設定を行い、ウェブアプリケーションとして公開します。
このとき、公開ウェブアプリケーションのURLが生成されます。

STEP3. HTMLページを作成する

HTMLファイルを作成し、以下のようなJavaScriptコードを含めます。

<!DOCTYPE html>
<html>
<head>
  <title>Google Spreadsheet Data</title>
</head>
<body>
  <table id="data-table">
    <thead>
      <tr>
        <th>Date</th>
        <th>Caption</th>
        <th>Link</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    fetch('URL_OF_YOUR_WEB_APP')
      .then(response => response.json())
      .then(data => {
        var dataTable = document.getElementById('data-table');
        var tbody = dataTable.querySelector('tbody');

        data.forEach(function(item) {
          var row = document.createElement('tr');

          var dateCell = document.createElement('td');
          dateCell.textContent = item.date;

          var captionCell = document.createElement('td');
          captionCell.textContent = item.caption;

          var linkCell = document.createElement('td');
          if (item.link) {
            var link = document.createElement('a');
            link.href = item.link;
            link.textContent = '詳細';
            linkCell.appendChild(link);
          }

          row.appendChild(dateCell);
          row.appendChild(captionCell);
          row.appendChild(linkCell);

          tbody.appendChild(row);
        });
      });
  </script>
</body>
</html>

'URL_OF_YOUR_WEB_APP'を、先ほど公開したウェブアプリケーションのURLに置き換えます。

demo

このような感じの仕上がりに！

おわりに

この記事では、Google SpreadSheetを使用してウェブサイトのコンテンツを管理し、サイト上のコンテンツを更新する方法について説明しました。これにより、ウェブサイトの管理が効率化され、CMSの導入や大規模な開発作業を行わずにコンテンツを更新できるようになります。

CareNet Engineers
CareNet EngineersPublication

株式会社ケアネットのエンジニアブログです。CareNetサービスの技術情報を中心に記事を投稿しております。 各記事の内容は個人の意見であり、企業を代表するものではございません。

Discussion