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

12455 ワード
M5stack uiflow LineNotify Beeceptor uiflow テキストリンク

先日参加したオンラインハッカソンで「UIFlow のプログラムで LINE に通知を送る（LINE Notify を利用）」ということをやろうとした際に、その場で初めて試そうとして、すぐにはうまくいかなかった件を、あらためて時間をとって確認してみました。

最終的に成功して、↓このような結果を得られました。

やってみた内容

node.js や IFTTT で LINE Notify を使った際の HTTPリクエストの中身を見てみる

以前、IFTTT経由で LINE Notify を使った記事（MESH から LINE に通知を送るという内容）を書いたり、JavaScript祭りというイベントの IoTセッションに登壇した際のネタで、node.js ＋ LINE Notify で通知を送る、というものを作っていました。

それらの既に動作しているものと、UIFlow のプログラムで送られる HTTPリクエストが同じになれば問題なく動くはず、と考えて、その中身の比較をやってみました。
本来は、LINE Notify の公式ドキュメントを読んで、というやり方をするべきかなと思いつつも、HTTPリクエストのデバッグも試してみたかったという背景もあってこのような流れに。

あまり詳細に触れない部分

今回の記事では、LINE Notify の使い方については、詳しくは触れません。
「LINE Notify 使い方」などというキーワードでググると、その辺りを説明した記事がたくさんでてくるので、それらをご参照ください。
また、以下で IFTTT の話も少し出てきますが、IFTTT の使い方についても同様です。

HTTPリクエストのデバッグ①（利用する Beeceptor について）

上記の node.js 等で送った HTTPリクエストの内容を受け取った側で見てみようと、以前見かけて気になっていた「Beeceptor」を使ってみました。
　●Beeceptor - Zero Coding Rest API Mocking - Rest API Mock Server
　　https://beeceptor.com/

Beeceptor については、下記からの引用で補足します。
　●Webhookのデバッグに便利なツール「Beeceptor」の紹介 | SendGridブログ
　　https://sendgrid.kke.co.jp/blog/?p=11260

Beeceptorには主に次のような機能があります。
　1. HTTPのエンドポイントを作成して受信結果を表示する機能
　2. 応答コードとレスポンスを自由に変更できるモックAPI機能
　3. HTTPリクエストを中継するプロキシ機能

また、Beeceptor の FAQを見ると、「How Beeceptor is different from RequestBin or Mocky.io?」という項目があり、他の似た機能を持つものとの違いも書いてあります。
記載を読んでみると「RequestBin と Mocky.io がそれぞれ持つ異なる機能を両方とも包含していて、さらにプロキシ機能を持ったものが Beeceptor」ということのようです（上記 1〜3 の機能を全て持っているのが特長、となるようです）。

HTTPリクエストのデバッグ②（Beeceptor を試してみる）

以前作ったものを動かす前に、まずは公式でも案内されている curl を使ったやり方で試してみます。
LINE Notify を使って通知を送る際のコマンドは、通常は下記です。

curl -X POST -H 'Authorization: Bearer 【LINE Notify のキー】' -F 'message=【送りたいテキストの内容】' https://notify-api.line.me/api/notify

ここでコマンドの最後の部分を、Beeceptor で設定したエンドポイントの URL に置き換えてみます。

curl -X POST -H 'Authorization: Bearer 【LINE Notify のキー】' -F 'message=【送りたいテキストの内容】' 【Beeceptor で設定した URL】

上記を実行して Beeceptor で受信したリクエストの内容を見てみました。
Beeceptor で受信したリクエストのヘッダとボディは以下となり、「Content-type は multipart/form-data」となるようでした。

【ヘッダ】

{
"content-length": "169",
"user-agent": "curl/7.54.0",
"accept": "/",
"authorization": "Bearer 【LINE Notify のキー】",
"content-type": "multipart/form-data; boundary=------------------------【文字列】"
}

【ボディ】

--------------------------【文字列】
Content-Disposition: form-data; name="message"

【送りたいテキストの内容】
--------------------------【文字列】--

それでは、次に「IFTTT（受ける側は Webhook） ⇒ LINE Notify」の IFTTT の受け側を、といきたいところですが、この前に UIFlow と IFTTT の組み合わせはあっさり成功してしまっていたため、次のお試しへと進みました。

最後は、「node.js ⇒ LINE Notify」という流れのものです。
以前作っていたものは、下記の記事にあるようなシンプルにメッセージを送るだけのものでした。
●LINE NotifyをNode.jsで使う - BinDle29’s blog
　http://bindle29.hatenablog.com/entry/2018/02/25/205915

JavaScript のプログラムで設定した宛先を、Beeceptor で設定したエンドポイントの URL に置き換えて実行した結果、得られたのは以下となりました。
curl で試した時と違って、「Content-type は application/x-www-form-urlencoded」で、HTTPリクエストのボディもシンプルな構成でした。

【ヘッダ】

