LoginSignup
10
11

More than 1 year has passed since last update.

@youtoy(Yosuke Toyota)inKDDI株式会社

LINE Messagin API を利用できる Node-RED のノードの新機能（Bot の返信で画像を利用）を enebular 上で試す

Last updated at Posted at 2021-08-16

はじめに

この記事は、LINE Messagin API を利用できる Node-RED のノードの新機能に関する話です。

●node-red-contrib-line-messaging-api - npm
　https://www.npmjs.com/package/node-red-contrib-line-messaging-api
●node-red-contrib-line-messaging-api (node) - Node-RED
　https://flows.nodered.org/node/node-red-contrib-line-messaging-api

このノードを作った のびすけ さんと Twitter上で以下のやりとりをした時に、画像対応に関するプルリクが来たという話を聞いたことがあったのですが、その機能が利用可能になっていたことに気がついて試してみました。

↓気がついたのは、上記のやりとりをしてしばらく日数が経過してから、冒頭に書いていたページを見た時に以下の記載を見つけて知りました。
リリースノート.jpg

Bot のリプライで画像を使う

LINEのチャンネルの設定など

まず、LINEアプリと連携させるための Messaging API まわりの設定を行っていきます。

今回の記事では、アカウント設定や詳細な使い方・手順の話は省きますが、LINE Developers のページで設定などを進めていって、主に以下の内容について対応していきます。

  • キーとなる文字列の情報を取得（2つ）
    • Channel secret
    • Channel access token
  • 連携のための設定
    • Webhook の設定

キーとなる 2つの情報を取得

今回は「Node-REDで画像利用」という適当な名前をつけたチャンネルを用意しました。
このチャンネルを作成する際、Messaging API を利用するための設定を選んでいます。
LINE_Developers.jpg

その画面で、「Basic settings」のタブを選んだ中の「Channel secret」と、「Messaging API」のタブを選んだ中の「Channel access token」の 2つは、この後 enebular で入力する必要がある文字列です。
そのため、どこかにコピペしてメモするなどして、後で利用できるようにしておいてください。
Basic settingsのChannel secret.jpg

Messaging API の Channel access token.jpg

連携のための設定やその他

重要な情報 2つをメモしたところで、他の設定なども行っておきます。

設定画面の「Messaging API」のタブを選んだ中に、以下のような Bot の応答の設定などを行う部分があるのですが、ここは「Edit」から別画面へ移動して「Disabled」になるような設定をしておくと良いです。
設定でDisabledにする部分.jpg

また、「Messaging API」のタブを選んだ中の上のほうに QRコードが表示されている部分があるので、LINEアプリで読み込んで Bot とのやりとりができる状態にしておいてください。
QRコード.jpg

その他、同じページ内で「Webhook settings」という項目があり、これも最終的には設定が必要になるのですが、今はここで設定する URL がない状態なので、今時点ではそのままにしておきます（後で設定をしていきます）。
Webhookの設定項目.jpg

Node-RED のフローを作成する（enebular を利用）

Node-RED用のノードを追加する

LINE Developers のページでの設定等を行った後、Node-RED用のノードを使ってフローの作成を行います。
今回は、Node-RED を試す環境として enebular を利用します。

ここでは、enebular の詳細やアカウント作成の話については省略します。
enebular を利用可能な状態にして、フローの編集ができる以下の画面まで進み、その画面中の右上のメニューからノードの追加を行います。
メニューの選択.jpg

上記のメニューの「パレットの管理」を選び、出てきた画面上で「ノードを追加」と書かれたタブを選択します。
そこで「node-red-contrib-line-messaging-api」を検索して、ノードの追加を行いましょう。
検索文字列に入力する内容は、名前の先頭から入力するのではなく「line-m」などと、名前の一部を入力して絞りこんでも良いです。

その後、画面左側にあるノードの一覧を見て、以下のノードが追加されているのを確認しておいてください。
ノード追加後.jpg

フローを作成する

ノードを配置する

まずは、「http in ノード」を 1つ配置してから、その設定画面で「メソッド」を「POST」に変更し、「URL」の部分に「line」と入力します（この部分の名称は何でも良いです）。
ノードの配置（http in）.jpg

http_inノードの設定.jpg
このノードが、LINEアプリ上で何かメッセージを入力された際に、そのデータを受けとる入り口にあたる部分になります。

そして、3つのノードを追加します。
追加するノードは「switch ノード」、「change ノード」、「Reply Message ノード」の3つです。
ノードを3つ追加.jpg
追加したノードの一部は、上の画像のようにワイヤーでつないでおきます。

この後は、3つのノードの設定を行っていきます。

Reply Message ノードの設定

Reply Message ノードの設定では、先ほどメモしておいた「Channel secret」と「Channel access token」の 2つを設定します。
LINE用の情報を設定.jpg

switch ノードの設定

switch ノードの設定では、プロパティの部分にある「msg.」の後を「payload.events[0].message.text」という内容にします。

