IFTTTでobnizとGoogleカレンダーを繋げて、お薬を飲む時間になったら旗を振ってくれるものを作ったよ。

こんにちは
今日はIFTTTを使用して、Googleカレンダーに指定した時間になったら、
obnizに繋げてあるモーターが稼働して、お薬を飲む時間を旗を振って教えてくれるものを作りました。

## 一旦完成したもの

https://twitter.com/nghrhtm1/status/1524259950041927680

## 作ろうと思った訳

**①お薬を飲む時間が自動でわかるようにしたい**
**②音でなく目でみてお薬を飲む時間に気づきたい**

私は毎日同じ時間にお薬を飲まないといけません。
「夜の23時に飲むぞ！」と決めていても大体時間がずれます。
（病院の先生からちゃんと毎日同じ時間に飲まないと意味ないからね！と言われている）

スマホを使って通知設定をすれば、音で分かっていいと思いますが、
アラーム音を下げていることもあり、大体気づきません。

**なのでデスクの壁に貼り付けて、目で見てわかる仕組みを作りました。**

## 使用したもの
今回はIFTTTを使用して自動通知できるようにしました。

https://ifttt.com/

* [obniz Board 1Y](https://akizukidenshi.com/catalog/g/gM-14930/)
* [サーボモーター](https://akizukidenshi.com/catalog/g/gM-08761/)
* [ジャンパーワイヤー](https://akizukidenshi.com/catalog/g/gC-05371/):3本
* [USB Type C ケーブル](https://akizukidenshi.com/catalog/g/gC-13563/):1つ

あとは日々使用しているGoogleカレンダーを使用してください。

## 事前に準備すること
* [obniz起動とWi-Fi設定](https://obniz.com/ja/doc/reference/board-1y/quick-start/)
* [obnizデバイスの登録](https://obniz.com/ja/doc/reference/cloud/device-management/registration)
* [Developer’s Console-obnizの登録](https://obniz.com/ja/console)のログイン
* [IFTTTの登録](https://ifttt.com/)


## 作成方法【Developer’s Console-obnizのアプリ開発設定】

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/eaa6d897-d295-a807-a263-d6ac9295a260.png" width="400" height="200">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/7bb17443-20fe-5b22-6882-195221f911e6.png" width="400" height="200">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/b20eda49-2527-d727-1d0c-7b00039d64aa.png" width="400" height="200">


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/b6686cf2-eabf-23c5-9df2-d95539307dfe.png" width="600" height="400">


**Webhookで実行**にチェックをつけてください。(その他の変更箇所はありません。)
スクロールすると**設定を更新**というところがあるので、クリックしてください。

更新されると左側の**開発**→**アプリ開発**を選択すると先ほど作ったものが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/1ec507f5-d36c-0d16-109e-a7531a8b8cda.png" width="600" height="400">




## 作成方法【プログラムの設定】

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/f8307207-f109-7121-450e-e5089a11d095.png" width="600" height="400">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/e61d816d-89ea-b108-a23a-29c907e0ff2e.png" width="600" height="400">

このような画面になるのでコードを入力してください。


<details><summary>実際に作成したコードはこちら</summary>

```html

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script
      src="https://unpkg.com/obniz@3.5.0/obniz.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="obniz-debug"></div>

    <button id="up">Up</button>
    <button id="down">Down</button>

    <script>
      let obniz = new Obniz("OBNIZ_ID_HERE");
      obniz.onconnect = async function() {
        let servo = obniz.wired("ServoMotor", { gnd: 0, vcc: 1, signal: 2 });
        servo.angle(90);
        setTimeout(function(){
          servo.angle(180);
　　　　 },1000);
　　　　 servo.angle(90) 

        $("#down").click(function() {
          servo.angle(180);
        });
      };

      obniz.onclose = async function() {
        $("#up").off("click");
        $("#down").off("click");
      };
    </script>
  </body>
</html>

```
</details>

:::note info
17行目の("OBNIZ_ID_HERE")のところは変更せず、そのまま使用してください。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/2a90cee1-04a8-0947-803e-b9a4681524c1.png" width="600" height="400">

実際に起動するか**実行**をクリックしてください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/198be529-0609-c5ac-2b72-72298a18b645.png" width="400" height="400">

入力後は**ファイル**→**保存**をクリックしてください。


## WebhookのURLの取得方法

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/2d7feb81-d49d-8c45-f903-397156c16ebc.png" width="400" height="400">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/e0d45a43-bfa7-fcd2-c09f-9c4f6657c4ae.png" width="600" height="400">

↑アプリを開くの横にある**▼**をクリック

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/994ef8a4-6336-7bd3-93c1-781fe5d11731.png" width="400" height="400">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/94843182-cac2-5e3a-1598-e2d138eb3f3e.png" width="600" height="400">

↑開いたページをスクロールすると**クラウド実行 起動きっかけ**という欄があり、
そこでWebhookのURLが取得できます。

## IFTTTと接続

Googleカレンダーの**Any event starts**とWebhookの**Make a web request**を連携させます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/31077772-6bd0-f95a-e3eb-c0311db1cca9.png" width="400" height="200">


**GoogleカレンダーのAny event startの設定**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/09f59d7f-005d-a3c7-cf17-7fdddacf3340.png" width="400" height="400">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/be0598f3-427c-852f-b115-ef1875a5774b.png" width="400" height="400">


**WebhookのMake a web requestの設定**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/69d4ac07-2540-3582-947d-55bc0347e36d.png" width="400" height="400">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/acbdeb1d-b813-cc13-c335-5e3a48a3fa1a.png" width="400" height="400">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/280cfc32-0482-dfd7-3b6a-55217b5c0b4d.png" width="400" height="400">
↑**Bodyのところに{"created":true}を入力してください。**
**Update action**をクリックすると元のページに戻ります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/5bfd61eb-2aec-8802-b509-a1bc62ed2856.png" width="400" height="400">

↑最後に**Update**をクリックして、
Googleカレンダーに設定した時間になったらモーターが動けば完了です。



## 作ってみてわかったこと

**Googleカレンダーの指定時間からobniz起動までに10分くらい時差があります。**
**そして、使用すればするほど、時差が大きくなります。**
（なんでやねーん！）

これでは解決したかった毎日同じ時間にお薬を飲むことが出来ない可能性がある・・・

obniz スターターガイドにある[WebhookでIFTTTと連携](https://obniz.com/ja/doc/guides/obniz-starter-guide/serverless/webhook)の項目では、
スマートフォンのリマインダー(iPhone などにあるタスク管理機能)で実施されてましたが、
私はうまく接続できなかったので、今回Googleカレンダーで実施しました。

Googleカレンダー以外の機能を使って再度挑戦してみたいと思います。


## 改善したいこと
**もっと旗をフリフリしたい！**
さすがに1回旗を振られただけでは気づかないこともあるので、
10往復くらい旗を振ってほしいです。

どうやって設定するのか分からなかったので、
分かる方、ぜひとも教えてください！！！！

https://qiita.com/NagaharaHitomi/questions/b5ce550cf89b8d786b93



## 最後に
obnizスタートガイドを参考にしながら、実装してみましたが、
WebhookURLなど初心者の私にはどこに記載されているのかわからず、
あっちこっち探し回りましたので、誰でも使用しやすいように記事を書きました。

誰かの参考になればいいなと思っています。

最後まで読んでいただきありがとうございました。