enebularとSUNABAを使ってローコードでチャットボット開発する #LINEmessagingAPI

この記事は「enebular Advent Calendar 2020」の7日目です。

また、2020/11/4に行われた「ゆるふわマシンラーニング vol.5」にてLTさせていただいた内容を再記事化したものです。
Speakerdeckの方に当時のスライドを載せていますので、合わせて確認いただきながら読んでもらえればなと思います。

SUNABAとは

Docomoが提供しているチャットボット開発のためのプラットフォームです。

対話シナリオをGUIで構築できる
ユーザーとの会話内容(ステータス)を保持できる
xAIMLという形式で作成した会話シナリオをエクスポート・インポートできる
作成したシナリオをAPI化できる

などの特徴がありまして、楽に会話シナリオ構築ができ、そのまま公開できてしまうのがメリットとしてあります。

会話シナリオはこのような画面で編集することができます。

また、このようにGUIで作成した会話シナリオを、コード形式でエクスポート・インポートする機能があります。「xAIML」という形式が使われており、これは「AIML」というXMLベースの言語をDocomo側が独自に改良したものだそうです。

↑雰囲気としてはこんな感じのものになります。

また、作成したシナリオをAPIとして公開できるため、このAPIと通信することでLINE上で会話できるチャットボットを開発することができそうです。
ただ、その場合はSUNABAのAPIと、LINE Messaging APIを呼び出して制御するための中継地点としてバックエンドの機能が必要になり、サーバの構築とAPIプログラムのスクラッチ開発が必要になります。
この中継地点を、今回は「enebular」を用いることでコードをほとんど書くことなく、サーバも立てることなく、チャットボットを開発してみたいと思います。

enebularについてのキャッチアップ(おすすめ)

いきなりenebularを使おうといっても、どういった仕様のものでどのように使うべきなのか、初めて触る際にはわからないことが多くなります。わからないときはとりあえず真似っこをしてみるのが一番理解が早いかなと思うのですが、がおまるさんという方がハンズオンされていた「Teachable MachineとenebularとLINE Botで機械学習を体験しよう！」という資料がめちゃくちゃわかりやすく、とっても入門することができました。まだenebularを触ったことがない方は、こちらを最初から最後までなぞっていくことで、enebularの理解が深まっていくと思います。
(大変ありがとうございました！！！)

このハンズオンでは、enebularを使ってLINEのチャットボットを作っていますが、処理の途中でTeachable Machineとの連携をしています。僕が今回やりたいSUNABAとの連携は、このTeachable Machineとの連携をSUNABAに置き換えることで実現できそうなので、その方向性で実装していきたいと思います。

※ちなみにがおまるさんは、今回のenebular Advent Calendar 2020 1日目で湯婆婆の話を投稿されているので、是非ご覧ください。

LINE Developer Consoleでのセットアップ

LINEでのチャットボット開発を行うためには、LINE Developer Consoleでのプロバイダー作成、チャネル作成を経て、エンドポイント登録やアクセストークン情報などなどを控えておく必要があるのですが、そのあたりの手順は今回は割愛させていただきます。上述のハンズオン資料にそのあたりも大変わかりやすく記載されているため、是非そちらをご覧ください！！
(大変ありがとうございました！！！)

SUNABAのセットアップ

ここからはSUNABAのセットアップ手順を、画面のキャプチャを交えて解説します。
解説といっても、基本的には「新規登録」 -> 「ボット(会話シナリオ)作成」 -> 「ボット公開&エンドポイント情報取得」の流れです。

新規登録

Googleログインですぐできます。ログイン後、固有のIDとなるテナント名を登録します。

ボット(会話シナリオ)作成

ボット一覧画面から「ボットの追加」を押し、新しく会話シナリオを作成します。このとき、「既存のボットを複製する」という項目を選ぶことができます。SUNABAにはデフォルトでいくつかの会話シナリオパターンがセットされているのですが、自分が作成したい会話シナリオがデフォルトのものに近しい場合、デフォルトのものから複製&編集することで、SUNABAに慣れながらかつ短時間で会話シナリオの作成ができるでしょう。

ボットの追加ができたら、「GUIで編集する」というボタンを押下することで、シナリオ編集画面にいくことができ、そこでシナリオの編集が行えます。

ボット公開&エンドポイント情報取得

ボットの一覧から緑色の「デプロイ」ボタンを押下することで、作成した会話シナリオのボットを公開することができます。
またその状態で、作成したチャットボットと会話が行えるシミュレーターが用意されており、サイドメニューの「APIコンソール」という所から遷移できます。

テキストウィンドウに文字を打ち込むことで会話することができるので、自分が組んだ通りに会話が行えるかどうかのテストができます。
また、右側にはその際にやり取りされるHTTPリクエストの内容が表示されます。ここに表示される情報が、enebular側への設定には必要となるため、控えておきましょう。

念のため、curlなどで叩けるかどうかをこのタイミングでテストしてもいいかもしれません。

enebularのセットアップ

大まかに下記の順番でセットアップしていきます。

LINEのMessaging APIノードを追加する
LINEからのWebhook設定
LINEへのリクエストパラメータ解析&SUNABAへのリクエストボディ作成
SUNABAへのリクエスト処理の作成
SUNABAからのレスポンスを解析&LINEリプライの内容を作成
LINEへのリプライ処理を作成

