darudaru

だるだるしてるエンジニア

JavaScriptだけで作るチャットボット「BotUI」

JavaScript

JavaScriptだけで作れるbotフレームワーク「BotUI」で遊んでみた。

botui.org

インストール

npmのインストール

npm install botui --save --save-exact

遊ぶ

html

  • BotUIのcssとjsを読み込む。CDNのパスを埋め込むだけでいいです。
  • botを表示したい位置に<bot-ui>タグを挿入します。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>BotUI - Rabbit</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui.min.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui-theme-default.css" />
    </head>
    <body>
        <div class="botui-app-container" id="rabbit">
            <bot-ui></bot-ui>
        </div>
        <script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/botui/build/botui.js"></script>
        …
  </body>
</html>

javascript

ウサギが好きかの質問に「yes」と答えたら、ウサギの画像を表示するというBotを実装してます。

var botui = new BotUI('rabbit');

botui.message.add({
    content: 'Do you like rabbits?'
}).then(function () {
    return botui.action.button({
        action: [
            {
                text: 'Yes',
                value: 'yes'
            },
            {
                text: 'No',
                value: 'no'
            }
        ]
    });
}).then(function(res){
   if(res.value === 'yes'){
       botui.message.add({
           delay: 800,
           loading: true,
           content: 'Here is an image ![product image](rabbit.jpg)'
        });
    }else{
        botui.message.add({
            delay: 800,
            loading: true,
            content: 'bye'
        });
    }
});
  • BotUIのコンストラクタには、<bot-ui>のタグを囲んだタグのidを指定します。今回はrabbitをコンストラクタに渡しています。
  • botui.messageでメッセージの制御、botui.actionでUIの制御を行います

完成

Botから質問されて

f:id:skanoemon:20170930093828p:plain

yesと答えると

f:id:skanoemon:20170930094004p:plain

こうなる。ウサギ可愛い。

感想

簡単。htmlとjavascriptだけでサクッと作れるので、Web以外でも組み込みやすそう。