css限界シリーズの一環として作成しました。
本記事ではhtmlとcssだけでチャットボットを作る方法についてお伝えします。
デモページはこちら
※ブラウザはChromeまたはEdgeをご使用ください。
一部ブラウザではうまく表示されないため、このページでの公開は制限しています。デモページでの体験をお勧めします。
１。下のテキストボックスにテキストを入力
２。↑ボタンをクリックして内容を確定
３。AIが返信を自動生成
※実際には20通りの回答からランダムに当たる
４。生成された文章が一文字(１単語)ずつ表示されていく。
５。これを5~10回繰り返すことができる。
６。「I'm not a robot」が表示されたときはチェック✅して閉じる
７。回数無制限でAIとチャットできる
formタグを２つ使っている。
formにはテキストボックスと回答とチェックボックスが対になった要素「.dialogue」を５個使っている。
「.dialogue」には３つの状態がある。
１。未記入状態、既定状態であり、チェックボックスとテキストボックスは空、回答は非表示。
２。アクティブ状態、入力可能な状態であり、テキストボックスに回答を入力できる。一つ前の「.dialogue」が記入済み状態になった場合、この「.dialogue」がアクティブ状態になる。
３。記入済み状態、チェックボックスがチェックされた状態。テキストボックスは入力できなくなり、回答が表示される。
2つのformにはそれぞれリセットボタンがあり、リセットボタンがクリックされるとformごとに全ての「.dialogue」が１の既定状態に戻る。
つまり、リセットボタンによって半分ずつformをリセットしながら無限チャットを実現している
リセットボタンを「I'm not a bot」として使うことで、自然な挙動でリセット＆再利用を実現！