【ビール女子麦子さん③】IBM Visual Recognitionで麦子さんに画像認識機能をつけてみた

#１．はじめに
「ビール女子🍺麦子さん」シリーズも３回目になりました。

ビール女子麦子さんとは、以下のようなWatson AssistantとLINE Messaging APIでつくった、ビールに詳しいチャットボットです。今回は、IBM CloudのVisual Recognitionを使って、麦子さんに画像認識機能を実装します。

<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> 

#２．つくりかた
・LINE Messaging API
・Node-RED
・Visual Recognition（IBM Cloud)

[【ビール女子麦子さん】 IBM WatsonとLINEでbotを作ってみた](https://qiita.com/paco_itengineer/items/5981c22edc60494383e6)で、すでに、LINE Messaging APIとWatson Assistantで基本的なチャットボットの仕組みは構築済みなので、今回は画像が送られてきた場合に、Node-REDでVisual Recognitionに処理が流れるように分岐を作っていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299024/91e33044-d0f6-9401-939f-018c202cbe0e.png)


#３．参考にした資料
今回は以下の記事を参考にさせていただきました（投稿者の方に感謝です）。差分は、通常の会話のフローとの分岐を作ったことくらいです。

LINE MessagingAPIとIBM Visual Recognitionで画像認識Bot作ってみた！
https://qiita.com/naoyuki_mori_1984/items/87853f63f5f6d628cd14

#４．やったこと
##（１）画像認識のフローを取り込む
上記の記事に掲載していただいている「Node-REDのコード」をベースにさせていただきました。

【手順】
①上記の記事の「Node-REDのコード」コピーしてNode-REDのメニューから「読み込み」‐「クリップボード」で取り込みます
②すると、以下のような状態になります
③「Post」のノードは既存フローのものを採用するので削除します

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299024/e5207600-1b6d-562a-1755-9169e21a4b5b.png)


##（２）分岐をつくる
【手順】
①左メニューの「switch」のモジュールを使います
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299024/3ba7fbe0-df8a-42e7-bd27-a60d6905172f.png)

②以下の図のように、「switch」のモジュールで先ほど取り込んだフローと、既存のフローをつなぎます。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299024/88041396-e3f3-3640-a2cf-bfda5dd76f80.png)

③分岐条件は以下のように、メッセージのタイプが"image"の時にVisual Recognitionのフローに流れるように設定します
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299024/2b94c6a3-3f52-1a0d-4b3f-ac0550ab6928.png)

##（３）Lineのアクセストークンの設定
取り込んだフローのなかで、２か所Lineのアクセストークンを設定する箇所があります。

【手順】
①[LineDeveloper](https://developers.line.biz/console/)から、作成済みのプロバイダー画面に進み、「メッセージ送受信設定」欄の「アクセストークン（ロングターム）」をコピーします。

②「reserve header」「generate header」の２つのモジュール内に、アクセストークンが記載されている部分があるので、自身のアクセストークンを貼り付けます。

##（４）デプロイ
ここまで出来たら、Node-REDをデプロイして完成です！

※出力メッセージを自分でアレンジする場合は、「merge」モジュールのtargetTextの部分で変えられます。


#５．苦労したところ
・私があまりに基本知識がない状態だったため、[参考にした記事](https://qiita.com/naoyuki_mori_1984/items/87853f63f5f6d628cd14)のフローの意味を理解するのに苦労しました。
・LineMessagingAPIのWebhookで取得できるのは、メッセージIDのみです。コンテンツ（画像）を取得するためには、`https://api.line.me/v2/bot/message/{messageId}/content`で取得する必要があるようです。詳しくは以下のMessaging APIリファレンスの「コンテンツを取得する」に記載されていました。
https://developers.line.biz/ja/reference/messaging-api/#get-content
・最初にデプロイ・実行したときにエラーになりました。これは、[以前の記事](https://qiita.com/paco_itengineer/items/5981c22edc60494383e6)ではまったのと同じ問題で、「HttpRequest」のモジュールで「Basic認証」が選択されていたためでした。

#６．できあがり
こんな感じになりました！
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">麦子さんが画像認識ができるようになりました！ソーセージが人参スティックになっちゃうけど(笑 <a href="https://t.co/RPGUyiRbuV">pic.twitter.com/RPGUyiRbuV</a></p>&mdash; はぁこ🌸ビール女子麦子開発中 (@paco_itengineer) <a href="https://twitter.com/paco_itengineer/status/1124452030536269824?ref_src=twsrc%5Etfw">May 3, 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>