{"id":25618,"date":"2024-10-19T12:45:22","date_gmt":"2024-10-19T03:45:22","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25618"},"modified":"2025-01-06T17:54:56","modified_gmt":"2025-01-06T08:54:56","slug":"nekonekodouga-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25618","title":{"rendered":"NekoNekodouga.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>\u306d\u3053\u306d\u3053\u52d5\u753b - \u52d5\u753b\u5171\u6709\u30b5\u30a4\u30c8<\/title>\n    <style>\n        \/* \u30d9\u30fc\u30b9\u30b9\u30bf\u30a4\u30eb *\/\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n            background-color: #f4f4f4;\n        }\n\n        header {\n            background-color: #333;\n            color: white;\n            padding: 10px;\n            text-align: center;\n            position: fixed;\n            width: 100%;\n            top: 0;\n            z-index: 100;\n        }\n\n        header h1 {\n            margin: 0;\n            font-size: 24px;\n        }\n\n        nav ul {\n            list-style-type: none;\n            padding: 0;\n            margin: 10px 0 0 0;\n            text-align: center;\n        }\n\n        nav ul li {\n            display: inline-block;\n            margin-right: 15px;\n        }\n\n        nav ul li a {\n            color: white;\n            text-decoration: none;\n            font-size: 16px;\n        }\n\n        #searchBar {\n            margin-top: 10px;\n            padding: 5px;\n            width: 300px;\n            max-width: 80%;\n            border: none;\n            border-radius: 4px;\n        }\n\n        .container {\n            margin-top: 100px;\n            padding: 20px;\n            max-width: 1200px;\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        .upload-container, .video-info, .description, .comments, .related-videos, .gallery {\n            background-color: white;\n            padding: 20px;\n            margin-top: 20px;\n            border-radius: 10px;\n            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n        }\n\n        .upload-container h2, .video-info h2, .description h2, .comments h2, .related-videos h2, .gallery h2 {\n            margin-top: 0;\n        }\n\n        .upload-container form input[type=\"file\"],\n        .upload-container form input[type=\"text\"],\n        .upload-container form textarea,\n        .upload-container form select {\n            width: 100%;\n            padding: 10px;\n            margin-bottom: 10px;\n            border-radius: 4px;\n            border: 1px solid #ccc;\n        }\n\n        .upload-container form button {\n            padding: 10px 20px;\n            background-color: #333;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: background-color 0.3s ease;\n        }\n\n        .upload-container form button:hover {\n            background-color: #555;\n        }\n\n        .video-container {\n            position: relative;\n            text-align: center;\n            width: 100%;\n            max-width: 800px;\n            margin: 0 auto;\n        }\n\n        .video-container video {\n            width: 100%;\n            height: auto;\n            border-radius: 10px;\n        }\n\n        .comment-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            z-index: 10;\n        }\n\n        .comment {\n            position: absolute;\n            white-space: nowrap;\n            font-size: 20px;\n            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n            animation: moveComment linear forwards;\n        }\n\n        @keyframes moveComment {\n            from {\n                left: 100%;\n            }\n            to {\n                left: -100%;\n            }\n        }\n\n        .description p, .comments p, .gallery p {\n            margin: 10px 0;\n        }\n\n        .comments form textarea {\n            width: 100%;\n            padding: 10px;\n            border-radius: 4px;\n            border: 1px solid #ccc;\n            resize: vertical;\n            margin-bottom: 10px;\n        }\n\n        .comments form select {\n            width: 100%;\n            padding: 10px;\n            margin-bottom: 10px;\n            border-radius: 4px;\n        }\n\n        .comments form button {\n            padding: 10px 20px;\n            background-color: #333;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: background-color 0.3s ease;\n        }\n\n        .comments form button:hover {\n            background-color: #555;\n        }\n\n        .comment-list .comment {\n            background-color: #f9f9f9;\n            padding: 10px;\n            margin-bottom: 10px;\n            border-radius: 5px;\n        }\n\n        .like-button, .dislike-button {\n            background-color: #333;\n            color: white;\n            border: none;\n            padding: 5px 10px;\n            margin: 5px;\n            border-radius: 5px;\n            cursor: pointer;\n            transition: background-color 0.3s ease;\n        }\n\n        .like-button:hover, .dislike-button:hover {\n            background-color: #555;\n        }\n\n        footer {\n            background-color: #333;\n            color: white;\n            text-align: center;\n            padding: 20px;\n            margin-top: 40px;\n        }\n\n        footer p {\n            margin: 0;\n        }\n\n        @media (max-width: 768px) {\n            nav ul li {\n                display: block;\n                margin: 10px 0;\n            }\n\n            #searchBar {\n                width: 80%;\n            }\n\n            .video-container {\n                max-width: 100%;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <!-- \u30d8\u30c3\u30c0\u30fc\u958b\u59cb -->\n    <header>\n        <h1>\u306d\u3053\u306d\u3053\u52d5\u753b<\/h1>\n        <nav>\n            <ul>\n                <li><a href=\"#\">\u30db\u30fc\u30e0<\/a><\/li>\n                <li><a href=\"#\">\u4eba\u6c17\u52d5\u753b<\/a><\/li>\n                <li><a href=\"#\">\u30ab\u30c6\u30b4\u30ea<\/a><\/li>\n                <li><a href=\"#\">\u30ed\u30b0\u30a4\u30f3<\/a><\/li>\n            <\/ul>\n        <\/nav>\n        <input type=\"text\" id=\"searchBar\" placeholder=\"\u52d5\u753b\u3092\u691c\u7d22...\" \/>\n    <\/header>\n    <!-- \u30d8\u30c3\u30c0\u30fc\u7d42\u4e86 -->\n\n    <div class=\"container\">\n\n        <!-- \u52d5\u753b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u30a8\u30ea\u30a2 -->\n        <div class=\"upload-container\">\n            <h2>\u52d5\u753b\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/h2>\n            <form id=\"uploadForm\" enctype=\"multipart\/form-data\">\n                <input type=\"file\" id=\"videoFile\" name=\"video\" accept=\"video\/*\" required><br>\n                <input type=\"text\" id=\"videoTitle\" name=\"title\" placeholder=\"\u52d5\u753b\u30bf\u30a4\u30c8\u30eb\" required><br>\n                <textarea id=\"videoDescription\" name=\"description\" rows=\"4\" placeholder=\"\u52d5\u753b\u306e\u8aac\u660e\" required><\/textarea><br>\n                <button type=\"submit\">\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/button>\n            <\/form>\n            <div id=\"uploadStatus\"><\/div>\n        <\/div>\n\n        <!-- \u30d7\u30ec\u30d3\u30e5\u30fc\u30a8\u30ea\u30a2 -->\n        <div class=\"video-container\" id=\"previewContainer\" style=\"display: none;\">\n            <h2 id=\"previewTitle\">\u30d7\u30ec\u30d3\u30e5\u30fc: \u52d5\u753b\u30bf\u30a4\u30c8\u30eb<\/h2>\n            <video controls id=\"videoPreview\"><\/video>\n            <div class=\"comment-overlay\" id=\"commentOverlay\"><\/div>\n            <p id=\"previewDescription\">\u30d7\u30ec\u30d3\u30e5\u30fc: \u52d5\u753b\u306e\u8aac\u660e<\/p>\n        <\/div>\n\n        <!-- \u30b3\u30e1\u30f3\u30c8\u6295\u7a3f\u30a8\u30ea\u30a2 -->\n        <div class=\"comments\">\n            <h2>\u30b3\u30e1\u30f3\u30c8\u3092\u6295\u7a3f<\/h2>\n            <form id=\"commentForm\">\n                <textarea id=\"commentText\" rows=\"4\" cols=\"50\" placeholder=\"\u30b3\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0...\" required><\/textarea><br>\n                <label for=\"commentTime\">\u8868\u793a\u30bf\u30a4\u30df\u30f3\u30b0 (\u79d2):<\/label>\n                <input type=\"number\" id=\"commentTime\" placeholder=\"0\" min=\"0\" required><br>\n                <label for=\"commentColor\">\u30b3\u30e1\u30f3\u30c8\u306e\u8272:<\/label>\n                <select id=\"commentColor\">\n                    <option value=\"white\">\u767d<\/option>\n                    <option value=\"red\">\u8d64<\/option>\n                    <option value=\"blue\">\u9752<\/option>\n                    <option value=\"green\">\u7dd1<\/option>\n                    <option value=\"yellow\">\u9ec4\u8272<\/option>\n                <\/select><br>\n                <label for=\"commentFontSize\">\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba:<\/label>\n                <select id=\"commentFontSize\">\n                    <option value=\"20px\">\u5c0f<\/option>\n                    <option value=\"24px\">\u4e2d<\/option>\n                    <option value=\"28px\">\u5927<\/option>\n                <\/select><br>\n                <label for=\"commentSpeed\">\u8868\u793a\u901f\u5ea6 (\u79d2):<\/label>\n                <input type=\"number\" id=\"commentSpeed\" placeholder=\"10\" min=\"5\" max=\"20\" required><br>\n                <button type=\"submit\">\u6295\u7a3f<\/button>\n            <\/form>\n            <div id=\"commentList\" class=\"comment-list\"><\/div>\n        <\/div>\n\n        <!-- \u8a55\u4fa1\u6a5f\u80fd -->\n        <div class=\"rating\">\n            <button class=\"like-button\" id=\"likeButton\">\ud83d\udc4d \u3044\u3044\u306d<\/button>\n            <span id=\"likeCount\">0<\/span>\n            <button class=\"dislike-button\" id=\"dislikeButton\">\ud83d\udc4e \u30d0\u30c3\u30c9<\/button>\n            <span id=\"dislikeCount\">0<\/span>\n        <\/div>\n\n    <\/div>\n\n    <!-- \u30d5\u30c3\u30bf\u30fc\u958b\u59cb -->\n    <footer>\n        <p>&copy; 2023 \u306d\u3053\u306d\u3053\u52d5\u753b. All Rights Reserved.<\/p>\n    <\/footer>\n    <!-- \u30d5\u30c3\u30bf\u30fc\u7d42\u4e86 -->\n\n    <script>\n        let comments = [];\n\n        \/\/ \u52d5\u753b\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3068\u30d7\u30ec\u30d3\u30e5\u30fc\u51e6\u7406\n        document.getElementById(\"uploadForm\").addEventListener(\"submit\", function(event) {\n            event.preventDefault();\n\n            const fileInput = document.getElementById(\"videoFile\");\n            const file = fileInput.files[0];\n            const title = document.getElementById(\"videoTitle\").value;\n            const description = document.getElementById(\"videoDescription\").value;\n\n            if (!file) {\n                alert(\"\u52d5\u753b\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\");\n                return;\n            }\n\n            const reader = new FileReader();\n            reader.onload = function(e) {\n                const videoData = e.target.result;\n                document.getElementById(\"previewContainer\").style.display = \"block\";\n                document.getElementById(\"videoPreview\").src = videoData;\n                document.getElementById(\"previewTitle\").textContent = \"\u30d7\u30ec\u30d3\u30e5\u30fc: \" + title;\n                document.getElementById(\"previewDescription\").textContent = \"\u30d7\u30ec\u30d3\u30e5\u30fc: \" + description;\n            };\n            reader.readAsDataURL(file);\n        });\n\n        \/\/ \u30b3\u30e1\u30f3\u30c8\u6295\u7a3f\u51e6\u7406\n        document.getElementById(\"commentForm\").addEventListener(\"submit\", function(event) {\n            event.preventDefault();\n\n            const commentText = document.getElementById(\"commentText\").value;\n            const commentTime = parseInt(document.getElementById(\"commentTime\").value);\n            const commentColor = document.getElementById(\"commentColor\").value;\n            const commentFontSize = document.getElementById(\"commentFontSize\").value;\n            const commentSpeed = parseInt(document.getElementById(\"commentSpeed\").value);\n\n            if (commentText && commentTime >= 0) {\n                const comment = {\n                    text: commentText,\n                    time: commentTime,\n                    color: commentColor,\n                    fontSize: commentFontSize,\n                    speed: commentSpeed\n                };\n\n                comments.push(comment);\n                displayCommentInList(comment);\n                document.getElementById(\"commentForm\").reset();\n            }\n        });\n\n        \/\/ \u30b3\u30e1\u30f3\u30c8\u30ea\u30b9\u30c8\u306b\u8868\u793a\n        function displayCommentInList(comment) {\n            const commentList = document.getElementById(\"commentList\");\n            const commentDiv = document.createElement(\"div\");\n            commentDiv.classList.add(\"comment\");\n            commentDiv.textContent = `\u30bf\u30a4\u30df\u30f3\u30b0: ${comment.time}\u79d2 - ${comment.text}`;\n            commentList.appendChild(commentDiv);\n        }\n\n        \/\/ \u52d5\u753b\u306e\u518d\u751f\u306b\u5408\u308f\u305b\u3066\u30b3\u30e1\u30f3\u30c8\u3092\u8868\u793a\n        const videoElement = document.getElementById(\"videoPreview\");\n        videoElement.addEventListener(\"timeupdate\", function() {\n            const currentTime = Math.floor(videoElement.currentTime);\n            comments.forEach(comment => {\n                if (comment.time === currentTime) {\n                    displayCommentOnVideo(comment);\n                }\n            });\n        });\n\n        \/\/ \u52d5\u753b\u4e0a\u306b\u30b3\u30e1\u30f3\u30c8\u3092\u6d41\u3059\n        function displayCommentOnVideo(comment) {\n            const overlay = document.getElementById(\"commentOverlay\");\n            const commentElement = document.createElement(\"div\");\n            commentElement.classList.add(\"comment\");\n            commentElement.textContent = comment.text;\n            commentElement.style.color = comment.color;\n            commentElement.style.fontSize = comment.fontSize;\n            commentElement.style.animationDuration = `${comment.speed}s`;\n            commentElement.style.top = Math.random() * 80 + \"%\"; \/\/ \u30e9\u30f3\u30c0\u30e0\u306a\u4f4d\u7f6e\n            overlay.appendChild(commentElement);\n\n            \/\/ \u4e00\u5b9a\u6642\u9593\u5f8c\u306b\u30b3\u30e1\u30f3\u30c8\u3092\u524a\u9664\n            setTimeout(() => {\n                commentElement.remove();\n            }, comment.speed * 1000);\n        }\n\n        \/\/ \u3044\u3044\u306d\u30fb\u30d0\u30c3\u30c9\u6a5f\u80fd\n        document.getElementById(\"likeButton\").addEventListener(\"click\", function() {\n            let likeCount = parseInt(document.getElementById(\"likeCount\").textContent);\n            likeCount++;\n            document.getElementById(\"likeCount\").textContent = likeCount;\n        });\n\n        document.getElementById(\"dislikeButton\").addEventListener(\"click\", function() {\n            let dislikeCount = parseInt(document.getElementById(\"dislikeCount\").textContent);\n            dislikeCount++;\n            document.getElementById(\"dislikeCount\").textContent = dislikeCount;\n        });\n\n    <\/script>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n","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,4],"tags":[3],"class_list":["post-25618","post","type-post","status-publish","format-standard","hentry","category-html","category-programming","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25618","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=25618"}],"version-history":[{"count":3,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25618\/revisions"}],"predecessor-version":[{"id":25770,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25618\/revisions\/25770"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25618"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}