obnizプログラミングでM5Stick C洗濯通知マシーンを作ろう！

# M5Stick Cをobnizコードでプログラミングして洗濯物を効率的に回収しよう！！

皆様　初めまして。
突然ですが、皆様は人生で1度は

**雨の日に洗濯物をダメにしてしまった経験( ；∀；)**

があると思います。
これ、**もし洗濯物が乾いたときにさっさと取り込んでおければ回避できた**はずですよね？？
「でも、洗濯物がいつ乾くのかわからないし…」って思ってませんか？？
そんな悩みを一発解決できる方法があるんです！！
そう！
今回は
**”M5Stick Cを使って、洗濯物が乾いたかを判別できるモジュール”**を簡単に作っていこうと思います！
(題名回収ドヤぁ)
![S__19161099.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/d4558446-6440-d56d-034f-4a1daf5855b8.jpeg)


#用意するものと準備
今回必要な準備等は以下の通りです。

・LINEのインストールとLINE Notifyを友達追加
・IFTTTをインストール
・M5Stick C(obniz OS入り)
→もし、obnizOSを消してしまった場合、以下の公式の方法に沿ってやってもらえると幸いです。
(個人的にはpipの方法がおすすめです。)
[公式　obniz OS インストール方法](https://obniz.io/ja/doc/obnizos/os_install)
・USB-Type_Cコード
・市販のスマホ充電用バッテリー
・湿度センサーDHT12

物のほうはご購入いただければよいのですが、ソフトの準備が意外と難しいと思う人もいると思います。簡単にですが一緒にセットアップしましょう。

##1.LINEのインストールとLINE Notifyの友達追加

以下のリンクからSNSアプリケーションLINEをインストールしましょう。アカウントを登録する必要があるため、電話番号と暗証番号、メールアドレスなどが必要です。電話番号は1つにつき1アカウントまで作成できますので、ご留意ください。もしわからなければ**「LINE　インストール方法」**
で検索してみましょう。
→[LINEのホームページへ行ってインストールする](https://line.me/ja/)

LINEの初期設定が終われば、次は「LINE Notify」を友達追加します。この友達追加もわからなければ検索していただければわかりやすいサイトが多くございます。

##2.IFTTTのインストールと設定
そもそも**「IFTTT」**とは何？？という方へ、簡潔に紹介いたします。
「IFTTT」は「If That Then That 」の頭文字をとったものです。そのまんま和訳すると
**「もし(If)　それなら(That)　そしたら(Then)　そうする(That)」**
です。要するに、指定したことが発生したら決められた動作をしてくれるアプリです。
具体的な用例を紹介しますと

**「Twitterでメンション付きのリプライをもらったら、LINEに通知してくれる。」
「アレクサが反応したら外出中でもLINEに通知してくれる」**

など、ここでは挙げきれないほどの用例があります。
以上で挙げた例を見ていただいたうえで注目していただきたいのは、
　　　　　　　　　**”異なるアプリや物を提携している！！！！！”**
ということです。IFTTTにアカウント登録しておけば簡単にこんな感じの提携ができちゃうんです。
このようなサービスが無料で使えるのですから使わない手はないですよね？？

では、以下のリンクよりIFTTTをインストール、そしてアカウント登録しましょう。
→[Google Store＿IFTTT](https://play.google.com/store/apps/details?id=com.ifttt.ifttt&hl=ja)

Emailとパスワードの設定をすれば簡単にアカウント登録できます。
ここで、IFTTTを開いてすぐにお気づきの方もいらっしゃるとは思いますが、IFTTTは既存のレシピを使えば自分で作らずともさまざまなもの同士で提携が行えます。しかし、今後自分独自のレシピを作ろうと思ったときにわからなくなってしまうので、筆者の備忘録ついでにお伝えしたいと思います。一緒にやってみてください。

##### (１)．IFTTTで「Create」を開きます。
右上の自分のアイコンをクリックすると、以下のメニューリストが出てきます。その中から「Create」をクリックしてください。
<img width="550" alt="Fig.1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/ec0c8272-098d-389a-40f5-062e48613099.jpeg">


##### (２)．IFTTTで「Webhook」と「LINE Notify」を繋ぐ

(1)のあとは以下の画面に飛びます。ここから流れに沿って行きます。
**①**まずは薄いグレーになっている**「This」**をクリックしてください。
<img width="550" alt="Fig.2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/ec557ea3-0d33-b032-d798-2142a2dfad6b.jpeg">

**②**すると検索の画面に飛びますから、まずは提携するアプリの1つ目を設定します。
「Webhooks」を検索して、以下の画面になったら青いアイコンをクリックしましょう。
<img width="550" alt="Fig.3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/37f676c7-9962-d997-a23b-7fa206e9c89f.jpeg">

**③**次は「That」に当てはまる提携アプリの設定です。今は以下の画面になっていると思いますので、薄いグレーになっている「That」をクリックしましょう。
<img width="550" alt="S__19128329.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/d2d14e39-5083-daf7-d44e-8a297df5aedd.jpeg">


**④**　②と同様に以下に示すようにChoose action service の下の欄でLINEを検索してクリックします。これで「Webhooks」と「LINE」の提携を設定できました！
<img width="550" alt="S__19128330.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/0251b8a0-6906-8000-4de9-329d644c3ffe.jpeg">


**⑤**LINEで何をさせるかの設定です。メッセージ内容は「Message」欄の中に記載します。
今回は自動で設定されていますが使うのはvalue1のみなのでそれ以外は消してしまいましょう。このままFinishで終わります。
<img width="550" alt="S__19128331.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/aa4ab6a1-c4e6-f1c5-070e-32ca224bfe8a.jpeg">

　　　　
**⑥**最後はこのレシピの名前等を最後に登録します。この辺は各自の自由に作ってください。



#### (３)．レシピのリンクを探そう！！

以上が終わりましたら、Homeに戻ります。提携したWebhookのアイコンがあるとおもうのでクリックしてみてください。
以下のような画面ができたと思います。その中から、**「Document」**をクリックしてみてください。
<img width="550" alt="S__19128333.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/c3bcc763-24f1-5e10-c7de-f0ca0fdc82f7.jpeg">



以下の画像が出てくると思います。
<img width="550" alt="S__19128335.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/2989ffae-491b-47ba-d2c0-7fe62d71864b.jpeg">

一番上の**「Your key is:」**の横にあなたの作ったレシピのURLがありますから、**コピーしてどこかにメモっておいてください。**あとで使います。

ちなみに、上の画面にて、[event]と書いてあるところにあなたが定めたレシピ名を、その下の四角枠に何か適当な文字を入力して一番下の「Test it」をクリックすると通知ができるかどうか確かめることができます。
もしここでうまくいかない場合は

・通信環境が安定しているか
・レシピ名を間違っていないか
・登録した情報が間違えてないか

確かめてみてください。

さて！ここまでで基本的なソフトの設定は終わりです。次の章から、「M5Stick C」をもちいてのプログラミングです。

#　M5Stick Cにobnizプログラミングをしていこう！ 

さて、ここまでくるとあとは簡単です。
今回使うM5Stick CはすでにobnizOSがインストールされているものとします。M5Stickを開発するために**「Arduino IDE」**などで書き込んでしまうと**obniz OSは消えてしまう**ので注意です。

では、「obniz」のオンラインエディタを検索してひらいてください。
と、いいたいですがまずプログラミングする前に、
ここでご自身の持っている**M5Stick Cのobniz_IDを調べておかねばなりません。**これにはteraterm等を用いると簡単です。
(teratermのインストールは今回省きます。)

とにもかくにも、ここでM5Stick CのWi-Fi設定ができます。
###[設定方法]
①M5Stick Cをパソコンと接続させます。②teratermを開き、シリアルの枠にチェックを入れます。
③M5Stick Cの両サイドの出っ張りを7秒間押し続けましょう。これで電源Onの状態になります。teratermに文字が表示されたら電源Onの目印です。
④この時obniz IDの情報が分かります。また、使うWi-Fiの設定ができます。(以下の画像参照)
<img width="550" alt="S__19161100.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/a88625eb-6242-a237-be72-b12bc4497771.jpeg">

ここまで行ったら、いざ！プログラミングです。
今回使う
ソースコードを以下に貼ります。

```washer.js

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>湿度センサーを使って洗濯物の乾きを知る</title>
    <script src="https://unpkg.com/obniz@3.3.0/obniz.js" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body> 

    <div id="obniz-debug"></div>

    <script>
      let ifttt_event = "ここにあなたのレシピ名を入力してください";
      let ifttt_secret_key = "ここにあなたのレシピURLを貼ってください";


      let obniz = new Obniz("ここにobniz idを入力してください");
      obniz.onconnect = async function(){
        //センシング
        let device = obniz.wired("DHT12",{scl:26,sda:0});
        let data = await　device.getHumdWait();
        console.log(data+"%");


        //送信データを作成
        var formData = new FormData();

        if(data<34.5){
          formData.append('value1',"現在の湿度は"+ data + "% です。もう乾いています。" );
        }
        else if(data<40){
          formData.append('value1',"現在の湿度は"+ data + "% です。あと少しでかわきそうです。" );
        }
        else{
          formData.append('value1',"現在の湿度は"+ data + "% です。まだ乾きそうにないです。" );  
        }


        //IFTTTリクエスト
        await fetch(`https://maker.ifttt.com/trigger/${ifttt_event}/with/key/${ifttt_secret_key}`, {
          method: 'POST',
          mode: "no-cors",
          body: formData
        }).then(()=>console.log("success")).catch((error) => console.log(error));

        //10分ごとに起動するように
        let dt = new Date();
        dt.setMinutes(Math.floor(dt.getMinutes()/10)*10+10,0,0);
      }

      obniz.onclose = async () =>{
        if(typeof done === "function"){
          done();
        }
      }
    </script>
  </body>
