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

関連記事はこちら:

環境

  • 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.jsjs/に追加した.

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

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

_about.mdを修正

Markdownで記載していた自己紹介欄を削除し,layoutbotに変更した.

課題

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

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

参考