LINEチャットボットとWatsonを連携する

日本で一番使われているチャットツールはやはりLINE？

チャットツール、いろいろありますね。WhatsApp、WeChat、Slack、Facebook Messengerなどなど。でも、IT業界以外も含め日本で一般的に普及しているのはLINEなのかなぁ、と思っております。（統計取った訳ではないです。個人的な感覚値として）
で、勉強会などでチャットボットの話をしても、やはり一番多いのはLINEとつなぎたい、という声です。ただ、つなぎが楽なのかSlackでのチャットボット作成のワークショップや記事は良くあるのですが、現在の仕様でLINEでのチャットボットの作り方がわかりやすくまとまっているサイトは少なかったです。
と、言うことで今回はLINEでのチャットボットの作り方、そして裏でWatson APIとつなぐ方法を説明したいと思います。

IBM Code Patterns

いつもは、Code Patternsから事例を取り出し解説するのですが、Code Patternsのほとんどの記事は海外で書かれたもの。LINEが普及しているのは日本含めた一部の国だけ。なので、残念ながらCode PatternsにはLINEを利用したシナリオはありませんでした。
こちらの手順は、IBM公式のチュートリアルとしても公開させて頂いております。
https://developer.ibm.com/tutorials/integrate-watson-assistant-with-line/

■概要

アプリケーション構成図

IBM Cloud側の作業

■IBM Cloudアカウント作成

先ずはIBM Cloudのアカウントが無いと先に進めないのでサクッと作成してしまいましょう。クレジットカード不要で、いつまででも無償で使えるライトアカウントというものを用意しています。
初めて作成する場合は全員このライトアカウントになります。今回は不要ですが、コンテナやブロックチェーンを使いたい方は、標準アカウント（PAYGアカウント）へアップグレードすることで利用可能になります。PAYGアカウントは、すべてのサービスが使えますが、従量課金アカウントですのでご利用の際はご注意下さい。

アカウント登録・IBM Cloudへのログインはこちらから。
https://ibm.biz/BdzkDN

■Watson Assistantの作成

IBM Cloudのカタログから、Watson Assistantを選択します。左側のカテゴリにてAIを選択するとすぐに見つけられます。

Watson Assistantを選択

サービス名、地域・組織・スペース、料金プランを設定して作成ボタンをクリックします。
地域：ダラス(Dallas)（推奨、他のリージョンでは出来ないこともDallasだとできるケースも多いです）
リソースグループ：default
料金プラン：無料のライトで行きましょう！

必要項目を設定したら作成ボタンをクリック

Assistant APIが作成されたら資格情報を取得します。
サービス資格情報メニューから資格情報を作成し、APIエンドポイントURL、ユーザー、パスワードを確認し控えておいてください。
※この手順はNode-REDがIBM Cloud上で実行されている場合でNode-REDとAssistant APIがバインドされている場合は不要です。

■Watson Assistantツールの起動

Watson Assistantのインスタンス作成後に表示される画面から、ツールを起動します。「Watson Assistantの起動」ボタンをクリックします。

「Watson Assistantの起動」ボタンをクリック

もし、画面を遷移してしまい、上記の画面へたどり着けなくなった場合は、IBM Cloudダッシュボード画面から、リソースリストからこの画面へたどり着くことができます。

画面左上に表示されているIBM Cloudのロゴマークをクリックするとダッシュボードへ遷移します。ダッシュボードから「リソースの表示」または「Services」を選択します。

リソースの表示 or Services

先程作成したAssitant APIのサービスを選択します。

作成済みのWatson Assistantへ

■Watson AssistantツールでSkillの作成

Watson Assistantはチャットボットなどで利用する会話文の定義やフローを学習させることができます。そのための作業スペースをSkillといいます。このSkillには一意のIDが割り当てられ、アプリからこのAPIを呼び出す際に利用されます。

SkillsタブのCreate newボタンをクリックすると会話フローの新規作成となります。Skill TypeはDialogを選択して下さい。

SkillsタブのCreate newボタン

Dialog skillを選択しNext

今回は予め用意した非常に簡単な会話フロー（目的と意図も設定）の定義ファイル（JSON）をインポートしてみましょう。
Import skillタブのChoose JSON Fileボタンをクリックします。

こちらからダウンロードしたJSONを読み込みます。

ファイルを選択したらImportボタンをクリックします。

JSONファイルを選択しImportボタンをクリック

これで完了です。
カスタマイズしたい方は、これをもとに改変してもらうか、新規に作成をしてみてください。

