１．はじめに
「ビール女子🍺麦子さん」シリーズも３回目になりました。
ビール女子麦子さんとは、以下のようなWatson AssistantとLINE Messaging APIでつくった、ビールに詳しいチャットボットです。今回は、IBM CloudのVisual Recognitionを使って、麦子さんに画像認識機能を実装します。
つくってみたー！！中身はWatson Assistant(Watson Conversation)です。会話のスキル作るの楽しい！！
— はぁこ🌸ビール女子麦子開発中 (@paco_itengineer) April 20, 2019
これからビールの知識を増やして立派なビール女子に育てます😃 pic.twitter.com/nZfuqH4IfC
２．つくりかた
・LINE Messaging API
・Node-RED
・Visual Recognition（IBM Cloud)
【ビール女子麦子さん】 IBM WatsonとLINEでbotを作ってみたで、すでに、LINE Messaging APIとWatson Assistantで基本的なチャットボットの仕組みは構築済みなので、今回は画像が送られてきた場合に、Node-REDでVisual Recognitionに処理が流れるように分岐を作っていきます。
３．参考にした資料
今回は以下の記事を参考にさせていただきました（投稿者の方に感謝です）。差分は、通常の会話のフローとの分岐を作ったことくらいです。
LINE MessagingAPIとIBM Visual Recognitionで画像認識Bot作ってみた！
https://qiita.com/naoyuki_mori_1984/items/87853f63f5f6d628cd14
４．やったこと
（１）画像認識のフローを取り込む
上記の記事に掲載していただいている「Node-REDのコード」をベースにさせていただきました。
【手順】
①上記の記事の「Node-REDのコード」コピーしてNode-REDのメニューから「読み込み」‐「クリップボード」で取り込みます
②すると、以下のような状態になります
③「Post」のノードは既存フローのものを採用するので削除します
（２）分岐をつくる
【手順】
①左メニューの「switch」のモジュールを使います
②以下の図のように、「switch」のモジュールで先ほど取り込んだフローと、既存のフローをつなぎます。
③分岐条件は以下のように、メッセージのタイプが"image"の時にVisual Recognitionのフローに流れるように設定します
（３）Lineのアクセストークンの設定
取り込んだフローのなかで、２か所Lineのアクセストークンを設定する箇所があります。
【手順】
①LineDeveloperから、作成済みのプロバイダー画面に進み、「メッセージ送受信設定」欄の「アクセストークン（ロングターム）」をコピーします。
②「reserve header」「generate header」の２つのモジュール内に、アクセストークンが記載されている部分があるので、自身のアクセストークンを貼り付けます。
（４）デプロイ
ここまで出来たら、Node-REDをデプロイして完成です！
※出力メッセージを自分でアレンジする場合は、「merge」モジュールのtargetTextの部分で変えられます。
５．苦労したところ
・私があまりに基本知識がない状態だったため、参考にした記事のフローの意味を理解するのに苦労しました。
・LineMessagingAPIのWebhookで取得できるのは、メッセージIDのみです。コンテンツ（画像）を取得するためには、https://api.line.me/v2/bot/message/{messageId}/contentで取得する必要があるようです。詳しくは以下のMessaging APIリファレンスの「コンテンツを取得する」に記載されていました。
https://developers.line.biz/ja/reference/messaging-api/#get-content
・最初にデプロイ・実行したときにエラーになりました。これは、以前の記事ではまったのと同じ問題で、「HttpRequest」のモジュールで「Basic認証」が選択されていたためでした。
６．できあがり
こんな感じになりました！
麦子さんが画像認識ができるようになりました！ソーセージが人参スティックになっちゃうけど(笑 pic.twitter.com/RPGUyiRbuV
— はぁこ🌸ビール女子麦子開発中 (@paco_itengineer) May 3, 2019
よかったら遊んでください。
ビール女子🍺麦子さん
↓↓↓↓
