Googleスプレッドシート

GoogleスプレッドシートのデータをWebページに表示する方法｜Apps Scriptで簡単API作成と表示手順

 

Googleスプレッドシートを使用して、データを管理・共有する方は多いかと思います。このスプレッドシートのデータを、独自ドメインのWebページ上に表示したいと思ったことはありませんか？
このブログ記事では、Google Apps Scriptを活用してGoogleスプレッドシートのデータをJSON形式で取得し、Webページに表示する方法を解説します。

Contents

Googleスプレッドシートとは

Googleスプレッドシートは、Googleが提供するオンラインのスプレッドシートサービスで、複数人でのデータ入力やリアルタイムでの共同編集が可能です。また、クラウド上にデータが保存されるため、どこからでもアクセスできるという利点があります。

Google Apps Scriptとは

Google Apps Scriptは、Googleが提供するJavaScriptベースのスクリプト開発環境です。
Googleスプレッドシート、ドキュメント、カレンダーなどと連携し、さまざまな自動化や拡張機能を実現できます。
今回は、Apps Scriptを使ってGoogleスプレッドシートのデータをJSON形式で取得できるAPIを作成し、独自Webページに表示します。

スプレッドシートの内容をWebページ表示する用途

GoogleスプレッドシートのデータをWebページに表示することで、次のような用途が考えられます：

  • リアルタイムで更新されるデータをサイト上で公開
  • 複数のWebページで同一データを一括管理
  • チーム内のデータ共有を簡略化

スプレッドシートの内容をWebページ表示するデモページを作成

ここからは実際のデモページを作成してみます。

1. Google Apps Scriptの設定

以下の手順でGoogle Apps Scriptを設定し、スプレッドシートのデータをJSONで取得します。

  1. Googleスプレッドシートを開きます。
  2. 「拡張機能」→「Apps Script」を選択し、スクリプトエディタを開きます。
  3. 次のコードをコピーして貼り付けます。

// Googleスプレッドシートのデータを取得してJSON形式で返すスクリプト
function doGet(e) {
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("シート1"); // シート名を指定
    const data = sheet.getDataRange().getValues();
    return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(ContentService.MimeType.JSON);
}
  1. エディタ上部の「デプロイ」から「新しいデプロイ」を選択します。
  2. 「種類の選択」の「歯車マーク」から「ウェブアプリ」として設定します。
  3. 「設定」エリアから「説明」を入力、「ウェブアプリ」を「自分」選択、アクセスできるユーザー「全員」を選択し、「デプロイ」をクリックします。
  4. 「アクセスを承認」ボタンをクリックします。
  5. 承認（ログイン）画面が表示されるのでGoogleアカウントを選択し「BACK TO SAFETY」ボタンをクリックします。
  6. 「Advanced」をクリック
  7. 「Go to AppsScript名 (unsafe)」をクリック
  8. 発行されたURLをコピーしておきます。

2. HTMLデモページを作成

次に、取得したJSONデータを表示するHTMLページを作成します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Googleスプレッドシートの内容をAppsScriptを使ってJSON形式のデータを表示するデモページ</title>

    <meta name="description" content="Googleスプレッドシートの内容をAppsScriptを使ってJSON形式のデータを表示するデモページ">

<style type="text/css">
body{
  text-align: center;
  font-size: 18px;
}
h1{
  text-align: center;
  font-size: 26px;
  line-height: 1.6em;
  padding: 30px 0;
}
p{
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 4px;
}
div{
  padding: 20px 0;
  font-size: 16px;
  font-weight: bold;
  width: 70%;
  margin: 0 auto;
  text-align: left;
  color: red;
}
</style>
</head>
<body>

<h1>Googleスプレッドシートの内容をAppsScriptを使って、<br>JSON形式のデータを以下に表示します。</h1>

<div id="data-container"></div>

<a href="https://docs.google.com/spreadsheets/d/1zdA9UbrrjKOWOdzVrDNPBsur6umfyfxx0myFqQ6zEkk/edit?usp=drive_link" target="_blank">データ取得元のGoogleスプレッドシート</a>

<script>
fetch('YOUR_SCRIPT_URL_HERE') // スクリプトURLを指定
.then(response => response.json())
.then(data => {
    console.log(data); // データを表示する
    // HTMLに表示するために加工
    document.getElementById("data-container").innerText = JSON.stringify(data);
});
</script>

</body>
</html>

このサンプルコードでは、先ほど取得したスクリプトのURLをYOUR_SCRIPT_URL_HEREの部分に置き換えてください。

Googleスプレッドシートの内容をAppsScriptを使ってJSON形式のデータを表示するデモページ

以下のデモページで実際の動作を確認してみてください。

Googleスプレッドシートの内容をAppsScriptを使ってJSON形式のデータを表示するデモページ

注意点

公開したAPIはすべてのユーザーがアクセスできる設定になっています。
データの機密性に注意し、公開するデータには十分注意してください。

まとめ

GoogleスプレッドシートのデータをGoogle Apps Scriptを使って独自ドメインのWebページに表示する方法を解説しました。
この方法を活用すれば、データを一元管理しながら、Webページにリアルタイムでデータを表示できます。ぜひ試してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

json Apps Script
関連記事