chart.jsで自宅の温湿度を可視化してみた

#暑い
2020年8月19日、暑い日が続いていますね！テレビやネットでは熱中症のニュースが連日報じられています。自宅にいても、温度と湿度の高さで熱中症になる可能性があるみたいです。

#構成
##構成図
[![Image from Gyazo](https://i.gyazo.com/6b8a963b69ebaf36c40c60fe0fe0ca37.png)](https://gyazo.com/6b8a963b69ebaf36c40c60fe0fe0ca37)


BME280(温湿度・気圧センサモジュールキット)を使用してobnizで値を取得し、IFTTTを経由しSpreadSheetをデータベースの代わりにしてVue.jsでデータを受けとります。

#SpreadSheetにデータ送る
こちらの記事を参考にさせていただきました
[(爆速開発IoT遠隔センサーロガー: obnizからGoogle Spreadsheetにセンサー値を定期的に保存（環境構築不要！汎用性高）]
(https://qiita.com/y-hira/items/b8fe1268a12492bd865c)
[![Image from Gyazo](https://i.gyazo.com/0a0fea15cd4a806b56231cbc98371018.png)](https://gyazo.com/0a0fea15cd4a806b56231cbc98371018)

#API化する
SpreadSheetのシートのデータをJSONで取得するため以下の記事を参考にしました。

[【Vue.js】さ迷うハロオタがお誕生日カレンダーを作った]
(https://qiita.com/UhRhythm/items/d80a4a8d6ceeb82f29c1)

途中でつまずきましたが@UhRhythm さんに助けてもらいました。

#できたのも
[![Image from Gyazo](https://i.gyazo.com/2b4179c1c2ce0321a1f9364081e81451.png)](https://gyazo.com/2b4179c1c2ce0321a1f9364081e81451)

##コード
```index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>グラフ</title> 
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
<body onload="LoadProc();">
<div id="top">
  <h1 id="hoge">自宅環境モニター</h1>
  現在の時刻:
  <div id="DateTimeDisp"></div>
</div>
  
  <!-- <div class="chartWrapper" style="width:600px; position: relative; overflow-x: scroll;"> -->
  <div id="app" style="width:600px">
    <!-- <p><button v-on:click="displayGraph">更新</button></p> -->
    <div id="text">
      <div id="temperature">
        <p>現在の温度(&deg;C)</p>
        <h1>{{ last2 }}</h1>
      </div>
      <div id="temperature">
        <p>現在の湿度(%)</p>
        <h1>{{ humidity_now }}</h1>
      </div>
      <div id="temperature">
        <p>現在の気圧(Pa)</p>
        <h1>{{ pressure_now }}</h1>
      </div>

    </div>

    <canvas id="myChart"></canvas>
  </div>
</div>
  <script>
    var now = new Date();
    function LoadProc() {
      var target = document.getElementById("DateTimeDisp");

      var Year = now.getFullYear();
      var Month = now.getMonth()+1;
      var Date = now.getDate();
      var Hour = now.getHours();
      var Min = now.getMinutes();
      var Sec = now.getSeconds();

      target.innerHTML = Year + "年" + Month + "月" + Date + "日" + Hour + ":" + Min + ":" + Sec;
    }
    var app = new Vue({
      el: '#app',
      data: {
        labels : [],
        data: [],
        humidity: [],
        last2: null,
        humidity_now: null,
        pressure_now: null,
      },
      methods: {
        displayGraph: async function (event) {
          var ctx = document.getElementById('myChart').getContext('2d');
          var myChart = new Chart(ctx, {
            type: 'line',
          data: {
              labels: this.labels,
              datasets: [
                {
                  type: 'line',
                  label: '気温',
                  data: this.data,
                  borderColor: "rgba(255,0,0,1)",
                  backgroundColor: "rgba(0,0,0,0)",
                  id: "y-axis-1",
              },{
                type: 'line',
                label: '湿度',
                data: this.humidity,       //barデータのセット(VIEWSの合計)
                borderColor: "rgba(54,164,235,0.8)",
                backgroundColor: "rgba(54,164,235,0.5)",
                yAxisID: "y-axis-2",
              },
              ]
            },
            options: {
              responsive: true,
            scales: {
              yAxes: [
    {
      id: "y-axis-1",
      type: "linear",
      position: "left",
    },
    {
      id: "y-axis-2",
      type: "linear",
      position: "right",
    }
  ],
      xAxes: [
        //x軸
        {
          ticks: {
            minRotation: 40,   // 表示角度水平
            maxRotation: 45,   // 
            maxTicksLimit: 10  // 最大表示数
          },
        }
      ]
    }
    },
          
           } );
        }
      },
      mounted: function(){
      axios.get('https://script.google.com/macros/s/AKfycbzftk1ZJ_r64TEbqQmWmPGQX9g8jYjBUsU5N-Oni7QtvaLiVUE/exec').then(response =>{
        console.log(response.data.length);
        this.data = response.data.map(data=>data.temperature);
        this.humidity = response.data.map(data=>data.humidity);
        this.labels = response.data.map(data=>data.date);
        this.pressure = response.data.map(data=>data.pressure);
        console.log(this.labels);
        console.log(this.data);
        console.log(this.humidity);
        console.log(this.pressure);
        this.humidity_day = this.humidity.slice(-10,-1);
        console.log(this.humidity_day);
        this.displayGraph();
        this.last = this.labels.slice(-1)[0]; 
        this.last2 = this.data.slice(-1)[0];
        this.humidity = this.humidity.slice(-1)[0];
        this.humidity_now = Math.floor(this.humidity)
        this.data_day = this.data.slice(-10,-1);
        console.log(this.data_day);
        this.pressure = this.pressure.slice(-1)[0];
        this.pressure_now = Math.floor(this.pressure)

      })
    }
});
</script>
<link href="style.css" rel="stylesheet">
</body>

</html>
```
```style.css
#hoge{
    display: inline;
  }

#DateTimeDisp {
    display: inline;
}

#temperature {
    display: inline-block;
    color: #000;
    text-align: center;
    padding: 1% 5%;
    /* background-color: #99cc00; */
    margin: 10px;
}
```
#今後
期間指定を実装できずSpreadSheetのデータがすべて折れ線グラフに反映されてしまうので、改良したい。
たんぱくな作りになってしまったので、室温が30度を超えたら背景を赤くする、LINEBOTで警告を通知するなど行ってみたいと思いました。