ららぽてすらブログ

ららぽてすら

チャットボットの作り方

こんにちは〜ららぽてすらです👌

今日は、シンプルで使いやすいチャットボットを作成する方法を一緒に見ていきましょう。チャットボットは、ユーザーと楽しい会話をすることができるプログラムです!今回はHTML、CSSJavaScriptを使って基本的なチャットボットを作ります。コードを細かく分解して、どのように動作するのかを説明していきます🐠

 

1. HTMLの準備

まずは、HTMLファイルを作成して、基本的な構造を整えます。ここでは、チャットボットのレイアウトを定義します。

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>チャットボット</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f0f0f0;

        }

        #chat-container {

            width: 400px;

            margin: 50px auto;

            background: #fff;

            border-radius: 5px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            padding: 20px;

        }

        #chat-box {

            height: 300px;

            overflow-y: scroll;

            border: 1px solid #ddd;

            padding: 10px;

        }

        .message {

            margin: 10px 0;

        }

        .user-message {

            text-align: right;

        }

        .bot-message {

            text-align: left;

        }

        #chat-input {

            width: calc(100% - 22px);

            padding: 10px;

            margin-top: 10px;

            border: 1px solid #ddd;

            border-radius: 5px;

        }

        #suggestions {

            list-style-type: none;

            padding: 0;

            margin-top: 0;

            background: #fff;

            border: 1px solid #ddd;

            width: calc(100% - 22px);

            position: absolute;

            z-index: 1;

        }

        #suggestions li {

            padding: 10px;

            cursor: pointer;

        }

        #suggestions li:hover {

            background: #f0f0f0;

        }

    </style>

</head>

<body>

    <div id="chat-container">

        <div id="chat-box"></div>

        <input type="text" id="chat-input" placeholder="メッセージを入力してください">

        <ul id="suggestions"></ul>

    </div>

    <script src="chatbot.js"></script>

</body>

</html>

2. CSSでスタイリング

次に、HTML内でスタイルを定義します。ここでは、チャットボックスの見た目を整えるためのCSSを追加しています。

  • #chat-container:チャットボット全体のコンテナで、幅や背景色などを指定しています。
  • #chat-box:チャットメッセージが表示されるエリアで、スクロール可能に設定しています。
  • .message:メッセージの基本スタイルです。
  • .user-message:ユーザーのメッセージを右揃えにします。
  • .bot-message:ボットのメッセージを左揃えにします。
  • #chat-input:ユーザーがメッセージを入力するテキストボックスです。
  • #suggestions:ユーザーの入力に対する候補を表示するリストです。

 

3. JavaScriptで機能を実装

最後に、JavaScriptでチャットボットのロジックを実装します。ここでは、ユーザーの入力を受け取って、ボットが応答する仕組みを作ります。

document.addEventListener('DOMContentLoaded', () => {

    const chatBox = document.getElementById('chat-box');

    const chatInput = document.getElementById('chat-input');

    const suggestions = document.getElementById('suggestions');

 

    const possibleQuestions = [

        'こんにちは',

        '元気',

        'お名前は',

        '名前は',

        '天気',

        '趣味',

        'さようなら'

    ];

 

    chatInput.addEventListener('input', () => {

        const inputText = chatInput.value.toLowerCase();

        suggestions.innerHTML = '';

        if (inputText) {

            const filteredQuestions = possibleQuestions.filter(question => question.includes(inputText));

            filteredQuestions.forEach(question => {

                const suggestionItem = document.createElement('li');

                suggestionItem.textContent = question;

                suggestionItem.addEventListener('click', () => {

                    chatInput.value = question;

                    suggestions.innerHTML = '';

                });

                suggestions.appendChild(suggestionItem);

            });

        }

    });

 

    chatInput.addEventListener('keypress', (event) => {

        if (event.key === 'Enter') {

            const userMessage = chatInput.value;

            if (userMessage.trim() !== '') {

                appendMessage('ユーザー', userMessage, 'user-message');

                getBotResponse(userMessage);

                chatInput.value = '';

                suggestions.innerHTML = '';

            }

        }

    });

 

    function appendMessage(sender, message, className) {

        const messageElement = document.createElement('div');

        messageElement.textContent = `${sender}: ${message}`;

        messageElement.classList.add('message', className);

        chatBox.appendChild(messageElement);

        chatBox.scrollTop = chatBox.scrollHeight;

    }

 

    function getBotResponse(userMessage) {

        let botResponse = 'ごめんなさい、わかりません。';

 

        if (userMessage.includes('こんにちは')) {

            botResponse = 'こんにちは!お元気ですか?';

        } else if (userMessage.includes('元気')) {

            botResponse = 'それは良かったです!';

        } else if (userMessage.includes('お名前は')) {

            botResponse = '私はチャットボットです。あなたの名前は何ですか?';

        } else if (userMessage.includes('名前は')) {

            botResponse = 'よろしくお願いします!';

        } else if (userMessage.includes('天気')) {

            botResponse = '今日の天気は晴れです。';

        } else if (userMessage.includes('趣味')) {

            botResponse = '私の趣味はチャットすることです。あなたの趣味は何ですか?';

        } else if (userMessage.includes('さようなら')) {

            botResponse = 'さようなら!またお話ししましょう!';

        }

 

        setTimeout(() => {

            appendMessage('ボット', botResponse, 'bot-message');

        }, 500);

    }

});

JavaScriptの説明

  • イベントリスナーの設定
    • DOMContentLoadedイベント:ページの読み込みが完了したときに、チャットボットの初期設定を行います。
  • メッセージ入力処理
    • inputイベント:ユーザーがテキストを入力するたびに、候補リストを更新します。
    • keypressイベント:エンターキーが押されたときに、ユーザーのメッセージをチャットボックスに追加し、ボットの応答をトリガーします。
  • メッセージの表示
    • appendMessage関数:メッセージをチャットボックスに表示します。
  • ボットの応答
    • getBotResponse関数:ユーザーのメッセージに応じてボットの応答を生成し、表示します。

これで、基本的なチャットボットが完成です!このチャットボットは、ユーザーとの簡単な会話を通じて、楽しい体験を提供します。ぜひ、自分のアイデアを追加して、さらに面白いチャットボットを作ってみてください!

まとめ

HTML、CSSJavaScriptを使って、基本的なチャットボットを作成しました。チャットボットの仕組みを理解することで、さまざまな応用ができるようになります☺️