【初心者向け】M5StackのUIFlowからLINEに通知を送れるようにする方法【LINE Notify】

先日ハッカソンで初めてM5Stackを使いました！
そこで、LINEに通知が来るような仕組みを作ろうとして、初めてLINE Notifyを触ったので、忘れないうちにM5StackとLINE Notifyの繋ぎ方をまとめておこうと思います！

私のような、「LINE Notifyってなに？」というような方にも参考になれば嬉しいです！

#完成イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/67fde83a-d066-5b5e-3f20-5f879521809e.png)

このように、指定したLINEグループに通知がテキストと画像で通知が来るようなものを作ります。

#作り方
###LINE Notifyのアカウントを作る
[LINE Notifyのページ](https://notify-bot.line.me/ja/)を開いて、ログインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/599ee36d-9985-f5bb-61d7-997c2259006a.png)

###LINE Notifyを友だちに追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/1a981db2-f32a-9ab5-a576-7b5a9b656bdf.png)

QRコードがあるので、スマホで読み取って友だちに追加します！

###通知が届く用のLINEグループにLINE Notifyを招待する
[![Image from Gyazo](https://i.gyazo.com/c69de3865586791292c22f7720b3955e.png)](https://gyazo.com/c69de3865586791292c22f7720b3955e)

私は「SPステイサム」という名前のグループを新規で作りましたが、既存のLINEグループに招待することも可能です！

###IFTTTで、M5StackをトリガーにLINEでメッセージを受け取るプログラムを作る
連携できる主なサービスというところから「IFTTT」ボタンを押します。「IFTTT」とは、サービスとサービスを結びつける接着剤のようなものらしいです。
（ちなみにイフトと読むらしい、知らなかった。）
[![Image from Gyazo](https://i.gyazo.com/310e3ae6c62a4340dc840693dbd65a6e.png)](https://gyazo.com/310e3ae6c62a4340dc840693dbd65a6e)

すると、以下のようなぺージになるので、右上の「Create」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/72f60d7a-6418-fd5d-365b-98f5aaf10d12.png)

そして、「If This」という黒ボタンを押すと、applet（簡単なプログラム的なやつ）が作れます。
[![Image from Gyazo](https://i.gyazo.com/66a0f57a627154f101697bf58d083dfe.png)](https://gyazo.com/66a0f57a627154f101697bf58d083dfe)

まず、M5Stackで作ったWebサービスと結びつけるので「webhooks」と検索して選択します！
[![Image from Gyazo](https://i.gyazo.com/c4e007ad4a84a707932bc32f90e7fa5c.png)](https://gyazo.com/c4e007ad4a84a707932bc32f90e7fa5c)

「Recive a web request」と書かれたブロックを押します。
[![Image from Gyazo](https://i.gyazo.com/a3b6de2eb872eea404427616f0c14ea8.png)](https://gyazo.com/a3b6de2eb872eea404427616f0c14ea8)

お好みのEvent Nameを入力＆「Create trigger」ボタンを押したら、トリガー作成完了です！

[![Image from Gyazo](https://i.gyazo.com/e7fe3d3e367a58e45feb014c0dc2d89b.png)](https://gyazo.com/e7fe3d3e367a58e45feb014c0dc2d89b)

続いて、LINEに通知が来るような設定をします。
下の「Then That」ボタンを押します。
[![Image from Gyazo](https://i.gyazo.com/d1ebd4a2c7bdb7d15c5557ce240e2097.png)](https://gyazo.com/d1ebd4a2c7bdb7d15c5557ce240e2097)
サービスで「LINE」を検索して選択。
[![Image from Gyazo](https://i.gyazo.com/8ded44e85916286076d601ddcaa6b449.png)](https://gyazo.com/8ded44e85916286076d601ddcaa6b449)
「send a message」のブロックをぽちり。
[![Image from Gyazo](https://i.gyazo.com/97b73887eb32db45bcc25703aed3f60b.png)](https://gyazo.com/97b73887eb32db45bcc25703aed3f60b)
すると、このような設定画面が出てくると思います！
[![Image from Gyazo](https://i.gyazo.com/34989fd550d9f9accf7eb1bb0de89877.png)](https://gyazo.com/34989fd550d9f9accf7eb1bb0de89877)
▶__Recipient→__通知が来てほしいLINEグループを選択
▶__Message→__送られてくるメッセージ　グレースケールのValue1とかは変数になってて、M5Stackからテキストを代入できます。
▶__Photo URL→__テキストだけじゃなく、写真も送ってほしいときは、ここにイメージURLか変数を入れます。

私は以下のように設定しました！
[![Image from Gyazo](https://i.gyazo.com/80f87f1788a8412a84a3e653b2ca8a98.png)](https://gyazo.com/80f87f1788a8412a84a3e653b2ca8a98)

設定完了してボタンを押し進めると、以下のような画面になるので。
黒く囲んだWebhooksのアイコンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/69bb6ee6-de55-52ca-141c-7fe3527e8c36.png)
そして、右上の「Documentation」へ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/6007a741-96b1-a271-6bd5-bd7ef3487f74.png)
そこで、URLを取得することができます！
__黒丸で囲んだところに、自分で設定したEvent Name（ここではtest）を入力するのを忘れずに！__
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/fe80e76d-5958-56c7-2313-9d01e0fd77bc.png)

#UIFlowでM5StackとLINEを結びつける
さぁ！あと少しです！頑張りましょう！
UIFlowを開いて、お好みのイベントを作って
「高度なブロック」▶「Http」から画像のやつをドラッグします。
[![Image from Gyazo](https://i.gyazo.com/5cbdd7de0b3eaeeec99e254d785fa6b1.png)](https://gyazo.com/5cbdd7de0b3eaeeec99e254d785fa6b1)
今回、LINEに通知したいので、MethodはPOST。
そして、URLのところに、先ほど取得したURLを入力します！

Headersは特に触らず、Dataには、先ほどの変数をkeyに、挿入したいテキストをvalueに入力します。

※ここで地味に落とし穴が！
__変数のところでは「Value」ってVが大文字になってましたが、UIFlowでは「value」って小文字にしないとエラーでます！__

あと、key～～value～～のブロックは
下の黒丸で囲んだ＋ボタンを押すと出てきます。
（超絶わかりづらい）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/b287a2ad-fa09-c26e-2683-43b04f1f5b5a.png)

以上で設定は完了です！！！お疲れ様でした！

今回はM5Stackでしたが、IFTTTを使えば色々できそうだなという可能性が知れたのでとても良い勉強になりました！

#参考記事
▶[『LINE Notify』の最新導入事例から効果的な使い方まで、網羅的に解説します!](https://saichat.jp/line/notify/)

▶[LINE Notify を利用して UIFlow のプログラムで LINE に通知を送る（日本語テキストも送信） #M5Stack](https://qiita.com/youtoy/items/76586479c2d4c5893c5b#ifttt%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84%E5%AE%9F%E8%A3%85%E3%81%AE%E4%BE%8B)