日本で一番使われているチャットツールはやはり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を選択するとすぐに見つけられます。
サービス名、地域・組織・スペース、料金プランを設定して作成ボタンをクリックします。
地域:ダラス(Dallas)(推奨、他のリージョンでは出来ないこともDallasだとできるケースも多いです)
リソースグループ:default
料金プラン:無料のライトで行きましょう!
Assistant APIが作成されたら資格情報を取得します。
サービス資格情報メニューから資格情報を作成し、APIエンドポイントURL、ユーザー、パスワードを確認し控えておいてください。
※この手順はNode-REDがIBM Cloud上で実行されている場合でNode-REDとAssistant APIがバインドされている場合は不要です。
■Watson Assistantツールの起動
Watson Assistantのインスタンス作成後に表示される画面から、ツールを起動します。「Watson Assistantの起動」ボタンをクリックします。
もし、画面を遷移してしまい、上記の画面へたどり着けなくなった場合は、IBM Cloudダッシュボード画面から、リソースリストからこの画面へたどり着くことができます。
画面左上に表示されているIBM Cloudのロゴマークをクリックするとダッシュボードへ遷移します。ダッシュボードから「リソースの表示」または「Services」を選択します。
先程作成したAssitant APIのサービスを選択します。
■Watson AssistantツールでSkillの作成
Watson Assistantはチャットボットなどで利用する会話文の定義やフローを学習させることができます。そのための作業スペースをSkillといいます。このSkillには一意のIDが割り当てられ、アプリからこのAPIを呼び出す際に利用されます。
SkillsタブのCreate newボタンをクリックすると会話フローの新規作成となります。Skill TypeはDialogを選択して下さい。
今回は予め用意した非常に簡単な会話フロー(目的と意図も設定)の定義ファイル(JSON)をインポートしてみましょう。
Import skillタブのChoose JSON Fileボタンをクリックします。
こちらからダウンロードしたJSONを読み込みます。
ファイルを選択したらImportボタンをクリックします。
これで完了です。
カスタマイズしたい方は、これをもとに改変してもらうか、新規に作成をしてみてください。
■Node-REDの作成
Node-REDをIBM Cloudへ作成します。カタログからスターター・キット→Node-RED Starterを選択し、アプリを作成してください。
ここでのアプリ名は、デフォルトではパブリッククラウドとしてインターネット上に公開される際のホスト名として使われますので、他の誰とも重複しない名前を付与する必要があります。例えば、イベント名+日付や、個人名を付けると重複しにくいと思います。
Node-RED作成後、先に作成したWatson Assistant APIをバインドします。
作成したNode-REDアプリの画面から、接続メニューを選択し「接続の作成」ボタンを選択。Watson Assistantが表示されるのでマウスオーバーすると右側に接続ボタンが出現するのでクリックします。
その後、再ステージングが行われるのでしばらくお待ち下さい。
再ステージングが完了したら、フローエディタへアクセスしてください。
初めてフローエディタを立ち上げる際には、以下のような画面が表示されます。
ダイアログに従い画面を進めて下さい。2つ目の画面でユーザー名とパスワードを設定するように促されます。これは、インターネット上に公開される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ファイルをフローエディタへ読み込みます。
一番最初のノードである「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」を選択します。
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 developersでプロバイダーを作成
新規プロバイダー作成ボタンを選択します。
プロバイダー名を設定します。
プロバイダーが作成されたのを確認したら、Messaging APIの「チャネルを作成する」をクリックします。
■新規チャネル作成
チャネルに必要な情報を設定していきます。
設定項目は下記の通り、ご自身の内容に合わせ設定します。
・アプリアイコン画像:好きな画像(3MB以内, JPEG/PNG/GIF/BMP形式)
・アプリ名:最大20文字
・アプリ説明:最大500文字
・大業種・小業種:一番近いものを選択
・メールアドレス:お知らせ等の配信用
まずは、アプリアイコン画像を登録します。そのままでもOKですが、その場合はチャット画面にアイコンは表示されません。
ここでのサンプルはネコのbotなのでGitHubに用意してますこちらの画像を使って頂いても結構です。
次にアプリ名、アプリ説明、業種、メールアドレスをそれぞれ設定します。業種は好きなものを設定しましょう。
利用規約へ同意すれば完了です。
■Channelの基本設定
作成したチャネルの設定をしていきます。作成したチャネルのパネルをクリックします。
ここで必要なのは以下の2つになります。
・アクセストークン(ロングターム)
・Webhook URL
アクセストークンを生成します。
生成したトークンは、前述のNode-REDの「Function」ノード内に記述してください。
次に、以下を設定してください。
・Webhook送信を「利用する」へ
・Webhook URLに先程Node-REDの章で説明したWebhook URLを記述
・自動応答メッセージをの設定→別ウィンドウで以下画像の通り設定
これで、すべて完了しました。
動作確認
Channel設定画面の下方にQRコードが生成されているので、これを自分のスマホのLINEアプリから、友達追加→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/