10
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

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

#完成イメージ
image.png

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

#作り方
###LINE Notifyのアカウントを作る
LINE Notifyのページを開いて、ログインします。
image.png

###LINE Notifyを友だちに追加する
image.png

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

###通知が届く用のLINEグループにLINE Notifyを招待する
Image from Gyazo

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

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

すると、以下のようなぺージになるので、右上の「Create」を押します。
image.png

そして、「If This」という黒ボタンを押すと、applet(簡単なプログラム的なやつ)が作れます。
Image from Gyazo

まず、M5Stackで作ったWebサービスと結びつけるので「webhooks」と検索して選択します!
Image from Gyazo

「Recive a web request」と書かれたブロックを押します。
Image from Gyazo

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

Image from Gyazo

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

私は以下のように設定しました!
Image from Gyazo

設定完了してボタンを押し進めると、以下のような画面になるので。
黒く囲んだWebhooksのアイコンを押します。
image.png
そして、右上の「Documentation」へ!
image.png
そこで、URLを取得することができます!
黒丸で囲んだところに、自分で設定したEvent Name(ここではtest)を入力するのを忘れずに!
image.png

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

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

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

あと、key~~value~~のブロックは
下の黒丸で囲んだ+ボタンを押すと出てきます。
(超絶わかりづらい)
image.png

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

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

#参考記事
『LINE Notify』の最新導入事例から効果的な使い方まで、網羅的に解説します!

LINE Notify を利用して UIFlow のプログラムで LINE に通知を送る(日本語テキストも送信) #M5Stack

10
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?