Help us understand the problem. What is going on with this article?

LINE x Watson AIボット入門

More than 1 year has passed since last update.

LINE x Watson AIボット入門

by bird_tomita
1 / 71
  • この資料は「Bluemix Users's Group Nagoya女子部」での講演資料です。

今回は IBM Watson の Watson Assistant と LINE の Messaging APIを使って簡単なチャットボットを作成します。

主な流れ
- LINE チャンネル設定
- Node-REDでチャットフロー作成
- LINE と Node-REDをつないでテスト
- Watson Assistantを設定
- Node-REDとWatson Assistantを繋いで完成


なぜやるのか

  • LINEは日本最大のチャットプラットフォーム
  • Watson Assistantはチャットボットのバックエンドとして採用率が高い(らしい)

- LINE BOOT AWARDS 2018 開催中!

LINE BOOT AWARDS 2018

image.png


Speaker

Atsushi Bird Tomita

R&D
ソフトウェア エンジニア
IBM Champion for cloud 2018
水曜ワトソンカフェ
RoBoHoN認定トレーナー


AIって何?


身近にあるAIサービス

  • 音声認識 (スマホ・スマートスピーカー)
  • ARアプリ(画像認識)
  • QRコード(画像解析)
  • チャットボット 雑談系 (ex りんな)
    https://www.rinna.jp

今回のお題に近いもの

クロネコヤマト Lineアカウント
http://www.kuronekoyamato.co.jp/ytc/campaign/renkei/LINE/
image.png


IBM Watson


今回使うサービス


LINE Messaging API の特徴


プッシュメッセージと応答メッセージ

image.png


1対1、グループでトーク可能

image.png


LINE Developer 登録をしよう

  • Line Developers
  • Lineアカウントには事前にメールアドレスの登録が必要です。
  • 開発者名とメールアドレスを入力して登録します。

  • メールアドレスの確認メール送信はアカウント設定から
    image.png

画面右側の以下のリンクをクリックしてメールを送信しましょう。
image.png


プロバイダ登録

image.png


プロバイダ名

BMXGG-NAGOYA-WSxx など、他と被らないように設定します。
image.png

image.png


チャンネル作成

image.png


チャンネル設定

  • アプリ名やアイコンなど必要な情報を埋めて、「入力内容を確認」。
  • 確認画面で利用規約に同意して「作成」ボタンを押します。 image.png

とりあえずチャンネルできた

image.png


IBM Cloud アカウントを作ろう

IBM Cloudのライトアカウント(クレジット登録不要の無料アカウント)をまだ作成していない方は以下の記事を参考に作成してログインしてください。
IBM Cloud (aka Bluemix) ライト・アカウント作成手順 http://ibm.biz/litecloud


Node-RED 環境の作成

IBM Cloud にログインし「カタログ」から「スターターキット」を選び、「Node-RED Starter」をクリックします、。
image.png


Node-RED 環境の作成 2

  • アプリ名(ここに設定するとそのままホスト名になる)は 世界中で一意になるように設定します。
  • デプロイする地域は大人の事情により「米国南部」にして下さい。 image.png

作成完了

ダッシュボードに作成したアプリケーションがあるので、クリックして開く
image.png


アプリケーション起動

右上の「・・・」(縦)をクリックして、「起動」を選択。しばらくして状態表示が緑になって「このアプリケーションは稼働中です」になったら、「アプリURLにアクセス」をクリック
image.png


Node-RED初期設定

画面指示にしたがって、アクセス制限のためのユーザー名・パスワードを設定します。
image.png
image.png
image.png
image.png


Node-RED起動

以下の「Go to your Node-RED flow editor」から起動。次回から、https://<設定したホスト名>.mybluemix.net/red/ からアクセスできます。
image.png


Node-RED flow editor

image.png


Node-RED による Webサービス 基本ノード

  • http-in Webサービスの入り口を設定。GET / POST が選択できる。 image.png
  • http-response レスポンスを返す image.png
  • http-request フローの途中で外部APIにアクセスして結果を受け取る image.png
  • debug 設定されてるデータをコンソールに表示 image.png

フローを作ってみよう

こんな感じでフローを並べる。各部品(ノードという)の左側の○がインプット右側がアウトプット。
image.png


ノードの設定

各ノードをダブルクリックするとプロパティを設定できる。http-inノードのURL に 「/hoge」と設定
image.png


ノードの設定2

changeノードでpayloadに「fugafuga」と値を設定。
image.png


Deploy

右上で赤くなっている「Deploy」をクリック
image.png


動作確認

ブラウザで「https://<設定したホスト名>.mybluemix.net/hoge/」にアクセスして表示を確認
image.png


LINEチャンネルとの連携


LINE チャンネル設定

Line Developersに戻り、先ほど作ったチャンネルを選択して、以下を設定します。

