{"id":25365,"date":"2024-06-12T15:20:40","date_gmt":"2024-06-12T06:20:40","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25365"},"modified":"2024-06-12T15:20:42","modified_gmt":"2024-06-12T06:20:42","slug":"%e3%83%8b%e3%82%b3%e3%83%8b%e3%82%b3%e5%8b%95%e7%94%bb%e9%a2%a8%e3%82%b5%e3%82%a4%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25365","title":{"rendered":"\u30cb\u30b3\u30cb\u30b3\u52d5\u753b\u98a8\u30b5\u30a4\u30c8"},"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>\u30cb\u30b3\u30cb\u30b3\u52d5\u753b\u98a8\u30b5\u30a4\u30c8<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n            background-color: #f4f4f4;\n        }\n        header {\n            background-color: #333;\n            color: #fff;\n            padding: 10px 20px;\n            text-align: center;\n        }\n        nav {\n            background-color: #555;\n            color: #fff;\n            display: flex;\n            justify-content: space-around;\n            padding: 10px 0;\n        }\n        nav a {\n            color: #fff;\n            text-decoration: none;\n            padding: 10px 20px;\n        }\n        main {\n            display: flex;\n            margin: 20px;\n        }\n        aside {\n            width: 25%;\n            background-color: #fff;\n            padding: 20px;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n        }\n        section {\n            width: 75%;\n            padding: 20px;\n        }\n        .video-player {\n            background-color: #000;\n            height: 400px;\n            margin-bottom: 20px;\n            position: relative;\n        }\n        .video-player video {\n            width: 100%;\n            height: 100%;\n        }\n        footer {\n            background-color: #333;\n            color: #fff;\n            text-align: center;\n            padding: 10px 0;\n        }\n        .comments {\n            list-style: none;\n            padding: 0;\n        }\n        .comments li {\n            background-color: #fff;\n            margin-bottom: 10px;\n            padding: 10px;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n        }\n        .comment-form {\n            display: flex;\n            margin-top: 20px;\n        }\n        .comment-form input {\n            flex: 1;\n            padding: 10px;\n            margin-right: 10px;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n        }\n        .comment-form button {\n            padding: 10px 20px;\n            border: none;\n            background-color: #333;\n            color: #fff;\n            border-radius: 5px;\n            cursor: pointer;\n        }\n        .thumbnail {\n            display: flex;\n            align-items: center;\n            margin-bottom: 20px;\n        }\n        .thumbnail img {\n            width: 120px;\n            height: 90px;\n            margin-right: 10px;\n        }\n        .login-form, .register-form, .upload-form, .profile {\n            background-color: #fff;\n            padding: 20px;\n            margin-bottom: 20px;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n        }\n        .login-form h2, .register-form h2, .upload-form h2, .profile h2 {\n            margin-top: 0;\n        }\n        .login-form input, .register-form input, .upload-form input {\n            width: 100%;\n            padding: 10px;\n            margin-bottom: 10px;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n        }\n        .login-form button, .register-form button, .upload-form button {\n            width: 100%;\n            padding: 10px;\n            border: none;\n            background-color: #333;\n            color: #fff;\n            border-radius: 5px;\n            cursor: pointer;\n        }\n        .search-form {\n            display: flex;\n            justify-content: center;\n            margin: 20px 0;\n        }\n        .search-form input {\n            width: 70%;\n            padding: 10px;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n        }\n        .search-form button {\n            padding: 10px 20px;\n            border: none;\n            background-color: #333;\n            color: #fff;\n            border-radius: 5px;\n            cursor: pointer;\n        }\n        .rating {\n            display: flex;\n            align-items: center;\n            margin-top: 10px;\n        }\n        .rating button {\n            border: none;\n            background: none;\n            cursor: pointer;\n            font-size: 1.2em;\n            margin-right: 10px;\n        }\n        .rating span {\n            margin-right: 20px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <header>\n        <h1>\u30cb\u30b3\u30cb\u30b3\u52d5\u753b\u98a8\u30b5\u30a4\u30c8<\/h1>\n    <\/header>\n    <nav>\n        <a href=\"index.html\">\u30db\u30fc\u30e0<\/a>\n        <a href=\"ranking.html\">\u30e9\u30f3\u30ad\u30f3\u30b0<\/a>\n        <a href=\"categories.html\">\u30ab\u30c6\u30b4\u30ea\u30fc<\/a>\n        <a href=\"mypage.html\">\u30de\u30a4\u30da\u30fc\u30b8<\/a>\n    <\/nav>\n    <div class=\"search-form\">\n        <input type=\"text\" id=\"searchInput\" placeholder=\"\u691c\u7d22...\">\n        <button onclick=\"search()\">\u691c\u7d22<\/button>\n    <\/div>\n    <main>\n        <aside>\n            <h2>\u304a\u3059\u3059\u3081\u52d5\u753b<\/h2>\n            <div class=\"thumbnail\">\n                <a href=\"video.html\"><img src=\"thumbnail1.jpg\" alt=\"\u52d5\u753b1\"><\/a>\n                <a href=\"video.html\">\u52d5\u753b1\u306e\u30bf\u30a4\u30c8\u30eb<\/a>\n            <\/div>\n            <div class=\"thumbnail\">\n                <a href=\"video.html\"><img src=\"thumbnail2.jpg\" alt=\"\u52d5\u753b2\"><\/a>\n                <a href=\"video.html\">\u52d5\u753b2\u306e\u30bf\u30a4\u30c8\u30eb<\/a>\n            <\/div>\n            <div class=\"thumbnail\">\n                <a href=\"video.html\"><img src=\"thumbnail3.jpg\" alt=\"\u52d5\u753b3\"><\/a>\n                <a href=\"video.html\">\u52d5\u753b3\u306e\u30bf\u30a4\u30c8\u30eb<\/a>\n            <\/div>\n            <div class=\"thumbnail\">\n                <a href=\"video.html\"><img src=\"thumbnail4.jpg\" alt=\"\u52d5\u753b4\"><\/a>\n                <a href=\"video.html\">\u52d5\u753b4\u306e\u30bf\u30a4\u30c8\u30eb<\/a>\n            <\/div>\n        <\/aside>\n        <section>\n            <div class=\"video-player\">\n                <video controls>\n                    <source src=\"sample.mp4\" type=\"video\/mp4\">\n                    \u3042\u306a\u305f\u306e\u30d6\u30e9\u30a6\u30b6\u306f\u52d5\u753b\u30bf\u30b0\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u305b\u3093\u3002\n                <\/video>\n            <\/div>\n            <h2>\u52d5\u753b\u30bf\u30a4\u30c8\u30eb<\/h2>\n            <p>\u52d5\u753b\u306e\u8aac\u660e\u6587\u304c\u3053\u3053\u306b\u5165\u308a\u307e\u3059\u3002<\/p>\n            <div class=\"rating\">\n                <button onclick=\"like()\">\ud83d\udc4d<\/button><span id=\"likeCount\">0<\/span>\n                <button onclick=\"dislike()\">\ud83d\udc4e<\/button><span id=\"dislikeCount\">0<\/span>\n            <\/div>\n            <h3>\u30b3\u30e1\u30f3\u30c8<\/h3>\n            <ul class=\"comments\" id=\"comments\">\n                <li><span class=\"timestamp\">12:34<\/span> \u30b3\u30e1\u30f3\u30c81<\/li>\n                <li><span class=\"timestamp\">12:35<\/span> \u30b3\u30e1\u30f3\u30c82<\/li>\n                <li><span class=\"timestamp\">12:36<\/span> \u30b3\u30e1\u30f3\u30c83<\/li>\n                <li><span class=\"timestamp\">12:37<\/span> \u30b3\u30e1\u30f3\u30c84<\/li>\n            <\/ul>\n            <div class=\"comment-form\">\n                <input type=\"text\" id=\"commentInput\" placeholder=\"\u30b3\u30e1\u30f3\u30c8\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\">\n                <button onclick=\"addComment()\">\u30b3\u30e1\u30f3\u30c8\u3092\u6295\u7a3f<\/button>\n            <\/div>\n        <\/section>\n    <\/main>\n    <footer>\n    <\/footer>\n\n    <!-- Register Form -->\n    <div class=\"register-form\">\n        <h2>\u30e6\u30fc\u30b6\u30fc\u767b\u9332<\/h2>\n        <input type=\"text\" id=\"registerUsername\" placeholder=\"\u30e6\u30fc\u30b6\u30fc\u540d\">\n        <input type=\"password\" id=\"registerPassword\" placeholder=\"\u30d1\u30b9\u30ef\u30fc\u30c9\">\n        <button onclick=\"register()\">\u767b\u9332<\/button>\n    <\/div>\n\n    <!-- Login Form -->\n    <div class=\"login-form\">\n        <h2>\u30ed\u30b0\u30a4\u30f3<\/h2>\n        <input type=\"text\" id=\"loginUsername\" placeholder=\"\u30e6\u30fc\u30b6\u30fc\u540d\">\n        <input type=\"password\" id=\"loginPassword\" placeholder=\"\u30d1\u30b9\u30ef\u30fc\u30c9\">\n        <button onclick=\"login()\">\u30ed\u30b0\u30a4\u30f3<\/button>\n    <\/div>\n\n    <!-- Upload Form -->\n    <div class=\"upload-form\">\n        <h2>\u52d5\u753b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/h2>\n        <input type=\"file\" id=\"uploadVideo\">\n        <input type=\"text\" id=\"uploadTitle\" placeholder=\"\u30bf\u30a4\u30c8\u30eb\">\n        <button onclick=\"upload()\">\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/button>\n    <\/div>\n\n    <!-- Profile Page -->\n    <div class=\"profile\">\n        <h2>\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb<\/h2>\n        <p>\u30e6\u30fc\u30b6\u30fc\u540d: <span id=\"profileUsername\"><\/span><\/p>\n        <p>\u767b\u9332\u65e5: <span id=\"profileDate\"><\/span><\/p>\n    <\/div>\n\n    <script>\n        let likeCount = 0;\n        let dislikeCount = 0;\n\n        function addComment() {\n            var commentInput = document.getElementById('commentInput');\n            var commentText = commentInput.value.trim();\n            if (commentText !== \"\") {\n                var commentsList = document.getElementById('comments');\n                var newComment = document.createElement('li');\n                var timestamp = new Date().toLocaleTimeString();\n                newComment.innerHTML = '<span class=\"timestamp\">' + timestamp + '<\/span> ' + commentText;\n                commentsList.appendChild(newComment);\n                commentInput.value = \"\";\n            }\n        }\n\n        function like() {\n            likeCount++;\n            document.getElementById('likeCount').innerText = likeCount;\n        }\n\n        function dislike() {\n            dislikeCount++;\n            document.getElementById('dislikeCount').innerText = dislikeCount;\n        }\n\n        function search() {\n            var searchInput = document.getElementById('searchInput').value.trim();\n            if (searchInput !== \"\") {\n                alert('\u691c\u7d22\u7d50\u679c: ' + searchInput);\n            }\n        }\n\n        function register() {\n            var username = document.getElementById('registerUsername').value.trim();\n            var password = document.getElementById('registerPassword').value.trim();\n            if (username !== \"\" && password !== \"\") {\n                alert('\u30e6\u30fc\u30b6\u30fc\u767b\u9332\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f: ' + username);\n                localStorage.setItem('username', username);\n                localStorage.setItem('password', password);\n                document.getElementById('registerUsername').value = \"\";\n                document.getElementById('registerPassword').value = \"\";\n            }\n        }\n\n        function login() {\n            var username = document.getElementById('loginUsername').value.trim();\n            var password = document.getElementById('loginPassword').value.trim();\n            var storedUsername = localStorage.getItem('username');\n            var storedPassword = localStorage.getItem('password');\n            if (username === storedUsername && password === storedPassword) {\n                alert('\u30ed\u30b0\u30a4\u30f3\u6210\u529f');\n                document.getElementById('profileUsername').innerText = username;\n                document.getElementById('profileDate').innerText = new Date().toLocaleDateString();\n                document.getElementById('loginUsername').value = \"\";\n                document.getElementById('loginPassword').value = \"\";\n            } else {\n                alert('\u30e6\u30fc\u30b6\u30fc\u540d\u307e\u305f\u306f\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u9593\u9055\u3063\u3066\u3044\u307e\u3059');\n            }\n        }\n\n        function upload() {\n            var video = document.getElementById('uploadVideo').files[0];\n            var title = document.getElementById('uploadTitle').value.trim();\n            if (video && title !== \"\") {\n                alert('\u52d5\u753b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f: ' + title);\n                document.getElementById('uploadVideo').value = \"\";\n                document.getElementById('uploadTitle').value = \"\";\n            }\n        }\n    <\/script>\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":[81,80,78,4,6],"tags":[30,41,3],"class_list":["post-25365","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-javascript","category-programming","category-web","tag-css","tag-javascript","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25365","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=25365"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25365\/revisions"}],"predecessor-version":[{"id":25366,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25365\/revisions\/25366"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25365"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}