{"id":26017,"date":"2025-05-17T14:28:32","date_gmt":"2025-05-17T05:28:32","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26017"},"modified":"2025-05-17T14:28:33","modified_gmt":"2025-05-17T05:28:33","slug":"note%e9%a2%a8web%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b9","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26017","title":{"rendered":"note\u98a8WEB\u30b5\u30fc\u30d3\u30b9"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>MiniNote - Note\u98a8\u30d6\u30ed\u30b0 with \u30d5\u30a3\u30eb\u30bf\u30fb\u3044\u3044\u306d\u30fb\u691c\u7d22\u6a5f\u80fd<\/title>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    body { font-family: sans-serif; background: #f9f9f9; margin: 0; }\n    header { background: #2c3e50; color: white; padding: 1em; text-align: center; }\n    nav { background: #34495e; text-align: center; padding: 0.5em; }\n    nav button { margin: 0 8px; padding: 8px 20px; cursor: pointer; background: #ecf0f1; border: none; border-radius: 5px; }\n    #main { max-width: 900px; margin: 2em auto; padding: 1em; background: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }\n    article { padding: 1em; border-bottom: 1px solid #ddd; }\n    h2 { margin: 0.5em 0; }\n    .meta { font-size: 0.9em; color: #999; margin-bottom: 0.5em; }\n    textarea, input[type=\"text\"] { width: 100%; padding: 10px; margin: 10px 0; border-radius: 5px; border: 1px solid #ccc; }\n    button.submit {\n      background: #3498db; color: white; border: none;\n      padding: 10px 20px; border-radius: 6px;\n      cursor: pointer; font-weight: bold;\n    }\n    .hidden { display: none; }\n    .tag { color: #3498db; margin-right: 5px; font-size: 0.9em; cursor: pointer; }\n    .actions button { margin-right: 10px; }\n    .like { color: #e74c3c; cursor: pointer; margin-left: 10px; }\n  <\/style>\n<\/head>\n<body>\n\n<header><h1>\ud83d\udcd8 MiniNote - \u3042\u306a\u305f\u306eNote\u98a8\u30d6\u30ed\u30b0<\/h1><\/header>\n\n<nav>\n  <button onclick=\"showView('home')\">\ud83c\udfe0 \u30db\u30fc\u30e0<\/button>\n  <button onclick=\"showView('new')\">\u270d \u65b0\u898f\u6295\u7a3f<\/button>\n  <input type=\"text\" id=\"searchInput\" placeholder=\"\u691c\u7d22\" oninput=\"renderPosts()\" style=\"padding:5px; width: 200px;\">\n<\/nav>\n\n<div id=\"main\">\n  <div id=\"homeView\">\n    <div id=\"postList\"><\/div>\n  <\/div>\n\n  <div id=\"newView\" class=\"hidden\">\n    <h2>\u65b0\u3057\u3044\u6295\u7a3f\u3092\u4f5c\u6210<\/h2>\n    <input type=\"text\" id=\"titleInput\" placeholder=\"\u30bf\u30a4\u30c8\u30eb\">\n    <textarea id=\"contentInput\" rows=\"8\" placeholder=\"\u672c\u6587\"><\/textarea>\n    <input type=\"text\" id=\"tagInput\" placeholder=\"\u30bf\u30b0\uff08\u30ab\u30f3\u30de\u533a\u5207\u308a\uff09\">\n    <button class=\"submit\" onclick=\"addPost()\">\u6295\u7a3f\u3059\u308b<\/button>\n  <\/div>\n\n  <div id=\"detailView\" class=\"hidden\">\n    <article>\n      <h2 id=\"detailTitle\"><\/h2>\n      <div class=\"meta\" id=\"detailDate\"><\/div>\n      <p id=\"detailContent\"><\/p>\n      <div id=\"detailTags\"><\/div>\n      <div class=\"like\" id=\"likeDisplay\" onclick=\"likePost(currentIndex)\">\u2764\ufe0f <span id=\"likeCount\">0<\/span><\/div>\n    <\/article>\n    <div class=\"actions\">\n      <button onclick=\"editPost(currentIndex)\">\u270f \u7de8\u96c6<\/button>\n      <button onclick=\"deletePost(currentIndex)\">\ud83d\uddd1 \u524a\u9664<\/button>\n      <button onclick=\"showView('home')\">\u2190 \u623b\u308b<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  let posts = JSON.parse(localStorage.getItem(\"posts\") || \"[]\");\n  let currentIndex = null;\n  let filterTag = null;\n\n  function showView(view) {\n    document.querySelectorAll('#main > div').forEach(div => div.classList.add('hidden'));\n    document.getElementById(view + \"View\").classList.remove(\"hidden\");\n    if (view === \"home\") renderPosts();\n  }\n\n  function addPost() {\n    const title = document.getElementById(\"titleInput\").value;\n    const content = document.getElementById(\"contentInput\").value;\n    const tags = document.getElementById(\"tagInput\").value.split(',').map(tag => tag.trim()).filter(Boolean);\n    if (!title || !content) return alert(\"\u30bf\u30a4\u30c8\u30eb\u3068\u672c\u6587\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\");\n\n    const date = new Date().toLocaleString();\n    posts.unshift({ title, content, date, tags, likes: 0 });\n    localStorage.setItem(\"posts\", JSON.stringify(posts));\n    clearForm();\n    showView(\"home\");\n  }\n\n  function renderPosts() {\n    const list = document.getElementById(\"postList\");\n    const search = document.getElementById(\"searchInput\").value.toLowerCase();\n    list.innerHTML = \"\";\n    posts.filter(post => {\n      const inSearch = post.title.toLowerCase().includes(search) || post.content.toLowerCase().includes(search);\n      const inTag = !filterTag || post.tags.includes(filterTag);\n      return inSearch && inTag;\n    }).forEach((post, index) => {\n      const el = document.createElement(\"article\");\n      el.innerHTML = `\n        <h2>${post.title}<\/h2>\n        <div class=\"meta\">${post.date}<\/div>\n        <p>${post.content.substring(0, 80)}...<\/p>\n        <div>${post.tags.map(tag => `<span class='tag' onclick='filterByTag(\"${tag}\")'>#${tag}<\/span>`).join(' ')}<\/div>\n        <div class=\"like\">\u2764\ufe0f ${post.likes}<\/div>\n        <button onclick=\"showDetail(${index})\">\ud83d\udcd6 \u8a73\u7d30<\/button>\n      `;\n      list.appendChild(el);\n    });\n  }\n\n  function filterByTag(tag) {\n    filterTag = tag;\n    renderPosts();\n  }\n\n  function showDetail(index) {\n    const post = posts[index];\n    currentIndex = index;\n    document.getElementById(\"detailTitle\").innerText = post.title;\n    document.getElementById(\"detailDate\").innerText = post.date;\n    document.getElementById(\"detailContent\").innerText = post.content;\n    document.getElementById(\"detailTags\").innerHTML = post.tags.map(tag => `<span class='tag'>#${tag}<\/span>`).join(' ');\n    document.getElementById(\"likeCount\").innerText = post.likes;\n    showView(\"detail\");\n  }\n\n  function likePost(index) {\n    posts[index].likes++;\n    localStorage.setItem(\"posts\", JSON.stringify(posts));\n    document.getElementById(\"likeCount\").innerText = posts[index].likes;\n    renderPosts();\n  }\n\n  function editPost(index) {\n    const post = posts[index];\n    document.getElementById(\"titleInput\").value = post.title;\n    document.getElementById(\"contentInput\").value = post.content;\n    document.getElementById(\"tagInput\").value = post.tags.join(', ');\n    posts.splice(index, 1);\n    localStorage.setItem(\"posts\", JSON.stringify(posts));\n    showView(\"new\");\n  }\n\n  function deletePost(index) {\n    if (!confirm(\"\u672c\u5f53\u306b\u524a\u9664\u3057\u307e\u3059\u304b\uff1f\")) return;\n    posts.splice(index, 1);\n    localStorage.setItem(\"posts\", JSON.stringify(posts));\n    showView(\"home\");\n  }\n\n  function clearForm() {\n    document.getElementById(\"titleInput\").value = \"\";\n    document.getElementById(\"contentInput\").value = \"\";\n    document.getElementById(\"tagInput\").value = \"\";\n  }\n\n  showView(\"home\");\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,6],"tags":[],"class_list":["post-26017","post","type-post","status-publish","format-standard","hentry","category-html","category-programming","category-web"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26017","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=26017"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26017\/revisions"}],"predecessor-version":[{"id":26018,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26017\/revisions\/26018"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26017"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}