メッセージ送受信設定

  • アクセストークンを「再発行」してコピーしておく
  • Webhook連携を「利用する」
  • Webhook URLに 「<設定したホスト名>.mybluemix.net/lineWebhook/」 image.png

LINE機能の利用

  • 自動応答メッセージ を 利用しない に image.png

Node-REDフローのインポート

以下をコピーして、Node-REDの右上ハンバーガーメニュー → import → clipboard に貼り付けてインポート

LINEBOT-nodeflow.json
[{"id":"4fea658.10aa61c","type":"change","z":"2a26af3d.0992b8","name":"","rules":[{"t":"set","p":"line_accessToken","pt":"flow","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":220,"wires":[["c4c2e442.c99eb"]]},{"id":"11aaed71.5b964b","type":"http in","z":"2a26af3d.0992b8","name":"","url":"/lineWebhook","method":"post","upload":false,"swaggerDoc":"","x":150,"y":220,"wires":[["4fea658.10aa61c","13174f94.e4aec","c2fe4d09.3acca"]]},{"id":"c2fe4d09.3acca","type":"http response","z":"2a26af3d.0992b8","name":"","statusCode":"","headers":{},"x":350,"y":180,"wires":[]},{"id":"13174f94.e4aec","type":"debug","z":"2a26af3d.0992b8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":150,"y":380,"wires":[]},{"id":"6df59a10.cdf4ec","type":"http request","z":"2a26af3d.0992b8","name":"","method":"POST","ret":"txt","url":"https://api.line.me/v2/bot/message/reply","tls":"","x":650,"y":400,"wires":[[]]},{"id":"c4c2e442.c99eb","type":"change","z":"2a26af3d.0992b8","name":"","rules":[{"t":"set","p":"payload.replyToken","pt":"msg","to":"payload.events[0].replyToken","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":280,"wires":[["2ad2fb25.e0c424"]]},{"id":"960030f8.701b78","type":"change","z":"2a26af3d.0992b8","name":"★返信設定","rules":[{"t":"set","p":"text","pt":"msg","to":"payload.events[0].message.text","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":340,"wires":[["a69f47cd.698288"]]},{"id":"2ad2fb25.e0c424","type":"change","z":"2a26af3d.0992b8","name":"set HTTP Headers","rules":[{"t":"set","p":"headers","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"headers.Content-Type","pt":"msg","to":"application/json","tot":"str"},{"t":"set","p":"headers.Authorization","pt":"msg","to":"'Bearer ' & $flowContext(\"line_accessToken\")\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":280,"wires":[["960030f8.701b78"]]},{"id":"a69f47cd.698288","type":"change","z":"2a26af3d.0992b8","name":"","rules":[{"t":"set","p":"payload.messages","pt":"msg","to":"[{\"type\":'text',\"text\":msg.text}]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":340,"wires":[["6df59a10.cdf4ec"]]}]

image.png

image.png


貼り付けたフロー

image.png


アクセストークンの設定

「set flow.line_accessToken」ノードをダブルクリックして、先ほどコピーしたアクセストークンを to 欄に貼り付けます。
image.png


Deploy!!


とりあえずテスト

LINE チャンネル設定画面の、下の方にあるQRコードを、LINEアプリで読み取り友達追加します。


おうむ返ししてくれたら成功です

image.png


カスタマイズ

★返信設定ノードに文字列を設定すると、その文字列をLineボットが返します。
つまり、ここにWatsonや他のAPIとの処理結果を入れてあげれば良いのです。
image.png


ここから本題


Watson Assistant


サンプルファイル

まずは、ここからサンプル用のファイルをダウンロードしてください。拡張子を「.json」にして保存してください。


Watson Assistantの準備

IBM CLoudのカタログページから「AI」セクションの中の 「Watson Assistant」を選択します。
image.png


サービスの作成

image.png


ツールの起動

image.png


Workspaceの作成

本来ならばここで新規にWorkspaceを作成しますが、今回は先ほどダウンロードしたサンプルファイルを使います。「Workspaces」をクリックしてください。
image.png


インポート

上むき矢印をクリックしてファイルをインポートします。
image.png


サンプルファイルを選択

image.png


Workspace

今回はカフェで注文を受ける実際は受けないで誘導するだけボットを作成しました。
image.png


Intentを見てみよう

Intentはユーザーの発話意図の分類。「目的語」になります。今回は「注文」というIntentを追加しました。
image.png


Entity

語群です。今回は「飲み物」「食べ物」を追加しました。
image.png


Content Catalog

よく使いそうなIntentは事前に作ってくれてあります。今回「一般」のIntentをインポートしました。
image.png


Content Catalog 一般

image.png


Dialog

発話の流れです。
image.png


Dialog ノード

ユーザーの発話内容を解析して、該当のノードが選択されます。ノードには発話理解の内容と、その場合の返事、実行後の処理などを設定できます。
image.png


Dialog ノード ランダム返答

複数の返答を用意してランダムで返すこともできます。
image.png


Dialog ノード 変数設定

理解した発話内容から変数の設定ができます。"@entity名.literal"とすることで、「ラテ」などの認識した結果を設定できます。"@entity名"のみの場合は、「カフェラテ」などの代表語が入ります。
image.png


テスト

Dialog画面の右上の「Try it」ボタンをクリックすると、会話テストができます。
image.png


Node-REDとの連携


フローの修正

Watson Assitantと接続するようにフローを修正するので、先ほどのフローを範囲選択して「Delete」で消してから、下のJSONをインポートし治してください。

LINEBOT-Watson-nodeflow.json
[{"id":"4fea658.10aa61c","type":"change","z":"2a26af3d.0992b8","name":"","rules":[{"t":"set","p":"line_accessToken","pt":"flow","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":220,"wires":[["bb0e606f.d432a8"]]},{"id":"11aaed71.5b964b","type":"http in","z":"2a26af3d.0992b8","name":"","url":"/lineWebhook","method":"post","upload":false,"swaggerDoc":"","x":150,"y":220,"wires":[["4fea658.10aa61c","13174f94.e4aec","c2fe4d09.3acca"]]},{"id":"c2fe4d09.3acca","type":"http response","z":"2a26af3d.0992b8","name":"","statusCode":"","headers":{},"x":350,"y":180,"wires":[]},{"id":"13174f94.e4aec","type":"debug","z":"2a26af3d.0992b8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":150,"y":420,"wires":[]},{"id":"6df59a10.cdf4ec","type":"http request","z":"2a26af3d.0992b8","name":"","method":"POST","ret":"txt","url":"https://api.line.me/v2/bot/message/reply","tls":"","x":670,"y":420,"wires":[[]]},{"id":"960030f8.701b78","type":"change","z":"2a26af3d.0992b8","name":"Watson Assistant 送信文設定","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.events[0].message.text","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":280,"wires":[["702fe99f.ea7ff"]]},{"id":"2ad2fb25.e0c424","type":"change","z":"2a26af3d.0992b8","name":"set HTTP Headers","rules":[{"t":"set","p":"headers","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"headers.Content-Type","pt":"msg","to":"application/json","tot":"str"},{"t":"set","p":"headers.Authorization","pt":"msg","to":"'Bearer ' & $flowContext(\"line_accessToken\")\t","tot":"jsonata"},{"t":"set","p":"payload.replyToken","pt":"msg","to":"replyToken","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":420,"wires":[["6df59a10.cdf4ec"]]},{"id":"a69f47cd.698288","type":"change","z":"2a26af3d.0992b8","name":"","rules":[{"t":"set","p":"payload.messages","pt":"msg","to":"[{\"type\":'text',\"text\":msg.payload.output.text[0]}]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":340,"wires":[["2ad2fb25.e0c424"]]},{"id":"702fe99f.ea7ff","type":"watson-conversation-v1","z":"2a26af3d.0992b8","name":"","workspaceid":"245f442f-1751-4b6f-9caa-2f2d9bef74aa","multiuser":false,"context":true,"empty-payload":false,"default-endpoint":true,"service-endpoint":"https://gateway.watsonplatform.net/assistant/api","timeout":"","optout-learning":false,"x":620,"y":280,"wires":[["a69f47cd.698288","fa0fc231.e611"]]},{"id":"bb0e606f.d432a8","type":"change","z":"2a26af3d.0992b8","name":"","rules":[{"t":"set","p":"replyToken","pt":"flow","to":"payload.events[0].replyToken","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":220,"wires":[["960030f8.701b78"]]},{"id":"fa0fc231.e611","type":"debug","z":"2a26af3d.0992b8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":690,"y":340,"wires":[]}]

インポート・Lineアクセストークン設定

下記のフローをインポートしたら、先ほどと同様に「set flow.line_accessToken」ノードにLINEチャンネルのアクセストークンを設定します。
image.png


Watson Assistant認証情報の確認

Watson Assistantの左側のタブ、上から2番目「Deploy」を選択し、「Credentials」をクリック。
必要なのは以下の情報です。
- Workspace ID
- Username
- Password

image.png


Node-RED, Watson Assistant ノード設定

上記情報を、Node-REDフローの青いアイコン「Watson Assistantノード」に設定します。
image.png


単体テスト方法

以下のようにinjectionノードに文字列を設定してWatson Assistantノードに接続すれば、動作確認ができます。
image.png


Deploy!!


完成

image.png


所感と補足

  • Watson Assistantは慣れるとわかりやすい
  • Node-REDとWatson Assistantの接続が簡単!
  • 今回はやらなかったけど、ユーザーの投稿した画像をWatson Visual Recognitionに投げるボットなどmの開発可能
  • Line ボットを実際に運用するには証明書の確認などもう少しやることがある
  • 似たような方法でClovaスキルも開発できます(APIは別)

Let's try!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした