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

#１．はじめに
「ビール女子🍺麦子さん」シリーズ、５回目の投稿です。

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

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">つくってみたー！！中身はWatson Assistant(Watson Conversation)です。会話のスキル作るの楽しい！！<br>これからビールの知識を増やして立派なビール女子に育てます😃 <a href="https://t.co/nZfuqH4IfC">pic.twitter.com/nZfuqH4IfC</a></p>&mdash; はぁこ🌸ビール女子麦子開発中 (@paco_itengineer) <a href="https://twitter.com/paco_itengineer/status/1119612368240005120?ref_src=twsrc%5Etfw">April 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

#２．作り方
使うのはいつも通りこの３つです。
・WatsonAssistant
・Node-RED
・LineMessagingAPI


##（１）画像の返し方
[LINEMessagingAPIリファレンスの「画像メッセージ」](https://developers.line.biz/ja/reference/messaging-api/#image-message)を見ると、以下のように**「type」「originalContentUrl」「previewImageUrl」**を設定することになっています。originalContentUrlは元の写真、previewImageUrlは簡易表示用にサイズダウンしたりしたものを設定するようです。

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

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

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

①利用者がLINEで「お腹空いた」と送る
②WatsonAssistantは「お腹空いた」を受け取ると、テキストでランダムにURLを返す
③特定のドメインのURLは、画像とみなして、LINEMessagingAPIのメッセージオブジェクトに画像メッセージとして設定

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299024/8766e305-0cb3-e8b6-46fe-eb8f9812a326.png)

#３．実装
実際の麦子さんは度重なる機能追加でかなり複雑化していますので、シンプルに説明するために[【ビール女子麦子さん】 IBM WatsonとLINEでbotを作ってみた](https://qiita.com/paco_itengineer/items/5981c22edc60494383e6)の時点のNode-REDへ追加するイメージで書きます。初期状態を以下の状態とします。

![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299024/ae647dcd-d932-e777-703b-5b552204270a.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299024/54b0f6de-f1d2-3443-b0b5-87df3aeebda6.png)

#####④③で画像で判定された場合、LINEMessagingAPIのメッセージオブジェクトに画像メッセージとして設定するための「change」ノードを作る。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299024/a149b92f-6002-209c-15ec-9b5bcc45df5b.png)
「change」ノードの「対象の値」は以下のように設定します。今回は、originalContentUrlもpreviewImageUrlも同じものを設定しています。

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

#####⑤Node-REDで以下のように配置します。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299024/25001517-bbae-d5d5-c2f2-a173d59e9514.png)


#####⑥デプロイします。

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「ハンバーガー」とか「お腹すいた」とかつぶやくと、美味しそうなハンバーガーの写真を返す機能を実装した。<br><br>もう、なんのボットなのかわかんなくなってきた。<br><br>Watsonを使ってランダムに画像を返すのはちょっと苦労した💦 <a href="https://t.co/eOTMJnBUpO">pic.twitter.com/eOTMJnBUpO</a></p>&mdash; はぁこ🌸ビール女子麦子開発中 (@paco_itengineer) <a href="https://twitter.com/paco_itengineer/status/1125059841028804608?ref_src=twsrc%5Etfw">May 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

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

ビール女子🍺麦子さん　
　　↓↓↓↓↓
<a href="http://nav.cx/aLo5a15"><img src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png" alt="友だち追加" height="36" border="0"></a>