UIFlowを使って、IFTTT経由でLINE Notifyと連携してメッセージを送る
2024/03/31追記
この記事で使用しているIFTTTのWebhooksは、2024 年 2 月 15 日に、IFTTTのPro版に移行してしてしまい、無料では使用できなくなりました。
IFTTTとLINE Notityとは？
IFTTTというサービスがあります。IFTTTは「イフト」と読み「IF This Then That」の頭文字をとってサービス名がつけられています。いろんなWeb上のサービスをきっかけ（If This）として他サービスを実行（Then That）するサービスです。調べたら2010年サービス開始だそうで、わりと昔からあるサービスです。（でも個人的にはIFTTTが2010年かぁと戦慄していました）
自分は、Web上のサービスをスマートスピーカーと連動させるときにその存在を知ったのですが、しばらくはほったらかしにしてました。IFTTTがなくてもスマートスピーカーでできることが増えてきて不便を感じなかったからすね。
無料だと2つの「Applet」と呼ばれる連携を設定できます。Proだと20個かな？
さて、IFTTTと連携できるサービスの中に「LINE Notify」というものがあります。LINEが用意した公式アカウント「LINE Notify」からIFTT経由で通知を送ることができます。
「LINE Notify」では１ユーザー当たり100個の連携先を設定でき、１個のサービスから１時間に1000回呼び出せるようです。
Web上に、これら（IFTTTとLINE Notity）を使って、UIFlowからメッセージを送る事例がいくつかあったので、まとめておきます。参考にしたのは以下のサイトです。
何ができるの？
例えば、M5製品を使用して、気温、湿度などを測って、一定の基準で熱中症警告を送る、とか、土壌の水分量を測って、乾いていたら警告するとか、問題解決で、メッセージを遅れたら便利な場面はたくさんあると思います。
メッセージを送ると便利なのは、「それがどのタイミングで起こるのか決まっていない」ような場面で、継続観察でデータを蓄積していく、みたいのはGoogleスプレッドシートが向いていると思います。Googleスプレッドシートは以前記事にしました。
なぜ記事にしようと思ったか
単純に自分がやってみたときに、いくつかつまずいた部分があったからです。つまずいたというか、動作確認していく中で、UIFlow（M5製品） → IFTTT → LINE Notityでのサービス間の仕様の違いなどで細かい動作に違いが出てきたため、「これは書き留めておかないと忘れる」と思って書き留めることにしました。なお、2023/08/24時点での仕様ですので、各サービス間で仕様変更があった場合は動作が変わる可能性があります。
まずはLINE Notityの設定
スマホのLINEから、「設定」→「アカウント」に行って、「メールアドレス」と「パスワード」を設定してください。
すると、LINE Notifyにログインできるようになります。
LINE NotifyをQRコードを使って友だち追加します
LINE Notifyを、LINE Notifyが発言するグループに追加します。
このLINE Notifyを加えるグループは新規に作っても、既存のグループにLINE Notifyを加えても構いません。
私は、「LINE IoT」というグループを作成してLINE Notifyを追加しておきました。
IFTTTにログインをしてアプレットの作成
アカウントの作成は割愛します。
アカウントを作成してIFTTTにログインをします。（Apple, Facebook, Googleアカウントでシングルサインオンでもいいと思います）
「Create」（作成）から「If This」（もし～なら）に「Add」（追加）、「Webhooks」で、「Recieve a web request」（webリクエストを受け取ったとき）を追加、「EventName」（イベント名）を決めます。
イベント名は「M5toLINE」にしました。
「Create trigger」（トリガを作成）を押して作成します。
次に「Then That」（そしたら何をするか）をadd（追加）します。
LINEを選び、「Send Message」（メッセージを送る）を選びます。
「Connect Service」（サービスに接続）画面になります。「Connect」（接続）を押すと、別ウィンドウが開いてログイン画面になりますが、先程、LINE Notifyにログインをしておいたので、ログインはスキップされます。（ログイン画面が出たらログインしてください）
「同意して連携する」を押して、IFTTTとの連携をしてください。
連携に同意したら、送信するメッセージの作成画面になります。
「LINE account」は連携したアカウントが自動で入っていると思います。
「Recipient」はLINE Notifyを追加しておいたグループにしておきます。
私の場合は「LINE IoT」ですね。
「Message」は好きなメッセージを入れてください。このとき、「Value1」「Value2」「Value3」の部分に、IFTTT経由で送られた変数が入ります。日本語も使えます。
「Photo URL」で、任意の画像も送れるようです（やってない）。
全部入力したら、「Create action」（アクションを作成）を押し、出てきた画面で「Finish」（完了）を押して完了です。
WebhooksのURLの取得
UIFlow側の設定をするために、UIFlowからWebhooksにアクセスするためのURLを取得しておきましょう。
IFTTTのトップから、右上「アカウント」→「My service」から、「Webhooks」を探します。
Webhooksの「Documentation」より、「Your Key is …」というページが表示できますので、「To trigger an Event with 3 JSON values」の「Make a POST or GET web request to:」の後の文字列の中の {event} に、さっきWebhooksで設定したイベント名「M5toLINE」を入れてURLをコピーします。
なお、このとき、URL文字列の中にイベント名を入れた状態で、「To trigger an Event with 3 JSON values」の項目の中にある「Test It」を押すと、すでに連携は完了しているため、LINEにメッセージが送られます。「With an optional JSON body of:」にValue1～Value3までの変数を入れるとそれでメッセージが送れます。なお、この時点では、日本語も通ります。
UIFlow側の設定
UIFlow側のプログラムは以下のとおりです。
試しにStickC Plusを使用しました。画面の設定はラベル１つと円形１つです。
プログラムは以下の通り。
「高度なブロック」→「HTTP」から、HTTPリクエストのブロックを使用します。「メソッド」は「GET」のまま、「URL」には、先程コピーしたWebhooksのURLを、「データ」には「key」に「value1」「value2」「value3」を入れ、「value」に「test」「日本語」「%E6%97%A5%E6%9C%AC%E8%AA%9E」を入れてあります。
このときの「value1」「value2」「value3」は先頭が小文字でないと認識しませんでした。（LINE連携の方は「Value1」「Value2」「Value3」だったので、つまずくポイントな気がします）
なお、「マップを作成」ブロックに「key」「value」を追加するには、「マップを作成」ブロックの右下の「＋」を押すことが必要です。
「key」が「value3」のvalueに入れた文字列は「日本語」をURLエンコードした文字列です。URLエンコードとは、URLに日本語文字列を埋め込むときに使用される方法で、基本的にURLには英数字、一部の記号しか扱えないので、日本語を符号化して送ります。古の掲示板をPerlとかで作っていたりした時代にはメジャーな方法でした（なつかしい）。
ちなみに、「GET」メソッドは基本的にサーバーからデータを貰う用のメソッドなのですが、情報を送れないかというとそういうこともなく、送りたい情報を混ぜたURLを作成することで、情報を送ることができます。
「http://test.com?value1=test&value2=日本語&value3=%E6%97%A5%E6%9C%AC%E8%AA%9E」みたいな感じです。
これで、データを送ったときのLINEがこれです。
見事にvalue2の日本語部分が文字化けしています。URLエンコードしたvalue3は、日本語になっています。（おそらく、IFTTTまではGETメソッドで、URLエンコードされて送られ、IFTTTからLINE連携はJSONで送られてると思われる）
ちなみに、プログラムに特に変更を加えず、「メソッド」だけ「POST」に変更すると、LINEにメッセージが送られなくなりました。
本来、POSTメソッドは、大量のデータを送る際に使用するメソッドで送信用です。GETメソッドで、URLエンコードでデータを送るとURLが長くなり、規格上URLには上限はないのですが、あるブラウザが扱えるURL文字数の上限が2,083文字だったということで、あんまり、大量のデータを扱うのには向きません。POSTメソッドでは、URLの中にデータを埋め込むのではなく、送信する実データ（メッセージボディ）の部分にデータを埋め込むようになっています。
ですから、原理的にはPOSTメソッドでも送れるはずですが、おかしいと思って、value2の「日本語」部分だけ「nihongo」に変えるとPOSTメソッドも通りました（多分マルチバイト文字に起因する文字化けで文字列のフォーマットが崩れてるのだと思う）。また、URLエンコード部分が、デコードされず、素の「%E6%97%A5%E6%9C%AC%E8%AA%9」が表示されるようになりました。（多分、POSTの場合は正常動作）
まとめ
基本的にはGETメソッドでもPOSTメソッドでも動く（英数字のみ）
GETメソッドの場合
日本語が入っても動くが文字化けする
URLエンコードすれば日本語が表示できる
POSTメソッドの場合
日本語が入るとメッセージが届かない
URLエンコードしてもそのまま表示（エスケープ）される（多分仕様）
ということで、本来送信に使われるはずのPOSTメソッドは、UIFlowから、IFTTTでWebhooks、LINE Notify連携で日本語を扱う場合は使用できないということが分かりました。
とはいえ、GETメソッドでかつ、URLエンコードしないと日本語は使えないので、日本語を使用するのは限定的であったほうがよいと思います。
IFTTTの、LINE連携画面での「Message」の項目では日本語が使用できるので、固定メッセージ部分はそちらで設定するとよいでしょう。
メッセージを送るときに、条件によって違う日本語メッセージを送りたいような場合はURLエンコードしといた文字列を変数で持っておいて使い分けるとか工夫が必要そうです（送信はGETメソッド）。本当は、プログラム側でURLエンコードして送ればよいのですが、それにはPythonの別ライブラリを読む必要がありそうです。
日本語が送れないのがどこに起因するのかが特定しにくい（UIFlow→IFTTTが怪しい）のですが、現状の動作としてはそうなので、記しておきます。
ちなみに、本来はこのように書くのが正しい？ような気もしますが、GET、POSTメソッド共に、ヘッダー部分はなくても動作するようです。データ部分もjson形式に変換しなくてもjson形式として認識してくれていました。
サービス側で表記については吸収してくれているんだと思う。
当然この書き方でも正常に動作するが日本語関係の条件は同じ。
この記事が気に入ったらサポートをしてみませんか？