{"id":25327,"date":"2024-05-05T14:57:33","date_gmt":"2024-05-05T05:57:33","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25327"},"modified":"2024-05-05T14:57:35","modified_gmt":"2024-05-05T05:57:35","slug":"%e5%8b%95%e7%94%bb%e5%85%b1%e6%9c%89%e3%82%b5%e3%82%a4%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25327","title":{"rendered":"\u52d5\u753b\u5171\u6709\u30b5\u30a4\u30c8"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u52d5\u753b\u5171\u6709\u30b5\u30a4\u30c8<\/title>\n    <style>\n        \/* \u30b9\u30bf\u30a4\u30eb\u306f\u7701\u7565 *\/\n    <\/style>\n<\/head>\n<body>\n    <header>\n        <h1>\u52d5\u753b\u5171\u6709\u30b5\u30a4\u30c8<\/h1>\n    <\/header>\n    <main>\n        <section id=\"video-container\">\n            <!-- \u52d5\u753b\u3092\u8868\u793a -->\n            <iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Qkls4DCX_9I\" frameborder=\"0\" allowfullscreen><\/iframe>\n        <\/section>\n        <section id=\"comments-container\">\n            <!-- \u30b3\u30e1\u30f3\u30c8\u3092\u8868\u793a -->\n        <\/section>\n        <section id=\"comment-form-container\">\n            <!-- \u30b3\u30e1\u30f3\u30c8\u3092\u6295\u7a3f\u3059\u308b\u30d5\u30a9\u30fc\u30e0 -->\n            <form id=\"comment-form\">\n                <textarea id=\"comment-input\" rows=\"3\" placeholder=\"\u30b3\u30e1\u30f3\u30c8\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\"><\/textarea>\n                <button type=\"submit\">\u30b3\u30e1\u30f3\u30c8\u3092\u6295\u7a3f<\/button>\n            <\/form>\n        <\/section>\n        <section id=\"categories\">\n            <!-- \u30ab\u30c6\u30b4\u30ea\u4e00\u89a7 -->\n            <h2>\u30ab\u30c6\u30b4\u30ea<\/h2>\n            <ul>\n                <li><a href=\"#\">\u97f3\u697d<\/a><\/li>\n                <li><a href=\"#\">\u30b9\u30dd\u30fc\u30c4<\/a><\/li>\n                <li><a href=\"#\">\u30b2\u30fc\u30e0<\/a><\/li>\n                <li><a href=\"#\">\u30cb\u30e5\u30fc\u30b9<\/a><\/li>\n            <\/ul>\n        <\/section>\n    <\/main>\n    <footer>\n        <!-- \u304a\u6c17\u306b\u5165\u308a\u30dc\u30bf\u30f3 -->\n        <button id=\"favorite-button\">\u304a\u6c17\u306b\u5165\u308a<\/button>\n        <!-- \u691c\u7d22\u30d5\u30a9\u30fc\u30e0 -->\n        <input type=\"text\" id=\"search-input\" placeholder=\"\u52d5\u753b\u3092\u691c\u7d22\">\n        <button id=\"search-button\">\u691c\u7d22<\/button>\n    <\/footer>\n    <script>\n        \/\/ \u30b3\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0\u3059\u308b\u95a2\u6570\n        function addComment(comment) {\n            var commentsContainer = document.getElementById('comments-container');\n            var commentElement = document.createElement('div');\n            commentElement.textContent = comment;\n            commentsContainer.appendChild(commentElement);\n        }\n\n        \/\/ \u30d5\u30a9\u30fc\u30e0\u306e\u9001\u4fe1\u30a4\u30d9\u30f3\u30c8\u3092\u51e6\u7406\u3059\u308b\n        document.getElementById('comment-form').addEventListener('submit', function(event) {\n            event.preventDefault(); \/\/ \u30d5\u30a9\u30fc\u30e0\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u52d5\u4f5c\u3092\u505c\u6b62\n\n            var commentInput = document.getElementById('comment-input');\n            var commentText = commentInput.value.trim(); \/\/ \u5165\u529b\u3055\u308c\u305f\u30b3\u30e1\u30f3\u30c8\u3092\u53d6\u5f97\n\n            if (commentText !== '') {\n                addComment(commentText); \/\/ \u30b3\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0\n                commentInput.value = ''; \/\/ \u5165\u529b\u6b04\u3092\u30af\u30ea\u30a2\n            }\n        });\n\n        \/\/ \u304a\u6c17\u306b\u5165\u308a\u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3092\u51e6\u7406\u3059\u308b\n        document.getElementById('favorite-button').addEventListener('click', function() {\n            alert('\u52d5\u753b\u3092\u304a\u6c17\u306b\u5165\u308a\u306b\u8ffd\u52a0\u3057\u307e\u3057\u305f\uff01');\n        });\n\n        \/\/ \u691c\u7d22\u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3092\u51e6\u7406\u3059\u308b\n        document.getElementById('search-button').addEventListener('click', function() {\n            var searchInput = document.getElementById('search-input').value.trim();\n            alert('\u300c' + searchInput + '\u300d\u3067\u691c\u7d22\u3057\u307e\u3057\u305f\uff01');\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":[7],"tags":[3,16],"class_list":["post-25327","post","type-post","status-publish","format-standard","hentry","category-webdev","tag-programming","tag-webdev"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25327","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=25327"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25327\/revisions"}],"predecessor-version":[{"id":25328,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25327\/revisions\/25328"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25327"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}