</html>
```

上のコードをコピーアンドペーストしたら、ご自身で定めたレシピ名等の情報を上のコードに入力して、完成です！！乾いたとみなす湿度のボーダーライン(閾値)は上のコードでいう[34.5]や[40]の数字を変えていただくことで調整できます。

M5Stick Cとバッテリーを繋ぎ、M5Stick Cの先端に湿度センサーを取り付けます。この状態でこのプログラムを実行します。ついでなのでM5Stickに付属のベルトを使ってバッテリーと固定させた後、ハンガーにかけてみましょう。以下の画像のような感じですかね。

<img width="300" alt="S__19128336.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/eea0cd4c-6775-4d49-11c0-f0dddcbea69f.jpeg">




M5Stick Cの電源がついていればパソコン側のobnizコンソール画面に湿度[%]が表示されて、あなたのLINEには乾きそうかどうかの通知が届いているはずです。

以下のようなトーク画面になっていたら成功です。
<img width="350" alt="S__19128337.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/9eae6a49-e2d7-ce43-9e43-995149e58d44.jpeg">

<img width="600" alt="S__19161098.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508403/f26f9d6a-4e4a-a961-778c-bd8b49ac5336.jpeg">



これであなたも洗濯物で困ることが減りそうですね(^O^)

今回の作成方法では見た目はあまり良くないですが、立派に動くものが短時間でできました！見た目にこだわる方はよりインスタ映えのする洗濯通知機を作ってみてはいかがでしょう？？3Dプリンターを用いてみるのも良し、100円ショップの小道具を使ってケースを作ってみたりしても面白いと思います。

では！また次の記事でお会いしましょう。