JSでGoogleスプレッドシートのデータを取得して利用

GoogleスプレッドシートのデータをJSONで出力し、Javascriptで表示する

Googleスプレッドシートでデータを作成

企業ごとにシートで分ける想定で、以下のようなデータを作成

table:スプレッドシート："企業名"シート

期間 プロジェクト名 概要 チーム構成 使用技術 担当業務 担当業務詳細

20xx年～20xx年 プロジェクト1 概要概要 デザイナー x名 HTML,CSS,JavaScript.... コーディング 詳細詳細....

.... .... .... .... .... .... ....

入力したデータをAPIとして公開する

「App Script」画面が開くので、以下コードを入力(※記載時点ではスプレッドシートには4行分のデータしか作成していなかったため、取得するデータは4行分になっている)

code:コード.gs

// データを取得し、整形

function readData() {

const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();

const sheet_ns = spreadsheet.getSheetByName('Netspice'); // Netspiceの経歴のシート

const data_range = sheet_ns.getRange('A2:G5'); // 取得するデータの範囲

const data_values = data_range.getValues();

// 取得したデータからmapを作成

const return_data = data_values.map(data_row => {

return {

}

});

// データを返す

return return_data;

}

// 取得したデータをJSON形式で返す

function doGet() {

const data = readData();

const response = ContentService.createTextOutput();

response.setMimeType(MimeType.JSON);

response.setContent(JSON.stringify(data));

return response;

}

プロジェクトを保存する

画面上部の「デプロイ」ボタンを押下し、「新しいデプロイ」を選択

デプロイの設定を行い、「デプロイ」ボタンを押下し、デプロイする

「種類の選択」の横の歯車アイコンから「ウェブアプリ」を選択

「説明」は任意で入力

「次のユーザーとして実行」は「自分」

「アクセスできるユーザー」は「全員」

アクセスを承認

アクセスの承認確認をされるので「アクセスを承認」ボタンを押下

画面の指示に従いアカウントを選択、許可して進める

完了

デプロイが完了すると、ウェブアプリのURLが表示される

URLにアクセスすると、期待したJSONデータが表示されていることを確認

App Scriptの更新

スプレッドシートのデータを増やしたので取得するデータの範囲を変更するなど、App Scriptの更新をする際の手順

スクリプトを適宜修正する

最初に実行する関数を選択

「デプロイ」ボタンを押下し、「デプロイを管理」を選択

「デプロイを管理」ダイアログ右上の「ペンマーク（編集）」を押下

「バージョン」で「新バージョン」を選択

「デプロイ」ボタンを押下