さらに、以下の画像の緑矢印で示した部分を押して、2つの処理の分岐を作ります。
その分岐のうち1つは、テキストボックスの部分に「画像」という文字を入れてください。
そして、もう1つの分岐は、プルダウンメニューの中の「その他」を選びます。
switchノードの設定.jpg
ここで設定した内容により、もし LINEアプリで「画像」という単語が入力された場合は、その返信として Bot から画像が返されます。
もし、それ以外の単語や文章を入力された場合は、Bot は入力された内容と同じ内容をオウム返しします。

change ノードの設定など

先ほど、switch ノードで分岐を作ったので、switch ノードの右側のワイヤーをつなぐ部分が 2箇所に増えています。
その部分と他のノードとの間を、以下のようにつなぎます。
ノードを全てつないだ状態.jpg

そして、change ノードの設定を行っていきます。
当初は以下のページに書かれた内容を見て設定をしました（以下は function ノードを使った事例ですが、この記事では change ノードを使う形に変更して利用しています）。

●node-red-contrib-line-messaging-api (node) - Node-RED
　https://flows.nodered.org/node/node-red-contrib-line-messaging-api
画像のURL指定の例（公式）.jpg

ここで、これ以降で記載している一通りの設定等も行って動作確認をしたところ、画像によるリプライが想定通りに動いていない状況になりました。
（今回の仕組みとしては、以下の画像の 2つ目のやりとりで、「画像」と書いた部分の返信がオウム返しではなく画像の表示になるはずでした）
画像のリプライが行われない

いったん、ノードから出力される内容をデバッグして確認したりしつつ、LINE Developers の仕様も見てみました。
仕様の確認を行ったのは、以下のページです。

上記の仕様を見て、「originalContentUrl」だけでなく「type」や「previewImageUrl」も設定すれば良いのかな、と思い試してみました。
具体的には、changeノードの設定を以下のようにしました。
changeノードの設定内容.jpg

書きだしてみると、以下の内容になります。

  • 値の代入の 1つ目：
    • msg. の後の文字列 「payload.events[0].message.type」
    • 　対象の値 「image」
  • 値の代入の 2つ目：
    • msg. の後の文字列 「payload.events[0].message.originalContentUrl」
    • 　対象の値 「https://pbs.twimg.com/profile_images/1165566424699457537/IYBnJ1i5_400x400.jpg」
  • 値の代入の 3つ目：
    • msg. の後の文字列 「payload.events[0].message.previewImageUrl」
    • 　対象の値 「https://pbs.twimg.com/profile_images/1165566424699457537/IYBnJ1i5_400x400.jpg」

上記の設定の下2つで設定している URL は、ノードの公式ページに書かれていたものをそのまま使っています。
そして、enebular の画面右上の「デプロイ」ボタンを押して、フローのデプロイを行います。

Webhook用の URL を確認

ここで、Webhook用の URL を確認してみます。

enebular の画面右上の「デプロイ」ボタンの左にあるアイコンにカーソルを合わせ、そこで表示される URL をコピーしておきます。
URLを確認.jpg
文字列としては「https://【固有の文字列】.herokuapp.com/」という形になっているかと思います。

この URL の文字列に、さらに「http in ノード」で付与していた文字列を追加したものが、LINE Developers のページでの Webhook設定に用いる文字列になります。

具体的には以下のとおりです。
https://【固有の文字列】.herokuapp.com/line

Webhook の設定

上の手順（LINE Developers のページで進める手順）で設定を行わずに通り過ぎていた、「Messaging API」のタブの中の「Webhook settings」に URL を入力していきます。

具体的には以下のように設定しました。
Webhookの設定.jpg

LINEアプリから動作を確認してみる

準備は完了したので、あとは LINEアプリから動作確認を行います。

動作としては、「画像」というメッセージを送った際は Bot から画像が返ってきて、それ以外のテキストを入力した場合は Bot からオウム返しされる、という想定です。
動作確認の結果は以下のとおりで、想定通りの動作になっていることを確認できました。
JoQBX2mq.jpg

少し手を加えたものを試した話（結果のみ）

上記の内容に少し追加・変更をしてみたものも試しました。
試した内容は、とある Node-RED の初心者向けハンズオン資料に登場していた「Random Cat という API」を使った構成で、Bot が返す画像がランダムに選択された猫の画像になる、というものです。

上記のとおり、想定通りの動作になりました。
（この話は別途、記事に書ければと思っています）

終わりに

LINE Messagin API を利用できる Node-RED のノードを使い、「Bot が画像によるリプライを行う」という仕組みをシンプルな構成で試しました。
Node-RED で作った部分は色々と手を入れる余地もあるので、このノードを使った別の仕組みも試していければと思います。

それと余談のような内容になりますが、今回使ったノードを過去に使った事例の話を少し載せてみます。

過去に node-red-contrib-line-messaging-api を使った時の話

今回使ったノードは過去に利用したことがあり、例えば「LINEアプリから OBS のシーン切り替えを行う」という仕組みを作る際などに使ったりしました。

↓その概要については、以下の LT用資料に書いています。

10
11
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
Sign upLogin
10
11