■Node-REDの作成

Node-REDをIBM Cloudへ作成します。カタログからスターター・キット→Node-RED Starterを選択し、アプリを作成してください。

ここでのアプリ名は、デフォルトではパブリッククラウドとしてインターネット上に公開される際のホスト名として使われますので、他の誰とも重複しない名前を付与する必要があります。例えば、イベント名＋日付や、個人名を付けると重複しにくいと思います。

Node-RED Starterを選択

他と重複しない名前を付ける

デフォルトでライトプランが選択されているのでそのまま作成

Node-RED作成後、先に作成したWatson Assistant APIをバインドします。
作成したNode-REDアプリの画面から、接続メニューを選択し「接続の作成」ボタンを選択。Watson Assistantが表示されるのでマウスオーバーすると右側に接続ボタンが出現するのでクリックします。

接続メニューから接続の作成

Watson Assistantを選択し「接続」をクリック

選択項目はデフォルトのまま接続

その後、再ステージングが行われるのでしばらくお待ち下さい。

再ステージングが完了したら、フローエディタへアクセスしてください。
初めてフローエディタを立ち上げる際には、以下のような画面が表示されます。
ダイアログに従い画面を進めて下さい。2つ目の画面でユーザー名とパスワードを設定するように促されます。これは、インターネット上に公開されるNode-REDフローエディターへアクセスする際のログインユーザー/パスワードです。他者からの不正アクセスを防ぐ意味でも設定することを強くおすすめします。

ダイアログに従い画面を進める

設定が終えるとNode-REDフローエディターへアクセスできるようになります。

Node-REDフローエディターへアクセス

Node-RED自体は非常にシンプルなフローになります。まずは完成形のNode-REDフロー定義を見てみましょう。

完成形フロー

Node-REDでは、LINEからWebhookで呼び出されるサーバーサイド処理を作成します。Watson Assistant APIを呼び出すのもこのNode-REDになります。完成版のフローはこちらからダウンロード頂けます。https://github.com/taijihagino/chatbot-lineapi-watsonapi

完成版のフローをインポートするには、上記でダウンロードしたJSONファイルをフローエディタへ読み込みます。

メニューから読み込み、クリップボードを選択

ダウンロードしたJSONを選択し読み込みボタンをクリック

一番最初のノードである「http in」ノードでは、このサーバーサイドアプリケーション（実態はNode.jsアプリ）を呼び出すためのURLのパスを設定します。GitHubからダウンロードした定義を復元するとここのパスには"/line_hook”が設定されています。こちらは好きな文字列へ変更して頂いても結構です。

Node-RED自体がそもそもNode.jsのウェブアプリケーションですので、IBM Cloud（PaaS）上で作成したNode-REDの環境では、既にURLが割り当てられています。このURLに「http in」で指定したパスを繋ぎ以下のようなURLになります。

https://<IBM Cloudで作った際のNode-REDのアプリ名>.mybluemix.net/<http inで指定したパス>/

例）https://fillgapapp01-nodered01.mybluemix.net/line_hook/

次に「Function」ノードの中を確認しましょう。
1つ目の「Function」ノード「getText」は、LINE＠のAPIがNode-REDのWebhook URLを呼び出した時に渡してくる返信用トークンの値を保持しておくための処理です。

//flowへ格納
flow.set(“replyToken”,msg.payload.events[0].replyToken);
return msg;

flowへ格納した値は、同じフロー内であればいつでもどこでも取り出せます。

次に「Change」ノードです。
Watson Assistant APIが受けられる形（msg.payload）に、LINE@から投げられてきた会話文を入れ直します。

そうしたら、実際にWatson Assistant APIを呼び出します。
AssistantのワークスペースのIDを設定してください。
ワークスペースID（現状はSkill IDと同じ）はWatson Assistantツールから確認できます。Skills画面にて先程作成した（インポートした）Skillのメニューから「View API Details」を選択します。

「View API Details」を選択

Workspace IDをコピー

IBM CloudでNode-REDとAssistant APIをバインドしてあればユーザー、パスワードは設定不要です。APIキーはのWatson Assistantの資格情報から取得した値を、Workspace IDは今コピーしたものをこちらへペーストします。

次に、2つ目の「Change」ノードです。
こちらは、Watson Assistantからの戻り値（JSON）の中の会話文のみをmsg.payload.optextへ入れ直しています。

2つ目の「Function」ノード「createReplyMessage」では、LINE@へ返却する会話文（返信）を組み立てます。

