諸事情により，チャットボットを自作したいと思った．paiza開発日誌，JavaScriptだけで本格的なチャットボットを開発できるライブラリ「BotUI」を使ってみた！を参考にチャットボットを作成し，本サイトのAbout欄に埋め込んだ．

2018/02/11追記：このあと，本サイトのJekyll themeをEasyBookからCentrariumに変更した．詳細はJekyll themeをCentrariumに変更する - Memotaroを参照されたい．

関連記事はこちら：

環境

  • Easybook：本サイトで利用しているJekyllのテーマ．
  • BotUI：JavaScriptだけで動くチャットボットライブラリ．

手順

paiza開発日誌，JavaScriptだけで本格的なチャットボットを開発できるライブラリ「BotUI」を使ってみた！を参考した．

_includes/head.htmlを追記

BotUI関連のファイルを，CDN経由で読み込む設定を_includes/head.htmlに追記した．

_layouts/bot.htmlを作成

BotUI用の新レイアウトbot.htmlを_layouts/に追加した．

任意のidを付与可能．チャットボットを表示したい位置に，<bot-ui>タグを配置した．

js/bot.jsを作成

チャットボット本体となるbot.jsをjs/に追加した．

Promiseをベースとしたメソッドチェーンを繋げて，構成するらしい．詳細はよくわからなかったが，ノリでthenを繋げていったら動くものができた．

  • botui.message.add：新規メッセージの表示．delayで表示までの待ち時間を，contentで表示内容を指定できる．
  • botui.action.text：入力フォームを表示．resでユーザの回答を取得できる．
  • botui.action.button：ボタンを表示．resでユーザの回答を取得できる．

_about.mdを修正

Markdownで記載していた自己紹介欄を削除し，layoutをbotに変更した．

課題

時間切れのため，以下の課題を解決できなかった．時間に余裕ができたら解決したい．

  • 会話が長くなったとき，サイドバーが二重に表示されてダサい．次回で解決する．
  • BotUI, Guide, BotUI Markupを参考にしたが，URLや画像が埋め込めない．
  • If-Thenルールに則っただけの，人工無能．

参考