趣味の開発ノート

ITの学習やプログラミング・ノーコードアプリ開発のことなど。

【UIFlow】M5StickとIFTTTでボタンを押すとLINEに通知する仕組みを作った

M5Stackシリーズについて学習中。

年末にUIFlowというビジュアルプログラミング開発を学び始めて、まだ1週間足らずですがなかなかハマってしまい、大晦日にはこんなことをして遊んでいました。

nouka-it.hatenablog.com

今回は、自室からから少し離れたリビングにいる家族に通知がいくような仕組みが欲しくて、試しに制作してみたモノを紹介します。

制作したモノ

M5StickCのボタンを利用して、ボタンを押したらLINEグループにLINE Notifyで通知が飛ぶ!というとてもシンプルなモノです。

本体の画面下部にあるボタンを押すと…。

本体の上部のLEDが点灯します。これは通信が成功した証拠です。

実際に家族で共有しているLINEグループを見てみると、事前に決めておいたテキストが飛んできます。

使っている機器と技術

バイスにはM5StickC Plusを使っています。

これは開発ボードとボタンやディスプレイ、保護ケースなどが一体となった小さなIoTプロトタイピング向けのデバイスです。

たとえば今回のような「ボタンを押すと動く」ような仕組みを、このデバイス1つで開発できるとても便利なモノです。

通信には自宅のWi-Fiを使っており、ボタンを押すとLINE Notifyにより「指定のLINEグループにメッセージを送る」というような処理が行われます。

notify-bot.line.me

このデバイスとLINE Notifyを繋げる部分はIFTTTを使っています。

IFTTTはさまざまなWebサービスを繋げてくれるノーコードツールで、今回のケースでは「ボタンを押すとIFTTTのwebhookにリクエストを送る」「リクエストを受け取ったらLINE Notifyによりメッセージを送る」という処理を実現しています。

ifttt.com

M5StickCの開発環境は、冒頭にも触れたUIFlowによるビジュアルプログラミングで行っています。

制作の流れ

今回はすべてノーコードで実装。時間も2時間ぐらいでとてもシンプルに作ることができました。

実際に作業する部分はIFTTTのアプリ作成と、UIFlowを使ったプログラミングだけになります。

IFTTTでアプリを作成

まず、IFTTTでアプリを作成します。以下のように設定していきます。

  • ifに「webhook」を指定
  • thatに「LINE notify」で送信するラインのグループを指定

アプリを作成するとwebhook URLが生成されます。そして「そのURLにアクセスがあると、LINEに送信する」というように、webhookをトリガーにサービス同士を繋げてくれるような仕組みが実現できる、という感じです。

UIFlowでプログラムを作成

こんなプログラムを作りました。

まずボタンAが押された時、さきほどのwebhook URLへgetリクエストを送信します。

このとき、M5StickCに内蔵されているLEDが光ることで、リクエストが成功したか失敗したかを通知してくれるようにしています。

「成功時はLEDを3秒点灯」「失敗時はLEDを0.5秒間隔で3回点灯」というようにしました。

画面は真っ黒だと味気ないので、ラベル(テキスト)とイメージ画像をこんな感じに配置。

以上です。

考えてるコト

今回は通信先へはLINEを使っていますが、実際にはもっと別のわかりやすい通知方法をとりたいなーと考えています。

最初のアイデアは「ボタンを押すとリビングのAlexaがしゃべってくれる」というもの。ただこれ、ちょっと調べた感じだと手軽にはできなさそうな気がしています。

他には、もう1つのM5StickCを用意して「ボタンを押すとリビングにあるもう1つのM5StickCが音を鳴らしてくれる」というアイデア。これは、ちょっと調べきれてないのですがどうなんですかね?

…そんな感じで、手軽に実装できてわかりやすい通知方法を探している、というような段階です。

おわりに

簡単にですが、ボタンを押すと離れたところにいる家族へ通知する仕組みを作ることができました!

IFTTTはたまにAlexa連携やGoogleスプレッドシートと繋げて通知してくれるような用途で使ったりしていましたが、IoT開発を絡めたものは初めてでした。めちゃくちゃ便利ですね。

また引き続き触ってみたいと思います。