はじめに

FacebookやLINEが自社のメッセージングサービスのプラットフォームを一部開発者に公開したりと、チャットボットがブームの兆しを見せ始めていますが、先日、NTTドコモとIPI社が共同開発した「Repl-AI」という対話式チャットボットのプラットフォームが公開されました。

[ニュース] IPIとドコモ、自然に会話するボットを簡単に作成できる「Repl-AI」 https://t.co/a2n340V4zH pic.twitter.com/3rQsGqEHZc
— ケータイ Watch (@ktai_watch) 2016年4月22日

上記の記事にもある通り、Repl-AIはプログラミング無しで対話式のチャットボットを作成するためのツールです。『「XX」と話しかけたら「YY」と返す』といったルールベースでの対話フローを、ブラウザ上の操作だけで作ることができます。

現時点でRepl-AIで作成した対話フローにアクセスするにはREST APIを経由するしかないので、実際にチャットボットを作るとなると、何らかのメッセージングサービス（slackやLINEなど）への繋ぎ込み部分を作る必要があります。折角ブラウザだけでボットが作れるのを売りにしているのに、繋ぎ込みでコードを書かなくてはいけないのが勿体ないなと個人的に思ったので、Heroku buttonを使ってコードを1行も書かずに対話式チャットボットを作る仕組みを作ってみました。

ノープログラミングで対話式チャットボットを作る手順

準備

1. docomo developer supportアカウント取得

Repl-AIを使うにはdocomo developer supportのアカウントが必要になります。未取得の場合は、以下のURLにアクセスしてアカウントを作成します。
https://dev.smt.docomo.ne.jp/?p=login

2. Herokuアカウント取得

今回作成したチャットボットを動かす環境としてHerokuを使うので、Herokuアカウントを持っていない場合は以下URLより作成します。
https://id.heroku.com/login

3. slackへのボット登録

ボットが動くサービスとしてslackを使う場合、salckにボットを登録します。slackを使わない場合、この項目は対応不要です。

slackボットの登録方法は既にたくさん記事があるので以下の記事などを参考にしてください。
SlackのHubot Integrationが知らぬ間にアップデートされてた
今回の例では「repl-bot」という名前でボットを作成します。詳細画面に表示される「API Token」の値を後で使用します。

Repl-AI上でシナリオを作成

1. プロジェクト作成

準備が整ったら早速Repl-AIでシナリオを組んでいきます。https://repl-ai.jp/ にログインするとまず以下のような画面が開くので「新規作成/インポート」をクリックしてプロジェクトを新規作成します。

今回は「hubotsample」という名前でプロジェクトを作成します。

一覧に追加されました。

2. ボット・シナリオ作成

次にボットとシナリオを作成します。Replでは1つのプロジェクトが複数のボットを持ち、1つのボットが複数のシナリオを持つようになっているようです。
今回のボットIDとボット名はslackbotとします。（なお、このボットID・ボット名は、slackやLINE上で作成するボットID・ボット名などとは一切関係ありません。自由に付けてください。)

ボットが作成されたら、その下にシナリオを新規作成します。

新規シナリオ作成画面では、挨拶シナリオとシンプルシナリオの2種類からテンプレートを選べるので、今回は挨拶を選択します。シナリオIDはaisatsu、シナリオ名は挨拶シナリオとします。

シナリオ一覧に先ほど作成した挨拶シナリオが追加されました。

3. 対話フロー作成

作成したシナリオをクリックすると編集画面（オーサリングツール）が開きます。
まずは何も変更も加えずに左下の保存ボタンを押しましょう。

次に（ここわりと重要なんですが）、フローを実際に反映させるために、デプロイを行う必要があります。デプロイするためのボタンはボット一覧画面にあります。

デプロイボタンを押して、先ほど作ったaisatsuのチェックボックスにチェックを入れて「適用する」ボタンを押しましょう。

以下のようなダイアログが出ればOKです。

これでRepl-AI上の作業は最低限終了したことになります。次に、この対話フローをslackボットに反映させるためのアプリケーションを作成します。

