【ビール女子麦子さん⑤】Watson AssistantとLINE Messaging APIでランダムにハンバーガーの画像を返す機能を作ってみた


1.はじめに

「ビール女子🍺麦子さん」シリーズ、5回目の投稿です。

私はクラフトビールのほかに、グルメバーガーが大好きです!そこで、今回は、麦子さんに「お腹空いた」と言うと、おいしそうなグルメバーガーの写真を返して煽るという機能を実装したいと思います!

ちなみに、ビール女子麦子さんとは、以下のようなWatson AssistantとLINE Messaging APIでつくった、ビールに詳しいチャットボットです。


2.作り方

使うのはいつも通りこの3つです。

・WatsonAssistant

・Node-RED

・LineMessagingAPI


(1)画像の返し方

LINEMessagingAPIリファレンスの「画像メッセージ」を見ると、以下のように「type」「originalContentUrl」「previewImageUrl」を設定することになっています。originalContentUrlは元の写真、previewImageUrlは簡易表示用にサイズダウンしたりしたものを設定するようです。

{

"type": "image",
"originalContentUrl": "https://XXXX.com/original.jpg",
"previewImageUrl": "https://XXXX.com/preview.jpg"
}


(2)URLを返す仕組み

最初は正当にWatsonAssistantの「Imageを返す機能」を使うことを考えたのですが、この機能では固定の1枚の写真(URL)を返すだけで「複数の写真の中からランダムに返す」ということが実現できません。

そのため、今回は以下のような仕組みで、画像を表示する仕組みを作ることにしました。

①利用者がLINEで「お腹空いた」と送る

②WatsonAssistantは「お腹空いた」を受け取ると、テキストでランダムにURLを返す

③特定のドメインのURLは、画像とみなして、LINEMessagingAPIのメッセージオブジェクトに画像メッセージとして設定

1.png


3.実装

実際の麦子さんは度重なる機能追加でかなり複雑化していますので、シンプルに説明するために【ビール女子麦子さん】 IBM WatsonとLINEでbotを作ってみたの時点のNode-REDへ追加するイメージで書きます。初期状態を以下の状態とします。

0.png


では、はじめましょう。


①WatsonAssistantの「Intents」に「お腹空いた」を登録。


②Dialogsで「#お腹空いた」のIntentsを受け取ったら、URLをランダムに返すように設定する。(テキスト欄にURLを複数入力して、「Response variations are set to random」にします。)

(補足)

画像をhttps://xxxxx.xxxx/aaa.jpgで表示させるためには別途環境を構築する必要がありますが、簡易的に試すだけであれば、自分が過去にブログにアップロードした画像を使う手もあります。


③Node-REDで、WatsonAssistantの出力テキストがhttps://xxxxx.xxxx(特定のドメイン)の時は、画像だと判断する「Switch」のノードを作る。

2.png


④③で画像で判定された場合、LINEMessagingAPIのメッセージオブジェクトに画像メッセージとして設定するための「change」ノードを作る。

3.png

「change」ノードの「対象の値」は以下のように設定します。今回は、originalContentUrlもpreviewImageUrlも同じものを設定しています。

[

{
"type":'image',
"originalContentUrl":msg.payload.output.text[0],
"previewImageUrl":msg.payload.output.text[0]
}
]


⑤Node-REDで以下のように配置します。

2.png


⑥デプロイします。


4.できあがり!

こんな感じになりました。すこしずつ、麦子さんの応答力が高くなってきて楽しくなってきました!愛着がわいてきます。次はどのような機能作ろうか悩み中です。

よかったら使ってみてくださいね!

ビール女子🍺麦子さん 

  ↓↓↓↓↓

友だち追加