var post_request = {
 “headers”: {
 “content-type”: “application/json; charset=UTF-8”,
 “Authorization”: “ Bearer “ + “{LINEで生成するアクセストークン}”
 },
 “payload”: {
 //”replyToken”: msg.payload.events[0].replyToken,
 “replyToken”: flow.get(“replyToken”),
 “messages”: [
 {
 “type”: “text”,
 “text”: msg.payload.optext + “ฅ^•ﻌ•^ฅ”
 }
 ]
 }
};
return post_request;

会話の返事文を返すPOSTリクエストのパラメーターを設定しています。
・LINEで生成するアクセストークン（後述）
・先ほどflowへ格納したReplyトークン
・先程optextへ格納した実際に会話として返信する文章
を設定します。
ここでは返事文の最後に猫（犬？）のAAを加えてみてます。

最後に「http request」ノードです。
こちらは、LINE@のリプライ用URLを指定します。

https://api.line.me/v2/bot/message/reply

LINE側の作業

LINE developersへこちらからログインします。

ログインボタンをクリック

LINEアカウントでログイン

メールアドレスでログイン or QRコード読み取りでログイン

QRコードログインを選択した場合はこちらの画面から

■開発者情報を登録

開発者名とメールアドレスを登録します。

入力したら確認画面へ進む

この内容で作成する

■LINE developersでプロバイダーを作成

新規プロバイダー作成ボタンを選択します。

上下どちらかのボタンをクリック

プロバイダー名を設定します。

プロバイダー名を設定→確認する

作成する

プロバイダーが作成されたのを確認したら、Messaging APIの「チャネルを作成する」をクリックします。

Messaging APIを選択

■新規チャネル作成

チャネルに必要な情報を設定していきます。
設定項目は下記の通り、ご自身の内容に合わせ設定します。

・アプリアイコン画像：好きな画像（3MB以内, JPEG/PNG/GIF/BMP形式）
・アプリ名：最大20文字
・アプリ説明：最大500文字
・大業種・小業種：一番近いものを選択
・メールアドレス：お知らせ等の配信用

まずは、アプリアイコン画像を登録します。そのままでもOKですが、その場合はチャット画面にアイコンは表示されません。
ここでのサンプルはネコのbotなのでGitHubに用意してますこちらの画像を使って頂いても結構です。

アプリアイコン登録

次にアプリ名、アプリ説明、業種、メールアドレスをそれぞれ設定します。業種は好きなものを設定しましょう。

アプリ名、説明、業種、メールアドレスを記述

プライバシーポリシーURLとサービス利用規約URLは省略し「入力内容を確認する」ボタンを選択

利用規約へ同意すれば完了です。

情報利用への同意

LINE@とMessaging APIの利用規約への同意項目にチェックし作成

■Channelの基本設定

作成したチャネルの設定をしていきます。作成したチャネルのパネルをクリックします。

チャネルの設定へ進む

ここで必要なのは以下の2つになります。
・アクセストークン（ロングターム）
・Webhook URL

アクセストークンを生成します。
生成したトークンは、前述のNode-REDの「Function」ノード内に記述してください。

再発行ボタンをクリック

再発行ボタンをクリック

次に、以下を設定してください。
・Webhook送信を「利用する」へ
・Webhook URLに先程Node-REDの章で説明したWebhook URLを記述
・自動応答メッセージをの設定→別ウィンドウで以下画像の通り設定

これで、すべて完了しました。

動作確認

Channel設定画面の下方にQRコードが生成されているので、これを自分のスマホのLINEアプリから、友達追加→QRコードで追加してください。

友達追加用のQRコード

ネコがチャットボットで会話してくれる

無事、みなさんのお持ちのスマホ上へ、このチャットボットが登場し使えるようになったのではないでしょうか。

ぜひ、これをベースにみなさまアレンジを加えて試してみてくださいね。

――――――――――――――――――――――――――――――――――――――

Information

IBM Code Patterns
http://developer.ibm.com/jp/

IBM だチャンネルPodcast
https://ibm.biz/BdjthM

IBM Developer Advocate Profile
https://developer.ibm.com/code/community/advocates/taijih

Cloud Developers Circle
（ベンダー依存しないクラウドデベロッパーのためのコミュニティ）
https://cdevc.connpass.com/

Node-RED ユーザーグループ
https://node-red.connpass.com/

IBM Cloud ユーザーグループ
https://bmxug.connpass.com/