GoogleスプレッドシートをGASでデプロイし、JavaScriptで取得して表示する方法

1. GAS側

Googleスプレッドシートを開きデータを入力する。こんな感じ。

Name	Description	Price	Available
Cofee Mug	Mug Minim aute aliqua est laboris incididunt exercitation qui ut.	$9	Yes
Coffee Grinder	Consectetur consectetur tempor exercitation in minim qui exercitation in.	$54	No

入力が終わったら、メニューの Tools > Script editor をクリックして、GAS編集画面を開き、functionを2つ用意する。

function 1: getData

スプレッドシートのデータを取得する。

function getData(sheetName) {
  var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {};
    row.map(function(item, index) {
      obj[String(keys[index])] = String(item);
    });
    return obj;
  });
}

Class SpreadsheetApp

function 2: doGet

取得したデータを提供する。

function doGet() {
  var data = getData('Sheet1');
  return ContentService.createTextOutput(JSON.stringify(data, null, 2))
  .setMimeType(ContentService.MimeType.JSON);
}

Class ContentService

書き終わったら保存して、メニューから Publish > Deploy as web app をクリック。

モーダルウィンドウが出るので、

• Execute the app as: Me
• Who has access to the app: Anyone, even anonymous

に設定する。

web app URL をコピーしておく。
コピペしたURLを直接ブラウザで見ると、JSONデータが表示されるはずです。

公開したWeb app URL

※ もしGASのスクリプトを編集した場合、公開時に毎回 Project version を new にしないと、編集後のスクリプトが反映されないので注意。

2. Javascript側

先ほどコピペしたURLを、JavaScriptでfetchします。