GASでJSONをJavaScriptで読み込み
GASを使用すればGoogleスプレッドシートのシートのデータをJSON形式にできる。
さらにJavaScriptを使用すればJSONを読み込んで表示できます。
GASでシートの内容をJSONにする方法
まずGoogleスプレッドシートで適当な項目入りのデータが入ったシートを作成する。
次に以下のGoogle Apps Scriptで1行目以外を配列オブジェクトにして表示できるか確認。
function getData() {
const spreadsheet = SpreadsheetApp.getActiveSpreadsheet()
const sheet = spreadsheet.getActiveSheet()
const range = sheet.getDataRange().getValues().slice(1)
const values = range
const data = values.map(row => {
let col = 0
return {
id: row[col++],
title: row[col++],
}
})
console.log(data)
return data
}
うまくいけば実行ログに配列オブジェクトが表示される。
doGet()でJSON形式で配信
前述の方法でシートの内容を配列オブジェクトに変換できたが、これをJSON形式で配信してJavaScriptで読み込めるようにするには、先程のgetData()の結果をdoGet()でJSON形式に変換するコードを書く。
function doGet() {
const data = getData()
const response = ContentService.createTextOutput()
response.setMimeType(MimeType.JSON)
response.setContent(JSON.stringify(data))
return response
}
次に画面右上の「デプロイ」から「新しいデプロイ」を選択する。
デプロイの種類の選択は「ウェブアプリ」にしたあと
次のユーザーとして実行: 自分
アクセスできるユーザー: 全員
以上の設定をしてデプロイボタンを押す。
デプロイ後にJSONを読み込めるウェブアプリのURLが生成されるので、あとはこれをJavaScriptで読み込めば完了です。
JavaScriptのfetchで読み込む場合は以下のようになります。
const url = 'https://script.google.com/macros/s/AKfycbz2Xy0IKHVuzczTTVI1SF0xjIb032EfDBc1oZO8lI4WsUQLQMxLpUug_cRxp8H_eLyRDg/exec'
fetch(url)
.then((res) => res.json())
.then((data) => console.log(data))
GASのJSON取得は時間がかかる
GASのJSON取得は2秒ほど時間がかかるため、読み込み中はローディング画像を表示が必須です。
前回のデータが一時的に表示されても良いのであればlocalStorageに保存しておき、差分があれば表示させるようにすれば体感速度が上がるのでオススメです。
const url = 'https://script.google.com/macros/s/AKfycbz2Xy0IKHVuzczTTVI1SF0xjIb032EfDBc1oZO8lI4WsUQLQMxLpUug_cRxp8H_eLyRDg/exec'
const localData = localStorage.getItem('localData')
if (localData) {
console.log(JSON.parse(localData))
}
fetch(url)
.then((res) => res.json())
.then((data) => {
const dataStr = JSON.stringify(data)
if (dataStr !== localData) {
console.log(data)
localStorage.setItem('localData', dataStr)
}
})
