JavaScriptで作ったチャットボット
今回作ったもの
はじめに
簡易版で勉強したい方：
簡易チャットボット（デモサイト）
→ CodePen（コード）
今回作るのは、質問応答やクイズ問題を出してくれるチャットボットです。
言語はHTML，CSS，JavaScriptです。
応用次第で、より複雑なものを作ることも、もちろん可能です！
機能一覧
- ロボットからの投稿
- 自分の発言の記憶と、それを用いた返答
- 選択肢ボタン（&正解数の計算）
- ランダム投稿
- ロボットの考え中のアニメーション
コードの説明（抜粋）
コードの全容はこちらをご参考ください。
「AIチャットボット（Codepen）」
HTML
チャットの画面にある「ul」にJavaScriptで「li」を追加していく仕組みです。
HTML
<!--メッセージが表示される画面-->
<div id= "chatbot-body">
<ul id= "chatbot-ul"></ul>
</div>
<!--入力場所，送信ボタン-->
<form onsubmit= "return false">
<input type= "text" placeholder= "テキストを入力">
<input type= "submit" value= "送信">
</form>
CSS
- 「ul」の子要素「li」に直接テキストを挿入してもいいですが、デザイン上、今回は 「li」の子要素「div」に文字を書いていきます。（吹き出しテキストの「padding」，「line-height」，改行などが複雑になるのを防ぐため）
- ロボットの吹き出し「li」には「.chatbot-left」というクラスを当て左寄せに、自分の吹き出し「li」には「.chatbot-right」というクラスを当て右寄せにしています。
CSS
/*チャット画面のスクロール設定*/
#chatbot-body {
/*横向きのスクロール禁止*/
overflow-x: hidden;
/*縦向きのスクロール許可*/
overflow-y: scroll;
/*スマホでは指でスクロール*/
-webkit-overflow-scrolling: touch;
}
/*ロボットの吹き出し*/
.chatbot-left{
margin-left: 20px;
border-radius: 0 9px 9px 9px;
}
/*自分の吹き出し*/
.chatbot-right{
margin-right: 20px;
text-align: left;
border-radius: 9px 0 9px 9px;
}
JavaScript
今回は、相手のメッセージは全て2秒遅れにします。
- ロボットが返信する度に、「robotCount」を1ずつ足していきます。この値がロボットが話す内容をまとめた「chatList」オブジェクトの数値に対応します。自分がテキストを入力し、送信ボタンを押した瞬間の「robotCount」の値に応じて、配列から次のメッセージを選び返信させます。
- 今回作った関数は、ロボットの投稿をする「robotOutput()」と、自分が送信ボタンを押したときの関数（無名関数）です。
JavaScript
// ロボットからの投稿一覧のオブジェクト
// textには投稿文，continueは次も連続で投稿するかどうか，optionは普通の投稿or選択肢orランダム投稿など
const chatList = {
1: {text: 'ようこそ「AI chat」へ！', continue: true, option: 'normal'},
2: {text: '会話内容は管理者へ送信されませんので、ご安心ください。', continue: true, option: 'normal'},
3: {text: {title: 'Q1', question: '何を知りたいですか？', choices: ['開発者について', '参考にしたチャットボット', 'Flutter デモアプリ', '島根県美郷町 HP']}, continue: false, option: 'choices', questionNextSupport: true} // questionNextSupportは、リンクなど次に質問に対する詳細を投稿するかどうか
// 省略
};
// 投稿文を加工する関数（中に相手の名前などを挿入する際に用いる）
function textSpecial() {
chatList[7].text = `こんにちは！${userData[1]}さん！`;
chatList[12].text.qTrue = `正解！${userData[1]}さん、すごいですね！`;
chatList[13].text = `${userData[1]}さん、ありがとうございました。今日はここで終了とさせていただきます。`;
chatList[16].text = `${userData[1]}さんの満足度は「${userData[4]}」，ご感想は「${userData[5]}」ですね！ありがとうございました。`;
}
// ユーザーの発言，回答内容を記憶する配列
let userData = [];
// ロボットが投稿をする度にカウントしていき、投稿を管理する
let robotCount = 0; // ロボットの投稿数
// ロボットの投稿
function robotOutput() {
robotCount ++;
// ulとliを作り、左寄せのスタイルを適用し投稿する
const ul = document.getElementById('chatbot-ul');
const li = document.createElement('li');
li.classList.add('left');
ul.appendChild(li);
}
// 最初にロボットから話しかける
robotOutput();
// 自分の投稿（送信ボタンを押した時）
chatSubmitBtn.addEventListener('click', () => {
// 空行の場合送信不可
if (!userText.value || !userText.value.match(/\S/g)) return false;
userCount ++;
// 投稿内容を後に活用するために、配列に保存しておく
userData.push(userText.value);
// ulとliを作り、右寄せのスタイルを適用し投稿する
const ul = document.getElementById('chatbot-ul');
const li = document.createElement('li');
li.classList.add('right');
ul.appendChild(li);
}
最後に
いかがでしたでしょうか。チャットボットを作りたい。。しかし、どのサイトを調べても、ライブラリやサーバ，ChatUIなどを使った難しいものばかりでした。そんな中、ピュアなJavaScriptだけで作れないかと数日～1か月ほど試行錯誤し、ついに完成しました。
JavaScriptに関しては、比較的難易度が高いと思います。
最低限の機能は備えていますが、開発途中ですので今後もアップデートしていこうと思います。
今回作ったデモサイトは以下をご覧ください。
AIチャットボット（デモサイト）
参考文献
なし