{"id":25598,"date":"2024-10-14T14:12:16","date_gmt":"2024-10-14T05:12:16","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25598"},"modified":"2024-10-14T14:12:18","modified_gmt":"2024-10-14T05:12:18","slug":"%e3%82%bf%e3%82%b9%e3%82%af%e7%ae%a1%e7%90%86-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25598","title":{"rendered":"\u30bf\u30b9\u30af\u7ba1\u7406.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>AI\u30d9\u30fc\u30b9\u306e\u30bf\u30b9\u30af\u7ba1\u7406\u30a2\u30d7\u30ea<\/title>\n  <style>\n    body {\n      font-family: Arial, sans-serif;\n      background-color: #f4f4f9;\n      margin: 0;\n      padding: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n    h1 {\n      color: #333;\n    }\n    .task-container {\n      width: 90%;\n      max-width: 1200px;\n      padding: 20px;\n    }\n    .task-form {\n      display: flex;\n      flex-direction: column;\n      margin-bottom: 20px;\n    }\n    .task-form input, .task-form textarea {\n      margin-bottom: 10px;\n      padding: 10px;\n      font-size: 16px;\n      border: 1px solid #ccc;\n      border-radius: 5px;\n    }\n    .task-form button {\n      padding: 10px;\n      background-color: #28a745;\n      color: #fff;\n      border: none;\n      border-radius: 5px;\n      cursor: pointer;\n    }\n    .task-form button:hover {\n      background-color: #218838;\n    }\n    .kanban-board {\n      display: flex;\n      justify-content: space-around;\n    }\n    .kanban-column {\n      background-color: #f8f9fa;\n      padding: 20px;\n      width: 30%;\n      border-radius: 10px;\n      min-height: 300px;\n    }\n    .kanban-column h2 {\n      text-align: center;\n    }\n    .task-list {\n      margin-top: 10px;\n    }\n    .task-item {\n      display: flex;\n      justify-content: space-between;\n      background-color: #e9ecef;\n      margin-bottom: 10px;\n      padding: 10px;\n      border-radius: 5px;\n    }\n    .task-item.high {\n      background-color: #ffcccc;\n    }\n    .task-item.medium {\n      background-color: #fff3cd;\n    }\n    .task-item.low {\n      background-color: #d4edda;\n    }\n    .task-item button {\n      background-color: #dc3545;\n      color: #fff;\n      border: none;\n      border-radius: 5px;\n      cursor: pointer;\n    }\n    .task-item button:hover {\n      background-color: #c82333;\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <h1>\u30bf\u30b9\u30af\u7ba1\u7406<\/h1>\n  <div class="task-container">\n    <form class="task-form" id="taskForm">\n      <input type="text" id="taskTitle" placeholder="\u30bf\u30b9\u30af\u30bf\u30a4\u30c8\u30eb" required>\n      <textarea id="taskDescription" placeholder="\u30bf\u30b9\u30af\u8a73\u7d30" rows="4"><\/textarea>\n      <input type="date" id="taskDueDate" required>\n      <button type="submit">\u30bf\u30b9\u30af\u3092\u8ffd\u52a0<\/button>\n    <\/form>\n\n    <div class="kanban-board">\n      <div class="kanban-column" id="notStarted">\n        <h2>\u672a\u7740\u624b<\/h2>\n        <div class="task-list" id="notStartedList"><\/div>\n      <\/div>\n      <div class="kanban-column" id="inProgress">\n        <h2>\u9032\u884c\u4e2d<\/h2>\n        <div class="task-list" id="inProgressList"><\/div>\n      <\/div>\n      <div class="kanban-column" id="completed">\n        <h2>\u5b8c\u4e86<\/h2>\n        <div class="task-list" id="completedList"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <script>\n    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];\n\n    \/\/ \u512a\u5148\u5ea6\u4e88\u6e2c\uff08\u30eb\u30fc\u30eb\u30d9\u30fc\u30b9\uff09\n    function predictPriority(taskDueDate) {\n      const daysLeft = (new Date(taskDueDate) - new Date()) \/ (1000 * 60 * 60 * 24);\n      if (daysLeft < 2) {\n        return 'High';  \/\/ \u7dca\u6025\u5ea6\u304c\u9ad8\u3044\n      } else if (daysLeft < 7) {\n        return 'Medium';  \/\/ 1\u9031\u9593\u4ee5\u5185\n      } else {\n        return 'Low';  \/\/ \u4f59\u88d5\u304c\u3042\u308b\n      }\n    }\n\n    \/\/ \u30bf\u30b9\u30af\u3092\u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u306b\u4fdd\u5b58\n    function saveTasks() {\n      localStorage.setItem('tasks', JSON.stringify(tasks));\n    }\n\n    \/\/ \u30bf\u30b9\u30af\u8868\u793a\n    function loadTasks() {\n      const notStartedList = document.getElementById('notStartedList');\n      const inProgressList = document.getElementById('inProgressList');\n      const completedList = document.getElementById('completedList');\n\n      notStartedList.innerHTML = '';\n      inProgressList.innerHTML = '';\n      completedList.innerHTML = '';\n\n      tasks.forEach(task => {\n        const taskItem = document.createElement('div');\n        taskItem.classList.add('task-item', task.priority.toLowerCase());\n        taskItem.setAttribute('draggable', true);\n        taskItem.innerHTML = `\n          <div>\n            <strong>${task.title}<\/strong>\n            <p>${task.description}<\/p>\n            <small>\u671f\u9650: ${new Date(task.dueDate).toLocaleDateString()}<\/small>\n            <p>\u512a\u5148\u5ea6: ${task.priority}<\/p>\n          <\/div>\n          <button onclick="deleteTask('${task.id}')">\u524a\u9664<\/button>\n        `;\n\n        taskItem.addEventListener('dragstart', (e) => {\n          e.dataTransfer.setData('text\/plain', task.id);\n        });\n\n        if (task.status === 'notStarted') {\n          notStartedList.appendChild(taskItem);\n        } else if (task.status === 'inProgress') {\n          inProgressList.appendChild(taskItem);\n        } else if (task.status === 'completed') {\n          completedList.appendChild(taskItem);\n        }\n      });\n    }\n\n    \/\/ \u30bf\u30b9\u30af\u8ffd\u52a0\n    document.getElementById('taskForm').addEventListener('submit', (e) => {\n      e.preventDefault();\n      const title = document.getElementById('taskTitle').value;\n      const description = document.getElementById('taskDescription').value;\n      const dueDate = document.getElementById('taskDueDate').value;\n\n      const priority = predictPriority(dueDate);\n\n      const newTask = {\n        id: Date.now().toString(),\n        title,\n        description,\n        dueDate,\n        priority,\n        status: 'notStarted'  \/\/ \u521d\u671f\u72b6\u614b\u306f\u672a\u7740\u624b\n      };\n\n      tasks.push(newTask);\n      saveTasks();\n      document.getElementById('taskForm').reset();\n      loadTasks();\n    });\n\n    \/\/ \u30bf\u30b9\u30af\u524a\u9664\n    function deleteTask(taskId) {\n      tasks = tasks.filter(task => task.id !== taskId);\n      saveTasks();\n      loadTasks();\n    }\n\n    \/\/ \u30c9\u30e9\u30c3\u30b0&\u30c9\u30ed\u30c3\u30d7\u306e\u8a2d\u5b9a\n    document.querySelectorAll('.kanban-column').forEach(column => {\n      column.addEventListener('dragover', (e) => {\n        e.preventDefault();\n      });\n\n      column.addEventListener('drop', (e) => {\n        const taskId = e.dataTransfer.getData('text\/plain');\n        const newStatus = column.id;\n\n        const task = tasks.find(task => task.id === taskId);\n        task.status = newStatus;\n        saveTasks();\n        loadTasks();\n      });\n    });\n\n    \/\/ \u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\u306b\u30bf\u30b9\u30af\u3092\u8868\u793a\n    loadTasks();\n  <\/script>\n\n<\/body>\n<\/html>\n\n<\/pre><\/div>","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],"tags":[42,3],"class_list":["post-25598","post","type-post","status-publish","format-standard","hentry","category-html","tag-html","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25598","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=25598"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25598\/revisions"}],"predecessor-version":[{"id":25599,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25598\/revisions\/25599"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25598"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}