slack用のボットをHerokuにデプロイ

Herokuを使ってslackボットと連携するためのコードをgithubにおきました。
https://github.com/thorikawa/hubot-repl-slack
このページにアクセスして"Deploy to Heroku"のボタンをクリックします。

Herokuの画面が開くので、ログインして処理を進めます。以下のようにHeroku上のアプリケーションを作成するための画面が開くはずです。

この新規作成画面でSlackやREPLと連携するための環境変数の値も入力します。Config Variableという項目で、それぞれ以下の値を入れていきます。

HUBOT_SLACK_TOKEN: Slack botのtokenの値
HUBOT_REPL_API_KEY: Repl-AIのプロジェクト一覧で表示されているAPIキーの値
HUBOT_REPL_BOT_ID: 使用するRepl-AIのボットID(今回の例ではslackbot)
HUBOT_REPL_TOPIC_ID: 使用するRepl-AIのシナリオID(今回の例ではaisatsu)

上記値設定後「Deploy for Free」ボタンを押して、成功すれば完了です！[^1]

slackボットの動作確認

Deploy後、作成したボットがslack上でオンラインになっていることを確認します。

早速話しかけてみます。

ちゃんと動いている！！しかし会話が噛み合っていない…

Repl-AIでのシナリオを修正

会話が噛み合わないのは理由があって、挨拶のテンプレートから作成されるシナリオをもう一度よく見てみると「システム側の発話から開始」というボックスからのみ矢印がでています。

slack上の会話は、基本的にユーザー開始（ユーザーがボットに何か話しかけて会話が始まる）のはずなので、ユーザーが何を発言しても、「はじめまして」のボックスにフローが来るようにシナリオを修正してみます。
左側メニューから「ユーザー発話」ボックスをドラッグ&ドロップし、青いボックスを追加します。これはデフォルトでは「どんなユーザー発話に対してもマッチするボックス」が作成されます。「ユーザー側の発話から開始」からこの新規作成したボックスの入力に線をつなぎ、さらに出力から「はじめまして」のボックスの入力に線をつなぎます。

これで「最初にユーザーが何を話しても、はじめましての流れでボットとの会話が始まる」というフローができました。
このシナリオを保存しデプロイします。再度試してみましょう。

きちんと名前を覚えてくれる会話になりました！ ¹

Repl-AIでいろいろ試してみる

せっかくなので色々なパターンを試してみましょう。Repl-AI内にはチュートリアルもあるので、詳細はそちらを確認されるとよいと思います。
再びReplでaisatsuシナリオを開きますが、とりあえず今あるボックスは全部削除（削除ボタンは、各ボックスの左上にマウスをあてると出てきます）した上で、以下ようなシナリオを作ってみます。

特定のキーワードに特定のパターンで返す

特定のキーワードに反応して特定のパターンを返す例として、今日のラッキーアイテムなどの情報を教えてくれるボットを作ってみましょう。フロー全体は以下のようになっています。

ユーザー発話のボックスは以下のようになっています。「部分一致」のボックスにチェックを入れることによって、この場合は「ラッキーアイテム」を含む文全体にマッチするようになります。

システム発話のボックスは以下のようになっています。

実際に会話してみましょう。（保存とデプロイを忘れずに！）

ちゃんとキーワードにマッチする回答が返ってきます！素敵！

ランダムで返す

上記の応答にランダム要素を入れてみましょう。システム発話を開いた編集画面で「発話内容」の「+」ボタンをクリックしていくとランダムな応答を追加できます。

保存＆デプロイして再び試してみます。

ランダム回答できた！かんたん！！

その他

きりがないのでこの辺にしておきますが、値を記憶する仕組みもあるので、たとえばユーザーの名前を応答に含めることもできますし、条件分岐と記憶されたユーザー名を使って、ユーザーごとに違う応答を返す、といったこともできます。

LINEボットへの対応

せっかくなのでslackだけではなく、先日ボットが作れるようになったLINEボットも作ってみましょう。こちらもノープログラミングで、対話式のLINEボットが作れます！

