📊
総件数 -
「好き」 -
💔
「嫌い」 -
💡 Google Apps Script 連携の裏側

このページは、Googleスプレッドシートをデータベースとして活用するデモ画面です。以下の仕組みで動作しています：

  1. Googleスプレッドシート: 行ごとに「フルーツ名」「評価（好き/嫌い）」「理由」を記述したシートを作成。
  2. Google Apps Script (GAS): スプレッドシートのデータを読み取り、JSON形式で返すWebAPIサーバー（Web App）を構築。
  3. フロントエンド: GASの公開エンドポイントURLからfetch APIを用いてデータをリアルタイム非同期取得し、動的に描画。

Google Apps Script 側のコード (doGet)

スプレッドシートのスクリプトエディタに配置されたコードの抜粋です。CORS制約を回避するため、JSONMimeTypeのテキスト出力としてレスポンスを返却しています。

function doGet(e) {
  // 1. アクティブなスプレッドシートのデータを取得
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var data = sheet.getDataRange().getValues();

  // 2. レスポンスデータをJSON文字列にしてCORS対応で返す
  var output = JSON.stringify(data);
  return ContentService.createTextOutput(output)
    .setMimeType(ContentService.MimeType.JSON);
}