ほぼ全部入りなのにほとんどコーディングせず完成する超簡単室温監視システム（ハムスター用）

だいぶ暑くなってまいりまして、うちにおりますハムちゃんズもすこしへばり気味です。
ハムスターにとって快適な温度は20度～26度と言われていて、日本の夏は（冬も）苦手です。そんなハムちゃんに快適に過ごしてもらいたい！　まして、**熱中症になんて絶対にならない**ように室温（小屋温？）管理はしっかり行いたいところです。室温計はエアコンとかに備わってるよ？と思いがちですが、**我々の生活空間とハム小屋は意外と環境が異なる**もの。しっかり把握することが肝要です。そこで今回は**ハム小屋気温監視システム**をいろいろな既存サービスをつなぎ合わせることで「**ほとんどコーディングせず**」開発してみたいと思います。

<img width = "600" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/3634ec4b-9916-1a5b-1bb5-3ebdeba12f88.png">
##こんな感じになります
* ハム小屋の室温はobnizで計測します。写真はイメージ。ハムちゃんがガジガジしないようにケースを作らないとですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/69866f17-4b3c-1d3e-134f-eb0b25db1e1c.png)

* ハムちゃんと離れていても、ハム小屋の気温推移を確認できるWEBアプリケーション。obnizで取得した温度情報をクラウド上のGoogleスプレッドシートに保存し、それを表示します。
<IMG width = "400" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/dc41440a-57f7-61e1-48cf-2e9f7c73795b.png">

* ハム小屋の気温が閾値（今回は28℃）を超えるとDiscordにメッセージを発報することで危険をお知らせ。
<IMG width = "400" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/6cd47beb-e5d2-08ad-568b-c11d57a08702.png">

* システムがちゃんと作動していることをEmailで伝えます。Googleスプレッドシートに定期的に更新が入っていることを確認します。
<IMG width = "300" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/95b2927b-1926-9e52-3b5b-b5883171487f.png">

##各サービス達の役割分担
今回の開発コンセプト、**複数サービスをつなぎ合わせることで実現**に参加するサービス/デバイスたち。

|  | サービス/デバイス| 実現すること |
|:-:|:-:|:-|
|  A |  obniz | ハム小屋の室温を測定する  |
|  B | obnizサーバレスイベント  |  定期的にobnizを起動する。取得した室温をwebhookをつかってIFTTTへ連携 |
|  C |  IFTTT |  obnizサーバからwebhook（室温）を受け取り、Googleスプレッドシートへ連携 |
| D  |  GAS(Google Apps Script) |  スプレッドシートが更新されたことをトリガーとして、室温を判定し28℃以上であったらDiscordへメッセージを送信（webhook） |
|  E | netlify  | スプレッドシートの内容をWEBページとして公開  |
|  F |  IFTTT | スプレッドシートの更新をトリガーにEmailを送信  |

##全体構成図
複数システムを渡り歩いているので複雑に見えますが、**開発量は驚くほど少量**です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/776dfc5e-fc32-5d80-d490-15b35dcd30cd.png)



##A.obnizの設定、B.定期実行の設定、C.Googleスプレッドシート記録設定

こちら様の記事を参考にさせていただきました。
https://qiita.com/y-hira/items/de7e8d5c2e8e4c1c4acd
obnizライブラリの指定、IFTTTのWebhook Keyなどを変更しただけで動きました！
作成時点のobnizライブラリは以下の通り。

```javascript:obniz
<script src="https://unpkg.com/obniz@3.14.0/obniz.js"></script>
```

##D.GAS（Google Apps Script）の設定

obnizで取得された室温情報は、IFTTTを介してGoogleスプレッドシートに記録されます。この情報をもとに、閾値（28℃）を超えた場合はDiscordにメッセージを送ります。

スプレッドシートからデータを取得するパートは、こちら様の記事を参考にさせていただきました。
https://admin-it.xyz/gas/spreadsheet-eventtriger-mail/
Discord側で待ち受けているWebhookにメッセージをPOSTします。

**ポイント**はGoogle App Scriptを**実行するタイミング**です
GASでは、作成したスクリプトを実行するタイミングが選べます。**「トリガー」の設定**、これをうまく使います。
<IMG width = "500" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/764a00b7-b7cf-c83b-e5ec-782f433a8868.png">
今回はobnizから室温が送られてきたら閾値の判断をしたいので、
　**「スプレッドシート」が「更新されたら」**
作成したスクリプトを実行してもらいます。
<IMG width = "500" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/ca251e1f-a007-4967-efa7-0fc54a919fd5.png">

トリガーによって実行するスクリプトです 下のセクション▼を展開してください
<details><summary>discordFunction.gs</summary><div>

```javascript:discordFunction.gs
function discordFunction() {

 //シート内の全データを取得
  var sheet = SpreadsheetApp.getActiveSheet();
  var data = sheet.getDataRange().getValues();
 
 //変更されたセルを取得、また、セルの行数を取得して配列に対応できるように-1した変数を設定
  var targetCell = sheet.getActiveCell();
  var targetCellRow = targetCell.getRow()-1;

  var tempval;

  tempval = data[targetCellRow][2]  //温度が入っているセル＝３列目

  if (tempval > 26){
    // DiscordのWebhook URL
    const URL = 'https://discord.com/api/webhooks/XXXXXXXXXXXXXXXXXXXXXXXXXXXX';

    // POSTする中身
    tempval = tempval + "℃です！！！";
    const discordPayload = {
      'content': tempval,
    };

    // UrlFetchAppのオプション
    const params = {
      'method': 'POST',
      'contentType': 'application/json',
      'payload' : JSON.stringify(discordPayload),
    };
  
    // HTTPリクエスト送信
    const res = UrlFetchApp.fetch(URL, params);
  }
}
```
</div></details>


##E.グラフ（スプレッドシート）をWEBで参照する設定
こちら様の記事を参考にさせていただきました。
https://review-of-my-life.blogspot.com/2018/02/google-apps-scriptweb.html

公開用のURLを取得し、HTMLに埋め込みます
<img width="400" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/c14088b3-1313-47bb-e002-8efd58f091b2.png">


NetlifyというWEBサービスをつかって公開します。

https://app.netlify.com/



##F.スプレッドシート更新を検知してEmailする設定
IFTTTで設定します。https://ifttt.com/home
スプレッドシートに定期的に更新が入っていることを確認するだけの簡単なアプレットです。
GmailでSendyourselfという自分にメールするというサービスを使いました
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/27251c0a-d038-ef56-8dec-8cd16388bbf7.png">



**ほとんどコーディングせずに、真に必要な機能を実現することができました！**