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

導入

css限界シリーズの一環として作成しました。

続き

このページは前の記事から続いています。

開発

開発の経緯について載せています。

ランダム文字出力：

CSSだけでランダム出力ができるのは、CSSアニメーションによるものです。

CSSアニメーションで擬似要素のcontentプロパティを切り替え、これを超高速(10ms周期)で回すことによって実現できます。

ユーザーのクリックタイミングが予測不可能であるため、チェックボックスがクリックでチェックされたときからアニメーションを止める(animation-play-stateをpausedにする)ことができます。

これによってランダム出力を実現しているように見せることができます。

無限チャット

チャットを無限に回しているように見せる技術です。

前回の記事で詳しく紹介しました。

デザイン、UI

ChatGPTに似せたUIです。

グレースケールを基本とし、要素を中央に揃えた、崩れないUIです。

プロトタイプについて

試作品が3つほどあります。

試作品はCodepenの方で投稿を行います。

まとめ

CSSとhtmlでチャットボットを作ってみました。今回のはランダム生成でしたが、理論上は、ある程度の条件分岐が可能なので制作を考えています。

ユーザーが選択する選択肢ボタンも検討しています。