{
"content-length": "71",
"content-type": "application/x-www-form-urlencoded",
"authorization": "Bearer 【LINE Notify のキー】",
"accept": "application/json"
}

【ボディ】

message=【URLエンコードされた文字列】

試すなら、こちらを踏襲するのが簡単そうです。

LINE Notify の公式ドキュメントを確認

ここにきて、公式ドキュメントで仕様の情報を確認しました。
ドキュメント内の項目「POST https://notify-api.line.me/api/notify」の直下を見ていくと、「Content-Type で指定できるものは application/x-www-form-urlencoded または multipart/form-data」と書いてあったり、リクエストパラメータについての記載がありました。

リクエストパラメータの必須の部分は、上記の HTTPリクエストで送られていた「message（String型で、最大 1000文字）」のみとなっています。
ここで省略可能となっている他のリクエストパラメータは、簡単化のために以下では利用せず進めていきます。

UIFlow でプログラムを組んでみる

IFTTTを使った例

ここで使った IFTTT のアプレットは、下記のように Webhook と LINE Notify を組み合わせたものです。

UIFlow のプログラムに関し、IFTTT を使った場合、以下のようにシンプルな構成で作ることができます。

HTTPリクエストのブロックを利用して設定する箇所は以下のとおりです。

  • Method で POST を指定
  • URL に IFTTT の Webhook の宛先となる URL を指定
  • Data の部分で始めからついている「マップを作成」のブロックに「key・value」を指定（key は value1 を設定、value が IFTTT に受け渡されるテキストになる）

上記の Headers で Content-type の 指定をしていないですが、UIFlow から POST すると Content-type が application/json になるようで、指定なしでも問題なく動作していました。
また、IFTTT で Webhook を使って HTTPリクエスト を受け取る際は、value1〜value3 の 3つのパラメータを受け取ることができますが、上記では value1 のみ使っています（from UIFlow というテキストを送るようにしています）。

1点、これを作る途中で軽く迷ったのが、Data の指定部分に key と value の値をセットするところでした。やり方としては、以下で示した「＋」のマークを押せば大丈夫でした（以下の画像で示しているのは、Headers のところですが、Data のところも同様です）。
最初、JSONブロックの中とか、メニューから該当しそうなブロックを探すということをしてしまいました・・・。

ボタンを押したら、以下のようになるので、あとは文字列のブロックを加えてやるだけです。

上記のプログラムから、LINEアプリに通知された内容は以下のとおりです。
UIFlow から IFTTT 送ったテキストは「from UIFlow」でしたが、IFTTT のアプレット内で LINE に通知するテキストを追加しているため、以下では「お知らせだよ：」という文字列も通知に含まれています。

IFTTTを使わない実装の例

それでは、IFTTT を使わない方法での実装を試してみます。
上記の Beeceptor を使って見てみた HTTPリクエストの内容と同じ感じになるように、以下のようにプログラムを組みました。

プログラムの中で、HTTPリクエストのブロックを利用して設定する箇所は以下のとおりです。

  • Method で POST を指定
  • URL に LINE Notify の宛先となる URL を指定
  • Headers の部分に 2つの key・value のペアを設定
    • LINE Notify のキーの設定（記事の上で書いた "authorization": "Bearer 【LINE Notify のキー】" にあたる部分）
    • Content-type の application/x-www-form-urlencoded
  • Data の部分で始めからついている「マップを作成」を削除し、テキストのブロックに置き換える（内容を「message=」と、それに続く LINE に通知したい文字列を設定する）

HTTPリクエストのブロックで Data の部分に、デフォルトでくっついていた「マップを作成」は不要っぽいので削除し、直接「文字」のブロックをくっつけました。
そして、文字のブロックを1個置いて「message=【通知したい文字列】」としても良かったのですが、後で通知する文字列を動的に書きかえることも出るかな、と思って「message=」の部分と後続の文字列の部分は分けて、文字を連結するブロックでつなげました。

上記の「message=」の後にくる部分について、UIFlow の テキストブロックで日本語のテキストを直接入力しても意図通りの動作とならないのですが、日本語のテキストを URLエンコードした内容で書いてやると、冒頭にも掲載していた以下の動画のように、日本語テキストでの通知を行えました。

上記のプログラムで、LINEアプリに通知された内容は以下のとおりです。
UIFlow から IFTTT 送ったテキストがデコードされて表示されているのが分かります。
（UIFlow で設定していたテキストはUIFlow%E3%81%8B%E3%82%89%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%81%AE%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E9%80%81%E3%82%8B で、それがデコードされて「UIFlowから日本語のテキストを送る」という文字列になっています）

まとめなど

とりあえず、UIFlow から LINEアプリに通知する方法を試すことができました。
今度は、HTTPリクエストで通知ができる他のサービス・アプリとも組み合わせてみたり、通知のトリガーをボタン押下意外にしてみたりと、別のパターンを試してみたいと思います。