JavaScriptのチャットボットライブラリ「BotUI」ことはじめ

はじめに

チャットボットのUIをJavaScriptで簡単に実装できてしまう「BotUI」を試してみます。
BotUIは、Vue.js とPromise をベースにして作られていて、とても簡単なそうです。
また、OSS公開されているので手元ですべてをカスタマイズすることも可能です。
チャットボット化して対話形式で日常をハックしたいけど、恥ずかしかったり、いろいろな大人の事情でデータをクラウドに上げたくないなんてこともあるかと思いますが、そんなときにはピッタリです。
それではいろいろと試していきたいと思います。

BotUIの1次情報

やってみる

インストール

本家ドキュメントサイトに結構丁寧に手順を書いてもらっているので参照しながら進めます。
英語ですが、簡単な英語で書かれていますのでなんとなく大丈夫かと思います。

CDN経由で次のファイルを読み込めば使えます。

// 基本のCSSファイル
https://unpkg.com/botui/build/botui.min.css

// デフォルトテーマCSSファイル（独自テーマを作って変更することも可能）
https://unpkg.com/botui/build/botui-theme-default.css

// Vue.js のメインファイル
https://cdn.jsdelivr.net/vue/latest/vue.min.js

// BotUI のメインファイル
https://unpkg.com/botui/build/botui.min.js

また、これらのファイルは、NPM やWebPack を使ってインストールすることもできますし、GitHub repoからダウンロードして利用することもできます。

Hello World

ドキュメントページの記載に従ってHello World を作ってみます。下記のコードを記載したHTMLファイルを作成します（index.html）。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>BotUI - Hello World</title>
    <meta name="viewport" content="width=device-width", initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" />
  </head>
  <body>
    <div class="botui-app-container" id="hello-world">
      <bot-ui></bot-ui>
    </div>
  <script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
  <script src="https://unpkg.com/botui/build/botui.min.js"></script>
  <script>
    var botui = new BotUI('hello-world');

    botui.message.add({
      content: 'Hello World from bot!'
    }).then(function(){ // 前のメッセージが表示されるまで待つ
      botui.message.add({
        delay: 1000,
        human: true,
        content: 'Hello World from human!'
      });
    });
  </script>
  </body>
</html>

そして、ブラウザで実行しましょう。（私はお手軽にPython3でローカルサーバを立てて実行しました。）
そうするとBot側のメッセージ（Hello World from bot!）とユーザ側のメッセージ（Hello World from human!）が下記のように表示されると思います。
f:id:tacoyaky:20180503171952p:plain

BotUIの基本概念

BotUIでは、JavaScriptのPromiseをベースにしたメソッドチェーンを繋げていくだけという簡単な構造です。
サンプルのHello World を例にしてメッセージ表示部分の実装を見ていきましょう。
Botとユーザがあいさつをするだけの実装ですね。

var botui = new BotUI('hello-world');

botui.message.add({
  content: 'Hello World from bot!'
}).then(function(){ // 前のメッセージが表示されるまで待つ
  botui.message.add({
    delay: 1000,
    human: true,
    content: 'Hello World from human!'
  });
});

１つめのbotui.message.addのcontentで指定した文字列がまず表示されて、その後に繋げて記述されている２つめのbotui.message.addのcontentで指定した文字列が表示されるようになっています。このときチェーンを繋げずに記述すると、１つめと２つめのメッセージが同時に表示されてしまいます。

botui.message.addにhuman: trueを指定していればユーザ側（画面右側）にメッセージが表示されます。逆にhuman: falseを指定したりhuman:を省略したりするとBot側（画面左側）に表示されます。

また、human:を使わない書き方としてbotui.message.botとbotui.message.humanがあります。
これらは単なるshorthandsとのことです。
つまり

botui.message.add({
  human: false,
  content: 'Hello World from bot!'
}).then(function(){
  botui.message.add({
    human: true,
    content: 'Hello World from human!'
  });
});

と

botui.message.bot({
  content: 'Hello World from bot!'
}).then(function(){
  botui.message.human({
    content: 'Hello World from human!'
  });
});

は同様の結果が表示されます。

さらに、「message」ではなく「action」を指定すれば「入力フォーム」や「ボタン」を利用することができます。

// 入力フォームを表示する
botui.action.text({
  action: {
    placeholder: 'Please input your name.'
  }
});

f:id:tacoyaky:20180503171958p:plain

// ボタンを表示する
botui.action.button ({
  action: [{
    text: 'yes',
    value: true
  }, {
    text: 'no',
    value: false
  }]
});

f:id:tacoyaky:20180503171955p:plain

などなど、他にもいろいろなことができそうです。

まとめ

「BotUI」を使ううえで大事なことは３つだけ。これらをしっかり使えればOKです。
- Message：テキストや埋め込みコンテンツを表示する。
- Action：入力フォームやボタンなでユーザからの入力を受け取る。
- .then()：処理を繋げていく。

公式ドキュメントを見ると、アイコンの設定やチャット画面の独自テーマの作り方などなどいろいろなことができそうです。
開発も活発なようですし、楽しみなOSSです。
これからもう少し突っ込んで触っていければと思います。

たころぐ

興味の向くままに

JavaScriptのチャットボットライブラリ「BotUI」ことはじめ

JavaScriptのチャットボットライブラリ「BotUI」ことはじめ

はじめに

BotUIの1次情報

やってみる

インストール

Hello World

BotUIの基本概念

まとめ