1. LINEのMessaging APIノードを追加する

enebularのノード編集画面では、左側に様々なノードが用意されており、それをドラッグ&ドロップすることで行いたい処理を構成できます。ただ、デフォルトではLINE Messaging APIと通信してくれるノードはないため、こちらを「右上のハンバーガーメニュー」 -> 「パレットの管理」 -> 「ノードの追加」より、node-red-contrib-line-messaging-apiを検索して追加します。

2. LINEからのWebhook設定

「http in」という名前のノードを使用することで、LINE Developer Consoleに設定するためのエンドポイントを作成します。
ここでは「/sunababot」と記載し、右上の「i」マークにカーソルを合わせることでエンドポイント用のドメインが取得できるため、「https://ドメイン/sunababot」という形でLINE Developer Consoleに設定しましょう。
※このドメインは、enebularノード編集画面を立ち上げるたびに変更されるため注意！(enebularの仕様です。)

3. LINEへのリクエストパラメータ解析&SUNABAへのリクエストボディ作成

LINE上で何かメッセージを送信したら、2番で作成したエンドポイントにリクエストデータがくるわけですが、そのデータを解析し、SUNABA APIに送るためのリクエストデータを作成してあげる必要があります。「function」という名前のノードを使用することで、この辺りの処理を少しだけコードを書くことで実装します。

function-node-1.js

// LINE APPからエンドポイントへのリクエストパラメータから、使用する要素を抽出
const messageID = msg.payload.events[0].message.id;
const replyToken = msg.payload.events[0].replyToken;
const messageText = msg.payload.events[0].message.text;

msg.messageID = messageID;
msg.replyToken = replyToken;

// SUNABAにPOSTするリクエストボディを作成
msg.payload = {
  "appId": "your-app-id",
  "botId": "your-bot-id",
  "voiceText": `${messageText}`, // LINEに入力したメッセージをそのままSUNABAのVoiceTextに渡す
  "initTalkingFlag": false,
  "initTopicId": "enebular-20count", // シナリオを作成した際に作ったID名
  "language": "ja-JP"
}

return msg;

4. SUNABAへのリクエスト処理の作成

「http request」という名前のノードを使用することで、SUNABA APIへのリクエストを行います。
実際に送られるリクエストボディデータは、「3. LINEへのリクエストパラメータ解析&SUNABAへのリクエストボディ作成」にて記述した通りのJSONデータが送られます。

5. SUNABAからのレスポンスを解析&LINEリプライの内容を作成

SUNABAから返却された返答文をLINEにリプライするために、「3. LINEへのリクエストパラメータ解析&SUNABAへのリクエストボディ作成」でやったようなデータの中継処理を書いていく必要があります。ここでも「function」ノードを使用することで、SUNABAからのレスポンス値解析とLINE Messaging APIへのリクエストを作成してあげます。

function-node-2.js

// SUNABAのレスポンスから返答文を抽出
const replyMessage = msg.payload.systemText.expression;
msg.payload = {};

// LINEリプライのためのレスポンスを整形
msg.payload.events = [
    {
        "type": "message",
        "replyToken": msg.replyToken,
        "message": {
            "type": "text",
            "text": `${replyMessage}`
        }
    }
];
return msg;

6. LINEへのリプライ処理を作成

追加したLINE Messaging APIノードの中から「ReplyMessage」ノードを選択し、LINEへのリプライ処理を作成します。
ここにはLINE Developer Consoleに記載されている、アクセストークンとシークレットトークンを記載します。

以上のノードを、下記のような形につなげられれば、チャットボットの完成です！

チャットボットを動かしてみる

今回は、「20カウントゲーム」という会話シナリオを作ってみました。ユーザー側とボット側がそれぞれ1〜３の数字を交互に言い合い、20を言ってしまった方が負け、というものです。

このような形で動作させることができました！

SUNABAでは、このシナリオですと合計点管理のために点数を保持しておくことや、点数状態と提示した点数による勝敗確定条件などの、シナリオに関わるバックエンド処理を担うことができます。DBやSession用のストレージみたいなのを用意する必要がないので、この辺りもSUNABAの強みですね。

まとめ

SUNABAのGUIでの会話シナリオ編集機能を使うことで、ある程度複雑な会話でも作成することができそうです。プログラムで作ろうとするとif文地獄になるようなところを、こう言ったサービスに寄せられるのはいいですね。
ただ、LINEで入力した単語に対してどれくらいの精度で反応してくれるのかというのは今回未検証です。「お腹が空いた」「お腹が空きました」などの言葉のゆらぎをどれだけ吸収してくれるかはもうちょっと検証が必要かと思います。(ただ、触っていた限りはほとんど単語マッチな印象でした)

チャットボットで何かシステムを構築する時は、会話シナリオが体験の肉付けをしてくれるます。通常ならば機械的な操作になるようなものでも、チャットボットに話しかける際には会話する相手を意識した体験になります。だからこそ会話シナリオというのは重要な要素だと思っているので、チャットボットで実現したいシステムにうまく組み込んで行きたいですね。

改めて、こういった外部連携ありのチャットボットをノーコード/ローコードで作れるenebularというサービスはすごいなと感じました。