{"id":25607,"date":"2024-10-15T14:26:26","date_gmt":"2024-10-15T05:26:26","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25607"},"modified":"2024-10-15T14:26:28","modified_gmt":"2024-10-15T05:26:28","slug":"chat-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25607","title":{"rendered":"chat.html"},"content":{"rendered":"
\n<!DOCTYPE html>\n<html lang="ja">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>\u30ed\u30fc\u30ab\u30eb\u30c1\u30e3\u30c3\u30c8\u30b7\u30b9\u30c6\u30e0<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            background-color: #f4f4f4;\n            margin: 0;\n            padding: 0;\n        }\n        .chat-container {\n            width: 80%;\n            max-width: 600px;\n            margin: 50px auto;\n            background-color: white;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n            border-radius: 8px;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            height: 600px;\n        }\n        .chat-header {\n            background-color: #007bff;\n            color: white;\n            padding: 10px;\n            text-align: center;\n            font-size: 18px;\n        }\n        .chat-messages {\n            flex-grow: 1;\n            overflow-y: scroll;\n            padding: 10px;\n            background-color: #fafafa;\n        }\n        .chat-message {\n            margin-bottom: 10px;\n            display: flex;\n            align-items: center;\n        }\n        .chat-message .username {\n            font-weight: bold;\n            margin-right: 5px;\n        }\n        .message-content {\n            padding: 8px;\n            background-color: #e9ecef;\n            border-radius: 5px;\n            flex-grow: 1;\n        }\n        .message-time {\n            font-size: 12px;\n            text-align: right;\n            margin-left: 10px;\n            color: #888;\n        }\n        .chat-input {\n            display: flex;\n            border-top: 1px solid #ddd;\n        }\n        .chat-input input {\n            width: 100%;\n            padding: 10px;\n            border: none;\n            outline: none;\n            font-size: 16px;\n        }\n        .chat-input button {\n            padding: 10px;\n            background-color: #007bff;\n            color: white;\n            border: none;\n            cursor: pointer;\n            font-size: 16px;\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class="chat-container">\n    <div class="chat-header">\n        \u30ed\u30fc\u30ab\u30eb\u30c1\u30e3\u30c3\u30c8\u30b7\u30b9\u30c6\u30e0\n    <\/div>\n    <div class="chat-messages" id="chat-messages">\n        <!-- \u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u3053\u3053\u306b\u8868\u793a\u3055\u308c\u308b -->\n    <\/div>\n    <div class="chat-input">\n        <input type="text" id="chat-input" placeholder="\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u5165\u529b...">\n        <button id="send-button">\u9001\u4fe1<\/button>\n    <\/div>\n<\/div>\n\n<script>\n    const messagesContainer = document.getElementById('chat-messages');\n    const inputField = document.getElementById('chat-input');\n    const sendButton = document.getElementById('send-button');\n\n    \/\/ \u30e6\u30fc\u30b6\u30fc\u60c5\u5831\n    const users = ['\u30e6\u30fc\u30b6\u30fc1', '\u30e6\u30fc\u30b6\u30fc2'];\n    let currentUserIndex = 0;\n\n    \/\/ \u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8ffd\u52a0\u3059\u308b\u95a2\u6570\n    function addMessage(content, username, time = new Date().toLocaleTimeString()) {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('chat-message');\n        \n        const userSpan = document.createElement('span');\n        userSpan.classList.add('username');\n        userSpan.textContent = username;\n        messageDiv.appendChild(userSpan);\n\n        const messageContent = document.createElement('div');\n        messageContent.classList.add('message-content');\n        messageContent.textContent = content;\n        messageDiv.appendChild(messageContent);\n\n        const timeSpan = document.createElement('span');\n        timeSpan.classList.add('message-time');\n        timeSpan.textContent = time;\n        messageDiv.appendChild(timeSpan);\n\n        messagesContainer.appendChild(messageDiv);\n\n        \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u3092\u6700\u65b0\u30e1\u30c3\u30bb\u30fc\u30b8\u306b\u5408\u308f\u305b\u308b\n        messagesContainer.scrollTop = messagesContainer.scrollHeight;\n    }\n\n    \/\/ \u9001\u4fe1\u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\n    sendButton.addEventListener('click', function() {\n        const message = inputField.value;\n        if (message.trim() !== '') {\n            const username = users[currentUserIndex];\n            currentUserIndex = (currentUserIndex + 1) % users.length;  \/\/ \u30e6\u30fc\u30b6\u30fc\u3092\u5207\u308a\u66ff\u3048\n            addMessage(message, username);  \/\/ \u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a\n            inputField.value = '';  \/\/ \u5165\u529b\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u30af\u30ea\u30a2\n        }\n    });\n\n    \/\/ \u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u3067\u9001\u4fe1\u3067\u304d\u308b\u3088\u3046\u306b\n    inputField.addEventListener('keypress', function(e) {\n        if (e.key === 'Enter') {\n            sendButton.click();\n        }\n    });\n<\/script>\n\n<\/body>\n<\/html>\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[80],"tags":[3],"class_list":["post-25607","post","type-post","status-publish","format-standard","hentry","category-html","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25607"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25607\/revisions"}],"predecessor-version":[{"id":25609,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25607\/revisions\/25609"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25607"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}