暑い
2020年8月19日、暑い日が続いていますね！テレビやネットでは熱中症のニュースが連日報じられています。自宅にいても、温度と湿度の高さで熱中症になる可能性があるみたいです。
構成
構成図
BME280(温湿度・気圧センサモジュールキット)を使用してobnizで値を取得し、IFTTTを経由しSpreadSheetをデータベースの代わりにしてVue.jsでデータを受けとります。
SpreadSheetにデータ送る
こちらの記事を参考にさせていただきました
(爆速開発IoT遠隔センサーロガー: obnizからGoogle Spreadsheetにセンサー値を定期的に保存（環境構築不要！汎用性高）
API化する
SpreadSheetのシートのデータをJSONで取得するため以下の記事を参考にしました。
途中でつまずきましたが@UhRhythm さんに助けてもらいました。
できたのも
コード
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>現在の温度(°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で警告を通知するなど行ってみたいと思いました。