{"id":26103,"date":"2025-07-18T21:39:06","date_gmt":"2025-07-18T12:39:06","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26103"},"modified":"2025-07-18T21:39:08","modified_gmt":"2025-07-18T12:39:08","slug":"%e5%8c%bf%e5%90%8d%e7%9b%b8%e8%ab%87%e3%83%bb%e5%85%b1%e6%84%9f%e3%83%97%e3%83%a9%e3%83%83%e3%83%88%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26103","title":{"rendered":"\u533f\u540d\u76f8\u8ac7\u30fb\u5171\u611f\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"ja\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  &lt;title>\u533f\u540d\u76f8\u8ac7\u30fb\u5171\u611f\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0&lt;\/title>\n  &lt;style>\n    body { font-family: 'Segoe UI', sans-serif; background: #eef1f5; margin: 0; padding: 20px; }\n    header { text-align: center; padding: 20px; background: #4a90e2; color: white; border-radius: 8px; }\n    .container { max-width: 800px; margin: 20px auto; }\n    .card { background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 15px; margin-bottom: 20px; }\n    textarea, input&#91;type=\"text\"] { width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ccc; border-radius: 5px; }\n    button { background: #4a90e2; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; margin-right: 5px; }\n    button:hover { background: #357ab8; }\n    .comment { background: #f5f5f5; border-left: 3px solid #4a90e2; padding: 8px; margin-top: 8px; border-radius: 5px; }\n    .meta { font-size: 0.85em; color: #555; }\n    .tag { display: inline-block; background: #ddd; border-radius: 5px; padding: 2px 8px; margin-right: 5px; font-size: 0.8em; }\n    footer { text-align: center; font-size: 0.8em; color: #888; margin-top: 50px; }\n    .search-bar { margin-bottom: 20px; }\n    .delete-btn { background: #e94e4e; }\n    .delete-btn:hover { background: #b73939; }\n    .edit-btn { background: #f0ad4e; }\n    .edit-btn:hover { background: #d98c00; }\n    .copy-btn { background: #6cc070; }\n    .copy-btn:hover { background: #4e9f50; }\n  &lt;\/style>\n&lt;\/head>\n&lt;body>\n\n  &lt;header>\n    &lt;h1>\u533f\u540d\u76f8\u8ac7\u30fb\u5171\u611f\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0&lt;\/h1>\n    &lt;p>\u60a9\u307f\u3084\u76f8\u8ac7\u3092\u533f\u540d\u3067\u6295\u7a3f\u3057\u3001\u5171\u611f\u3084\u30b3\u30e1\u30f3\u30c8\u3092\u3082\u3089\u304a\u3046&lt;\/p>\n  &lt;\/header>\n\n  &lt;div class=\"container\">\n    &lt;div class=\"card\">\n      &lt;h3>\u65b0\u3057\u3044\u76f8\u8ac7\u3092\u6295\u7a3f&lt;\/h3>\n      &lt;input type=\"text\" id=\"postTags\" placeholder=\"\u30bf\u30b0\uff08\u30ab\u30f3\u30de\u533a\u5207\u308a\uff09\">\n      &lt;textarea id=\"postText\" placeholder=\"\u3042\u306a\u305f\u306e\u60a9\u307f\u3084\u76f8\u8ac7\u3092\u66f8\u3044\u3066\u304f\u3060\u3055\u3044...\">&lt;\/textarea>\n      &lt;button onclick=\"addPost()\">\u6295\u7a3f\u3059\u308b&lt;\/button>\n    &lt;\/div>\n\n    &lt;div class=\"card search-bar\">\n      &lt;input type=\"text\" id=\"searchInput\" placeholder=\"\u6295\u7a3f\u691c\u7d22...\" oninput=\"searchPosts()\">\n    &lt;\/div>\n\n    &lt;div id=\"postsContainer\">&lt;\/div>\n  &lt;\/div>\n\n  &lt;footer>\n    &amp;copy; 2025 \u533f\u540d\u76f8\u8ac7\u30fb\u5171\u611f\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\n  &lt;\/footer>\n\n  &lt;script>\n    let posts = JSON.parse(localStorage.getItem('posts')) || &#91;];\n\n    function addPost() {\n      const text = document.getElementById('postText').value.trim();\n      const tags = document.getElementById('postTags').value.split(',').map(tag => tag.trim()).filter(tag => tag);\n      if (text) {\n        posts.unshift({ text, tags, empathy: 0, comments: &#91;], date: new Date().toLocaleString() });\n        document.getElementById('postText').value = '';\n        document.getElementById('postTags').value = '';\n        saveAndRender();\n      }\n    }\n\n    function addEmpathy(index) {\n      posts&#91;index].empathy++;\n      saveAndRender();\n    }\n\n    function addComment(index, commentId) {\n      const input = document.getElementById(commentId);\n      const commentText = input.value.trim();\n      if (commentText) {\n        posts&#91;index].comments.push({ text: commentText, date: new Date().toLocaleString() });\n        input.value = '';\n        saveAndRender();\n      }\n    }\n\n    function editPost(index) {\n      const newText = prompt('\u6295\u7a3f\u5185\u5bb9\u3092\u7de8\u96c6\u3057\u3066\u304f\u3060\u3055\u3044:', posts&#91;index].text);\n      if (newText !== null) {\n        posts&#91;index].text = newText;\n        saveAndRender();\n      }\n    }\n\n    function deletePost(index) {\n      if (confirm('\u3053\u306e\u6295\u7a3f\u3092\u524a\u9664\u3057\u307e\u3059\u304b\uff1f')) {\n        posts.splice(index, 1);\n        saveAndRender();\n      }\n    }\n\n    function copyPost(index) {\n      navigator.clipboard.writeText(posts&#91;index].text)\n        .then(() => alert('\u6295\u7a3f\u5185\u5bb9\u3092\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f'))\n        .catch(() => alert('\u30b3\u30d4\u30fc\u306b\u5931\u6557\u3057\u307e\u3057\u305f'));\n    }\n\n    function saveAndRender() {\n      localStorage.setItem('posts', JSON.stringify(posts));\n      renderPosts();\n    }\n\n    function renderPosts(filteredPosts = posts) {\n      const container = document.getElementById('postsContainer');\n      container.innerHTML = '';\n\n      filteredPosts.forEach((post, index) => {\n        let postHtml = `\n          &lt;div class=\"card\">\n            &lt;p>${post.text}&lt;\/p>\n            &lt;div>${post.tags.map(tag => `&lt;span class='tag'>#${tag}&lt;\/span>`).join(' ')}&lt;\/div>\n            &lt;p class=\"meta\">\u6295\u7a3f\u65e5: ${post.date}&lt;\/p>\n            &lt;button onclick=\"addEmpathy(${index})\">\u5171\u611f (${post.empathy})&lt;\/button>\n            &lt;button class=\"copy-btn\" onclick=\"copyPost(${index})\">\u30b3\u30d4\u30fc&lt;\/button>\n            &lt;button class=\"edit-btn\" onclick=\"editPost(${index})\">\u7de8\u96c6&lt;\/button>\n            &lt;button class=\"delete-btn\" onclick=\"deletePost(${index})\">\u524a\u9664&lt;\/button>\n            &lt;h4>\u30b3\u30e1\u30f3\u30c8&lt;\/h4>\n            &lt;input type=\"text\" id=\"commentInput${index}\" placeholder=\"\u30b3\u30e1\u30f3\u30c8\u3092\u66f8\u304f...\">\n            &lt;button onclick=\"addComment(${index}, 'commentInput${index}')\">\u9001\u4fe1&lt;\/button>\n        `;\n\n        post.comments.forEach(comment => {\n          postHtml += `&lt;div class=\"comment\">${comment.text}&lt;div class=\"meta\">${comment.date}&lt;\/div>&lt;\/div>`;\n        });\n\n        postHtml += '&lt;\/div>';\n        container.innerHTML += postHtml;\n      });\n    }\n\n    function searchPosts() {\n      const query = document.getElementById('searchInput').value.toLowerCase();\n      const filtered = posts.filter(post =>\n        post.text.toLowerCase().includes(query) ||\n        post.tags.some(tag => tag.toLowerCase().includes(query))\n      );\n      renderPosts(filtered);\n    }\n\n    renderPosts();\n  &lt;\/script>\n\n&lt;\/body>\n&lt;\/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,6,87],"tags":[3],"class_list":{"0":"post-26103","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-html","7":"category-web","9":"tag-programming"},"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26103","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=26103"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26103\/revisions"}],"predecessor-version":[{"id":26104,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26103\/revisions\/26104"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26103"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}