スプレッドシート内容をGoogle Sheets APIを使ってJSON形式のデータを表示する方法｜DAD UNION

Googleスプレッドシートは、データ管理や共有に非常に便利なツールです。このスプレッドシートのデータを、APIを使って独自のWebページに表示できることをご存知でしょうか？

本記事では、Google Sheets APIを利用して、スプレッドシートの内容をJSON形式で取得し、Webページに表示する方法をわかりやすく解説します。

Contents

Google Sheets APIとは
Google Cloud Platform (GCP) とは
- 無料枠、有料枠、Google Workspaceユーザーの場合
実際にGoogleスプレッドシートの内容を表示してみる
まとめ

Google Sheets APIとは

Google Sheets APIは、Googleが提供するサービスで、スプレッドシートのデータをプログラムで操作できるようにします。データの読み取りや書き込みを自動化でき、Webアプリやシステムとの統合に便利です。

Google Cloud Platform (GCP) とは

GCP（Google Cloud Platform）は、Googleが提供するクラウドコンピューティングサービスの集合体です。Google Sheets APIもこのプラットフォームの一部として提供されています。APIを利用するには、GCPでプロジェクトを作成し、APIキーを発行する必要があります。

無料枠、有料枠、Google Workspaceユーザーの場合

Google Sheets API自体は無料で利用できます。
ただし、大量のリクエストや他のGCPサービスを併用する場合は課金が発生する可能性があります。

無料枠:
無料利用枠内での使用には費用はかかりません。初回登録時には$300の無料クレジットが提供されます。
有料枠:
無料枠を超えたリソースを使用した場合、従量課金制で費用が発生します。
Google Workspaceユーザー:
Google Workspaceに含まれる一部のサービスを利用している場合、追加の特典や制限が適用されることがあります。

実際にGoogleスプレッドシートの内容を表示してみる

1. Googleスプレッドシートを作成し、共有範囲の設定

Googleスプレッドシートを開き、新しいスプレッドシートを作成します。
「共有」ボタンをクリックし、「リンクを知っている全員が表示可能」に設定します。
スプレッドシートのURLからスプレッドシートIDをコピーします。URLの一部、“/d/スプレッドシートID/”が該当部分です。

2. Google Cloud Consoleで「APIとサービス」からAPIキーを作成して取得する方法

Google Cloud Consoleにアクセスし、新しいプロジェクトを作成します。
サイドバーのメニューから「APIとサービス」→「ライブラリ」を開き、「Google Sheets API」を検索して有効化します。
画面上部の「認証情報」→「認証情報を作成」→「APIキー」を選択し、生成されたAPIキーをコピーします。

3. APIキーの使用制限を設定（オプション）

セキュリティを高めるために、以下のような制限を設定することをおすすめします。

API キー一覧画面の「名前」箇所に作成したAPIキーが表示されるのでリンクをクリックして編集画面を開きます。
「アプリケーションの制限の設定」から「ウェブサイト」を選択し、「ADD」からウェブサイトのURL（例：dad-union.com）を入力し「完了」をクリックします。
「API の制限」の「キーを制限」を選択し、「Google Sheets API」を選択して保存します。

APIキーの公開には注意が必要です。使用制限（リファラー制限やIP制限）を設定することで、不正利用を防止できます。

4. コードサンプルを作成してデータを表示

以下のコードをHTMLファイルにコピーし、ブラウザで開くとスプレッドシートのデータがJSON形式で表示されます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Google Sheets APIデモ</title>
    <style>
      body { font-family: Arial, sans-serif; text-align: center; }
      #data-container { margin: 20px auto; color: red; }
    </style>
  </head>
  <body>
    <h1>スプレッドシートの内容をJSON形式で表示</h1>
    <div id="data-container"></div>

    <script>
    const apiKey = 'YOUR_API_KEY'; // APIキーをここに入力
    const spreadsheetId = 'YOUR_SPREADSHEET_ID'; // スプレッドシートIDをここに入力
    const range = 'Sheet1!A1:C10';

    fetch(`https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${range}?key=${apiKey}`)
        .then(response => response.json())
        .then(data => {
            console.log(data);
            document.getElementById("data-container").innerText = JSON.stringify(data.values);
        });
    </script>
  </body>
</html>