📝

📝GoogleスプレッドシートとJSでなんちゃってCMSを実装しよう

QwerTayu

2024/11/02に公開

 はじめにこの記事では、GoogleスプレッドシートとJavaScript, HTMLを使って、簡単なCMS（コンテンツ管理システム）を実装する手順を紹介します。

※CMSと表記するより、Googleスプレッドシートをデータベースとして配信する、と表現した方が正しいかもしれませんが。
対象読者はHTMLやJavaScriptの基礎知識はあるけれど、APIを使ったデータ取得の経験がない方です。APIの基本については、参考記事もいくつか紹介していますので、ぜひそちらも確認してください。
この記事を読み終わると、GoogleスプレッドシートのデータをJSON形式で取得し、JavaScriptでWebページに表示する流れが理解できます。

 2023年度明石高専スポーツ大会サイト（お知らせ、遅延情報、タイムテーブル、トーナメント結果）にてこのシステムを採用しています↓https://sports2023.nitacwpl.tech/

 1. Googleスプレッドシートの内容をJSON形式で取得するまずは、GoogleスプレッドシートをCMSの「データベース」として扱います。スプレッドシートのデータをJSON形式で取得し、外部からアクセスできるようにします。

 スプレッドシートの公開設定Googleスプレッドシートを開き、データを入力します。以下のようなデータを入れておきましょう。


ID
タイトル
内容


1
サンプル記事1
この記事は〜

2
サンプル記事2
この記事も〜

スプレッドシートのデータを外部から取得するためには、スプレッドシートを「公開」する必要があります。

画面右上の「共有」ボタンからリンクを知っている全員に表示の設定を行ってください。

 Google Cloud PlatformでAPIキーを取得GoogleスプレッドシートのデータをJSON形式で取得するためには、Google Sheets APIを有効化し、APIキーを発行する必要があります。

 手順Google Cloud Consoleにアクセスし、プロジェクトを作成します。
Google Cloud Console
プロジェクト名を入力して作成ボタンを押しプロジェクトを新規作成します。
Google Sheets APIを有効にする。
サイドメニューから 「APIとサービス」 > 「ライブラリ」 を選択します。
「Google Sheets API」を検索し、有効化します。




APIキーを作成する。
「APIとサービス」>「認証情報」に移動します。
「認証情報を作成」ボタンをクリックし、APIキーを選択します。
作成されたAPIキーをメモしておきましょう。後ほどスプレッドシートのデータ取得に使います。
APIキーのセキュリティ設定。
APIキーが無制限に使われないよう、必要に応じて「アプリケーションの制限の設定」や「APIの制限」を設定してください。作成したAPIキーの名前をクリックした先のページで設定を追加できます。



 スプレッドシートデータの取得URL取得したAPIキーを使って、以下のURL形式でスプレッドシートのデータを取得できます。
https://sheets.googleapis.com/v4/spreadsheets/スプレッドシートID/values/シート名?key=APIキー

スプレッドシートのIDは、スプレッドシートのURL内の「/d/」と「/edit」の間にある文字列です。

シート名には、データを取得したいシートの名前を指定します。
これで、スプレッドシートのデータをJSON形式で取得する準備が整いました。
上記URLにブラウザ等でアクセスするとこのように表示されるはずです。
{
    "range": "'シート名'!A1:C3",
    "majorDimension": "ROWS",
    "values": [
        [
            "ID",
            "タイトル",
            "内容",
        ],
        [
            "1",
            "サンプル記事1",
            "この記事は～"
        ],
        [
            "2",
            "サンプル記事2",
            "この記事も～"
        ]
    ]
}

 参考リンクGoogleスプレッドシートAPIの公式ドキュメント

 2. JavaScriptでAPIを使ってデータを取得する次に、JavaScriptを使って先ほどのAPIからデータを取得し、Webページに表示します。

 fetch()でデータを取得fetch()メソッドを使って、スプレッドシートからJSONデータを取得します。以下のようなコードを用います。
async function fetchData() {
  const response = await fetch('https://sheets.googleapis.com/v4/spreadsheets/スプレッドシートID/values/シート名?key=APIキー');
  if (!response.ok) {
    throw new Error('データの取得に失敗しました');
  }
  const data = await response.json();
  console.log(data);  // 取得したデータを確認
}
fetchData();

注意点: Googleスプレッドシートを公開設定にしていないと、このAPIにアクセスできません。
このfetchData関数を実行すると、スプレッドシートのデータがコンソールに表示されます。

 3. 取得したデータをDOM操作で表示する次に、取得したデータを実際にHTMLに表示します。

 DOM操作の例JSONデータの中にある必要な情報を抽出し、それをDOMに反映します。例えば、以下のコードでタイトルと内容を表示できます。
async function fetchData() {
  const response = await fetch('https://spreadsheets.google.com/feeds/list/スプレッドシートのID/1/public/values?alt=json');
  if (!response.ok) {
    throw new Error('データの取得に失敗しました');
  }
  const data = await response.json();
  
  // 必要な情報を取得
  const rows = data.values;
  const container = document.getElementById('data-container');
  
  rows.forEach(row => {
    const title = row[1];
    const content = row[2];

    // DOMに表示
    const div = document.createElement('div');
    div.innerHTML = `<h2>${title}</h2><p>${content}</p>`;
    container.appendChild(div);
  });
}
fetchData();

data-containerというIDの要素にデータが追加されていきます。

 HTML側の例HTMLは次のように用意しておきます。
<body>
  <h1>記事一覧</h1>
  <div id="data-container"></div>

  <script src="script.js"></script>
</body>
これで、スプレッドシートから取得したデータがWebページに表示されるようになります。

 4. まとめ今回は、GoogleスプレッドシートをCMSとして活用し、JavaScriptを使ってデータを取得して表示する手順を紹介しました。基本的な流れは以下のとおりです。
Googleスプレッドシートの公開設定を行ったのち、Google CloudのAPIの設定をする
JSON形式でデータを取得するためのURLを生成する

fetch()メソッドでAPIからデータを取得
DOM操作を用いて取得したデータをWebページに表示
APIの基本やエラーハンドリングなどについてさらに学びたい方は、以下の参考リンクもチェックしてください。

 参考リンクfetch()の使い方
DOM操作の基本
Google Sheets APIの利用方法
これで、簡単なCMSの基礎ができました。ぜひ応用して、もっと高度な機能を実装してみてください！