Switchbotで温度・湿度を測り、Googleスプレッドシートに記録してWEBに埋め込む方法

function doGet(e) {

  let responseText;
  let out = ContentService.createTextOutput();

  const sheetName = e.parameter.sheet　　//シート名
  const rows = e.parameter.rows　　　　 //取得データ数

  if (!sheetName) return;
  if (!rows) return;
  const sh = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName)

  let data

  //範囲指定がなければすべてのデータを取得する
  if (sh.getLastRow() - rows > 1) {
    data = sh.getRange(sh.getLastRow() - rows, 1, sh.getLastRow(), sh.getLastColumn()).getValues()
  } else {
    data = sh.getRange(1, 1, sh.getLastRow(), sh.getLastColumn()).getValues()
  }

  //1列目にデータが無いデータは除外
  data = data.filter(elm => elm[0] != "")

  let value = [];
  data.forEach((row) => {
    value.push({"time":row[2], "temp":row[3]});
  });

  let result = { data: value }
  let callback = e.parameter.callback;

  if (callback) {
    console.log(callback)
    responseText = callback + "(" + JSON.stringify(result) + ")";
    //Mime Typeをapplication/javascriptに設定
    out.setMimeType(ContentService.MimeType.JAVASCRIPT);

  } else {
    responseText = JSON.stringify(result);
    //Mime Typeをapplication/jsonに設定
    out.setMimeType(ContentService.MimeType.JSON);
  }

  out.setContent(responseText);
  return out;
}

function getJSON_SwitchBotHubMini() {

  // トークンを設定(直接書くのはセキュリティ的によろしくないので、プロジェクトの設定からスクリプトプロパティで設定しておく)
  var headers = { "Authorization": PropertiesService.getScriptProperties().getProperty("token") };

  var options = {
    "headers": headers,
  }

  // 取得したい温湿度デバイスの配列
  var deviceList = [];

  // デバイスの名前とIDを動的に取得する場合（APIコストが毎度かかるのですべきではない）
  // var url1 = "https://api.switch-bot.com/v1.0/devices"; 
  // var response = UrlFetchApp.fetch(url1,options);
  // var json=JSON.parse(response.getContentText());
  // var deviceList = [];
  // for(i=0;i<json['body']['deviceList'].length;i++){
  //   if (json['body']['deviceList'][i]["deviceType"] == "Meter"){
  //     deviceList.push({ "name": json['body']['deviceList'][i].deviceName, "id": json['body']['deviceList'][i].deviceId }); 
  //   }
  // }

  // デバイス名とデバイスIDを事前に調べて入れる場合
  deviceList.push({ "name": "温湿度計 ルーフバルコニー", "id": 【デバイスのID名１】 });
  deviceList.push({ "name": "温湿度計 ベランダ", "id": 【デバイスのID名２】 });

  //デバイスの数だけデータの取得を繰り返し
  deviceList.forEach((deviceID) => {
    var url2 = "https://api.switch-bot.com/v1.0/devices/" + deviceID.id + "/status";
    var data = UrlFetchApp.fetch(url2, options);
    var datajson = JSON.parse(data.getContentText());
    var temp = datajson['body']['temperature']
    var rhumidity = datajson['body']['humidity']

    var date = new Date();

    // 書き込むシート名は「yyyy_デバイスID」、書き込まれる行数は、5分単位で1年で288 * 365 = 105120行になり、シートの最大行以内。
    var sheet = set_sheet(Utilities.formatDate(date, 'JST', 'yyyy') + "_" + deviceID.id)

    // データ入力
    sheet.appendRow([deviceID.name, deviceID.id, date, temp, rhumidity]);
  });
}

// シートが存在しなければシート作成
function set_sheet(name) {
  //同じ名前のシートがなければ作成
  var sheet = SpreadsheetApp.getActive().getSheetByName(name)
  if (sheet)
    return sheet

  sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet();
  sheet.setName(name);
  return sheet;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/ja.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>

<canvas id="myChart1"></canvas>
<canvas id="myChart2"></canvas>

async function fetchAsync(url, id, label, color) {

  try {
    const response = await fetch(url);
    if (response.status !== 200) {
      // 200以外ならばエラーメッセージを投げる
      throw `response.status = ${response.status}, response.statusText = ${response.statusText}`;
    }

    const jsondata = await response.json();

    let labels = [];
    let values = [];
    for (var item in jsondata.data) {
      labels.push(jsondata.data[item].time);
      values.push(jsondata.data[item].temp);
    }

    const ctx = document.getElementById(id);

    new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: label,
          data: values,
          borderColor: color,
          pointStyle: 'circle',
          pointRadius: 2,
        }]
      },
      options: {
        plugins: {
          legend: {
            display: true
          }
        },
        scales: {
          x: {
            scaleLabel: {
              display: true,
              labelString: '時間'
            },
            type: 'time',
            time: {
              parser: 'YYYY-MM-DDTHH:mm:ss.SSSZ',
              unit: 'hour',
              stepSize: 1,
              displayFormats: {
                'hour': 'MM/DD H時'
              }
            }
          },
          y: {
            min: -10,
            max: 50,
            grid: {
              color: function (context) {
                if (context.tick.value > 0) {
                  return '#E5E5E5';
                } else if (context.tick.value < 0) {
                  return '#E5E5E5';
                }
                return '#000000';
              },
            },
          }
        }
      }
    });
  }
  catch (err) {
    console.log("err: " + err);
  }
}
var dt = new Date();
var y = dt.getFullYear();
fetchAsync('https://script.google.com/macros/s/スプレッドシートのID/exec?sheet=' + y + '_【デバイスのID名１】&rows=288', 'myChart1', 'ルーフバルコニー温度', 'rgba(0, 0, 255, 0.5)');
fetchAsync('https://script.google.com/macros/s/スプレッドシートのID/exec?sheet=' + y + '_【デバイスのID名２】&rows=288', 'myChart2', 'ベランダ温度', 'rgba(255, 0, 0, 0.5)');