ボット登録

「LINE BUSINESS CENTER」 https://business.line.me/ から登録申請を行うことでボットアカウントを作成できます。

登録後ボットアカウントの詳細画面で以下のような情報が見れるはずです。
この画面上の「Channel ID」「Channel Secret」「MID」の値を後で使用します。

LINE用のボットをherokuにデプロイ

LINEボット用のコードをgithubに置きました。
https://github.com/thorikawa/hubot-repl-line
このページにアクセスして"Deploy to Heroku"のボタンをクリックします。

slackの時と同様、herokuの画面が開くので、ログインして処理を進めます。
Config Variableの項目で、以下の値を入力します。

HUBOT_LINE_CHANNEL_ID: LINEボット詳細画面にあるChannel IDの値
HUBOT_LINE_CHANNEL_SECRET: LINEボット詳細画面にあるChannel Secretの値
HUBOT_LINE_CHANNEL_MID: LINEボット詳細画面にあるChannel MIDの値
HUBOT_REPL_API_KEY: Repl-AIのプロジェクト一覧で表示されているAPIキーの値
HUBOT_REPL_BOT_ID: 使用するRepl-AIのボットID(今回の例ではslackbot)
HUBOT_REPL_TOPIC_ID: 使用するRepl-AIのシナリオID(今回の例ではaisatsu)

上記値設定後「Deploy for Free」ボタンを押して、成功が表示されることを確認します。²

herokuの情報をLINEボットに反映

herokuへのデプロイが完了したら、今度はその情報をLINEボットの方にも反映させる必要があります。

heroku上のデプロイ完了後、表示される「Manage App」のボタンをクリックします。

Add-onsという項目に「Fixie」が表示されているはずなので、クリックします。

Fixieの画面で「Account」をクリックすると以下のように「Outbound IPs」が表示されるはずです。

このIPアドレスをLINEボット詳細画面のServer IP Whitelistに追加します。

さらにherokuの管理画面で、Settings->Domainsの項目で新規作成されたherokuアプリケーションのドメインが確認できるはず。このドメイン名を元に https://ドメイン名:443/hubot/line/callback というURLをLINEボット詳細画面のCallback URLに登録します。

LINEボットの動作確認

これで準備は完了です。QRコードを読み込んでフレンド追加し、実際に動作を確認してみましょう。

動いてます！なんと、コードを1行も書かないでLINEボットまで作れました！！

仕組み

今回作成した仕組みについての解説です。ざっくり言うと、チャットエンジン部分にはhubotを使っていて、hubot slack adapterもしくはhubot line adapterを使って、それぞれのサービスからメッセージを受け取って、その内容をRepl-AIのAPIに丸投げしています。

Repl-AIのAPIはRegistration（ユーザー登録)とDialogue(会話)の2種類があって、まずRegistration APIでユーザーIDを発行してから、そのIDと入力の文章をDialogue APIに投げる流れになっているんですが、今回作成したコードではhubotのmessageに含まれるuser名をキーにして、まだRepl用のユーザーIDを発行していない場合はRegistration APIにユーザーID発行を依頼しています。

興味有る方は、コードも大して長くないので全文参照されるとよいと思います。
https://github.com/thorikawa/hubot-repl/blob/master/src/repl.coffee

おわりに

heroku buttonとRepl-AIを使って、slack用ボットとLINE用ボットをノープログラミングで作る仕組みについて解説しました。こういう技術の受け皿を広げてくれるような仕組みはとても素敵だと思います。

エンジニアの方もそうでない方も、面白いチャットボットを作ってみてください！

ここでは手順を省略しますが、ボットが前回失敗したときの名前を覚えているため、実際に上記の会話にするにはHerokuを再起動してメモリをクリアする（正確にはRepl-AIによって払いだされたUser Idを一旦クリアする）必要があります。 ↩
まれに"could not find the source blob"というエラーが表示されてDeployできないことがあるようです。その場合は、githubページで"Deploy to heroku"ボタンを押す所からやり直すとうまくいくようです。 ↩