Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8652

JavaScriptでチャットボットを作る

$
0
0

JavaScriptでチャットボットを作る

はじめに

今回作るのは、簡単に質問応答してくれるチャットボットです。
言語はHTML,CSS,JavaScript(約50行)です。
応用次第で、より複雑なものを作ることも全然可能です!

目標

  • 自分の名前を送信したら、それを含めたメッセージが返す
  • 自分にランダムなメッセージを返す
  • (様々な会話パターンを作ってみる)
  • (相手から選択肢のボタンを送信され、それぞれに応じた結果を返す)

この記事の対象者

JavaScriptで様々なものを作ってみたい人。チャットボットやAIに興味がある人などなど。

ここでは必要最低限の部分だけ説明します。詳細は下のCodePenをご覧ください

See the Pen チャットボット by MF3PGM (@masa_mf3rs) on CodePen.

HTML

チャットの画面にあるulに(JavaScriptで)liを追加していく仕組みです。

HTML
<!--画面--><divid= "field"><ulid= "chat-ul"></ul></div><!--入力場所,送信ボタン--><divid= "input-field"><inputtype= "text"id= "chat-input"><inputtype= "button"value= "Send"id= "chat-button"onclick= "btnFunc()"></div>

CSS

☞ポイント

  • ulの子要素li(背景色:緑または白の部分)に直接文字を書いてもいいですが、デザイン上、今回はliの子要素divに文字を書いていきます。(吹き出しテキストのpaddingやline-height,改行などが複雑になるのを防ぐため)

  • 話す人が自分の場合、liに chat-rightクラスを付与し、話す人が相手ならchat-leftクラスを付与します。

CSS
/*チャット画面のスクロール設定*/#field{/*横向きのスクロール禁止*/overflow-x:hidden;/*縦向きのスクロール許可*/overflow-y:scroll;/*スマホでは指でスクロール*/-webkit-overflow-scrolling:touch;}/*自分の吹き出し*/.chat-right{margin-left:auto;margin-right:25px;background:#A4E496;}/*相手の吹き出し*/.chat-left{margin-left:25px;background:#FFF;}

JavaScript

今回は、相手のメッセージは全て2秒遅れにします。

☞ポイント

  • 相手が返信する度に、chatCountを1ずつ足していきます。自分がテキストを入力し、送信ボタンを押した瞬間のchatCountの値に応じて、配列から特定のメッセージを選び返信させます。
  • 今回作った関数は、画面に吹き出しを描画するoutput()と、送信ボタンを押したときのbtnFunc()です。
JavaScript
//相手の返答内容constchat=['Hello ! Welcome to AI chat !','What is your name ?','How are you today ?',[['Alright !'],['Oh really!'],['Ok!']]//ランダムな返答];//相手の返信の合計回数(最初は0)//これを利用して、自分が送信ボタンを押したときの相手の返答を配列から指定するletchatCount=0;//画面への出力をする関数(valはメッセージ内容,personは誰が話しているか)functionoutput(val,person){//中略if(person==='other'){//中略chatCount++;}}//自分がテキストを入力し、ボタンを押したときの関数functionbtnFunc(){//中略output(inputText.value,'me');//中略//相手の送信の合計回数に応じて次の返信を指定switch(chatCount){//もし相手のトーク数が2個の時に送信ボタンが押されたら、//自分の名前を含んだメッセージと、chat配列の2(3個目)が返信case2:output('Hi, '+inputText.value+' !','other');setTimeout(()=>{output(chat[2],'other');},2000);break;//もし相手のトーク数が4個の時に送信ボタンが押されたら、//chat配列の3(4個目)のランダム番目が返信case4:output(chat[3][Math.floor(Math.random()*chat[3].length)],'other');break;}}//最初に相手から話しかけられるoutput(chat[0],'other');setTimeout(()=>{output(chat[1],'other');},2000);

おわりに

チャットボットを作りたい。。しかし、どのサイトを調べても、ライブラリやサーバ,ChatUIなどを使った難しいものばかりでした。そんな中、ピュアなJavaScriptだけで作れないかと数日間試行錯誤し、やっと完成しました。
まだ初心者なので、アドバイス等あれば教えていただければと思います。
そして、この記事が皆様にお役に立てれば幸いです。

参考書

本当によくわかるJavaScriptの教科書P.122(outputメソッドの2つの引数を使った部分)


Viewing all articles
Browse latest Browse all 8652

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>