{"id":5525,"date":"2026-04-04T12:34:08","date_gmt":"2026-04-04T03:34:08","guid":{"rendered":"https:\/\/nk-ts.net\/?page_id=5525"},"modified":"2026-04-04T12:50:24","modified_gmt":"2026-04-04T03:50:24","slug":"%e3%82%bb%e3%83%b3%e3%82%bf%e3%83%bc%e7%94%a8","status":"publish","type":"page","link":"https:\/\/nk-ts.net\/?page_id=5525","title":{"rendered":"\u30bb\u30f3\u30bf\u30fc\u7528"},"content":{"rendered":"\n<!-- PC\u30a2\u30e9\u30fc\u30e0\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0 for WordPress -->\n<div id=\"pc-alarm-app\" style=\"font-family: 'Segoe UI', 'Meiryo', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 12px; min-height: 600px;\">\n  \n  <style>\n    #pc-alarm-app * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    #pc-alarm-app {\n      font-family: 'Segoe UI', 'Meiryo', Tahoma, Geneva, Verdana, sans-serif !important;\n    }\n\n    .alarm-app-container {\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      min-height: 600px;\n    }\n\n    .alarm-app-header {\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n      padding: 20px 30px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-shrink: 0;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n    }\n\n    .alarm-header-left h1 {\n      font-size: 24px;\n      margin-bottom: 4px;\n      font-weight: 700;\n    }\n\n    .alarm-header-left p {\n      font-size: 12px;\n      opacity: 0.9;\n      font-weight: 300;\n    }\n\n    .alarm-status-indicator {\n      text-align: right;\n    }\n\n    .alarm-status-indicator p {\n      font-size: 12px;\n      opacity: 0.8;\n    }\n\n    .alarm-status-dot {\n      display: inline-block;\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: #4ade80;\n      margin-right: 6px;\n      animation: alarmPulse 2s infinite;\n    }\n\n    @keyframes alarmPulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    .alarm-content-wrapper {\n      flex: 1;\n      display: flex;\n      overflow: hidden;\n    }\n\n    .alarm-input-panel {\n      width: 35%;\n      background: #f9f9f9;\n      padding: 25px;\n      border-right: 1px solid #e0e0e0;\n      overflow-y: auto;\n    }\n\n    .alarm-alarms-panel {\n      width: 65%;\n      padding: 25px;\n      overflow-y: auto;\n    }\n\n    .alarm-form-group {\n      margin-bottom: 20px;\n    }\n\n    .alarm-form-group label {\n      display: block;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 8px;\n      font-size: 13px;\n    }\n\n    .alarm-form-group input[type=\"time\"],\n    .alarm-form-group input[type=\"text\"] {\n      width: 100%;\n      padding: 10px 12px;\n      border: 2px solid #e0e0e0;\n      border-radius: 6px;\n      font-size: 13px;\n      transition: all 0.3s;\n      font-family: inherit;\n    }\n\n    .alarm-form-group input[type=\"time\"]:focus,\n    .alarm-form-group input[type=\"text\"]:focus {\n      outline: none;\n      border-color: #667eea;\n      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n    }\n\n    .alarm-audio-control {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n\n    .alarm-audio-control input {\n      flex: 1;\n    }\n\n    .alarm-btn {\n      padding: 8px 14px;\n      border: none;\n      border-radius: 6px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.3s;\n      font-family: inherit;\n    }\n\n    .alarm-btn-small {\n      padding: 7px 10px;\n      font-size: 12px;\n    }\n\n    .alarm-btn-secondary {\n      background: #f0f0f0;\n      color: #333;\n      border: 2px solid #ddd;\n    }\n\n    .alarm-btn-secondary:hover {\n      background: #e8e8e8;\n      border-color: #667eea;\n    }\n\n    .alarm-btn-tertiary {\n      background: #fff;\n      color: #333;\n      border: 1px solid #ddd;\n      padding: 6px 10px;\n      font-size: 11px;\n    }\n\n    .alarm-btn-tertiary:hover {\n      background: #f5f5f5;\n      border-color: #667eea;\n    }\n\n    .alarm-pc-controls {\n      display: flex;\n      gap: 8px;\n      margin-bottom: 10px;\n    }\n\n    .alarm-pc-controls .alarm-btn {\n      flex: 1;\n      padding: 6px 10px;\n      font-size: 12px;\n    }\n\n    .alarm-pc-checkboxes {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));\n      gap: 8px;\n      padding: 12px;\n      background: white;\n      border-radius: 6px;\n      border: 1px solid #e0e0e0;\n      max-height: 180px;\n      overflow-y: auto;\n    }\n\n    .alarm-pc-checkbox {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .alarm-pc-checkbox input[type=\"checkbox\"] {\n      cursor: pointer;\n      width: 15px;\n      height: 15px;\n      accent-color: #667eea;\n      flex-shrink: 0;\n    }\n\n    .alarm-pc-checkbox label {\n      margin: 0;\n      cursor: pointer;\n      font-weight: 500;\n      font-size: 12px;\n      user-select: none;\n    }\n\n    .alarm-button-group {\n      display: flex;\n      gap: 10px;\n      margin-top: 18px;\n    }\n\n    .alarm-btn-primary {\n      flex: 1;\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n      padding: 11px 20px;\n      font-size: 14px;\n    }\n\n    .alarm-btn-primary:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);\n    }\n\n    .alarm-btn-primary:active {\n      transform: translateY(0);\n    }\n\n    .alarm-button-group .alarm-btn-secondary {\n      flex: 1;\n      background: #f0f0f0;\n      color: #333;\n      border: 2px solid #ddd;\n      padding: 11px 20px;\n      font-size: 14px;\n    }\n\n    .alarm-button-group .alarm-btn-secondary:hover {\n      background: #e8e8e8;\n      border-color: #667eea;\n    }\n\n    .alarm-alarms-section h2 {\n      color: #333;\n      margin-bottom: 12px;\n      font-size: 16px;\n      border-bottom: 2px solid #667eea;\n      padding-bottom: 10px;\n    }\n\n    .alarm-alarms-info {\n      font-size: 12px;\n      color: #666;\n      margin-bottom: 12px;\n      font-weight: 500;\n    }\n\n    .alarm-table {\n      width: 100%;\n      border-collapse: collapse;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      overflow: hidden;\n      font-size: 12px;\n    }\n\n    .alarm-table thead {\n      background: #f5f5f5;\n    }\n\n    .alarm-table th {\n      padding: 10px;\n      text-align: left;\n      font-weight: 600;\n      color: #333;\n      border-bottom: 2px solid #ddd;\n      font-size: 12px;\n    }\n\n    .alarm-table td {\n      padding: 10px;\n      border-bottom: 1px solid #eee;\n      font-size: 12px;\n    }\n\n    .alarm-table tbody tr:hover {\n      background: #f9f9f9;\n    }\n\n    .alarm-btn-delete {\n      padding: 4px 8px;\n      background: #ff6b6b;\n      color: white;\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 11px;\n      font-weight: 600;\n      transition: all 0.3s;\n      white-space: nowrap;\n    }\n\n    .alarm-btn-delete:hover {\n      background: #ff5252;\n    }\n\n    .alarm-status {\n      padding: 4px 8px;\n      border-radius: 4px;\n      font-size: 11px;\n      font-weight: 600;\n      display: inline-block;\n    }\n\n    .alarm-status.pending {\n      background: #fff3cd;\n      color: #856404;\n    }\n\n    .alarm-status.done {\n      background: #d4edda;\n      color: #155724;\n    }\n\n    .alarm-empty-message {\n      text-align: center;\n      color: #999;\n      padding: 20px;\n      font-style: italic;\n      font-size: 12px;\n    }\n\n    .alarm-small {\n      display: block;\n      color: #666;\n      font-size: 10px;\n      margin-top: 4px;\n    }\n\n    .alarm-toast {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      background: #28a745;\n      color: white;\n      padding: 12px 20px;\n      border-radius: 6px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      z-index: 9999;\n      animation: alarmSlideUp 0.3s ease-out;\n      font-size: 12px;\n    }\n\n    @keyframes alarmSlideUp {\n      from {\n        transform: translateY(100px);\n        opacity: 0;\n      }\n      to {\n        transform: translateY(0);\n        opacity: 1;\n      }\n    }\n\n    .alarm-popup {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.7);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10000;\n    }\n\n    .alarm-popup-content {\n      background: white;\n      padding: 40px;\n      border-radius: 12px;\n      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n      max-width: 450px;\n      text-align: center;\n      animation: alarmPopupSlide 0.4s ease-out;\n    }\n\n    @keyframes alarmPopupSlide {\n      from {\n        transform: scale(0.8);\n        opacity: 0;\n      }\n      to {\n        transform: scale(1);\n        opacity: 1;\n      }\n    }\n\n    .alarm-popup-content h2 {\n      color: #ff6b6b;\n      font-size: 32px;\n      margin-bottom: 20px;\n      border: none;\n      padding: 0;\n    }\n\n    .alarm-popup-content .alarm-details {\n      text-align: left;\n      background: #f9f9f9;\n      padding: 20px;\n      border-radius: 8px;\n      margin-bottom: 20px;\n      line-height: 1.8;\n    }\n\n    .alarm-popup-content .alarm-details div {\n      margin-bottom: 10px;\n      font-size: 13px;\n    }\n\n    .alarm-popup-content .alarm-details strong {\n      color: #667eea;\n    }\n\n    .alarm-popup-content .alarm-popup-btn {\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n      border: none;\n      padding: 11px 35px;\n      font-size: 14px;\n      border-radius: 6px;\n      cursor: pointer;\n      font-weight: 600;\n      transition: all 0.3s;\n    }\n\n    .alarm-popup-content .alarm-popup-btn:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);\n    }\n\n    .alarm-time-display {\n      color: #667eea;\n      font-size: 15px;\n      font-weight: 700;\n    }\n\n    ::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    ::-webkit-scrollbar-track {\n      background: #f1f1f1;\n      border-radius: 10px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n      background: #667eea;\n      border-radius: 10px;\n    }\n\n    ::-webkit-scrollbar-thumb:hover {\n      background: #764ba2;\n    }\n\n    @media (max-width: 1000px) {\n      .alarm-input-panel {\n        width: 40%;\n      }\n      .alarm-alarms-panel {\n        width: 60%;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .alarm-content-wrapper {\n        flex-direction: column;\n      }\n      .alarm-input-panel {\n        width: 100%;\n        border-right: none;\n        border-bottom: 1px solid #e0e0e0;\n        max-height: 40%;\n      }\n      .alarm-alarms-panel {\n        width: 100%;\n        max-height: 60%;\n      }\n    }\n  <\/style>\n\n  <div class=\"alarm-app-container\">\n    <!-- \u30d8\u30c3\u30c0\u30fc -->\n    <div class=\"alarm-app-header\">\n      <div class=\"alarm-header-left\">\n        <h1>\ud83d\udd14 PC\u30a2\u30e9\u30fc\u30e0\u7ba1\u7406<\/h1>\n        <p>\u8907\u6570PC(1\uff5e45)\u306e\u30a2\u30e9\u30fc\u30e0\u4e00\u5143\u7ba1\u7406<\/p>\n      <\/div>\n      <div class=\"alarm-status-indicator\">\n        <p><span class=\"alarm-status-dot\"><\/span>\u5b9f\u884c\u4e2d<\/p>\n        <p style=\"font-size: 11px; margin-top: 2px;\" id=\"alarm-current-time\">&#8211;:&#8211;<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- \u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4 -->\n    <div class=\"alarm-content-wrapper\">\n      <!-- \u5165\u529b\u30d1\u30cd\u30eb -->\n      <div class=\"alarm-input-panel\">\n        <div class=\"alarm-form-group\">\n          <label>\u30a2\u30e9\u30fc\u30e0\u6642\u523b:<\/label>\n          <input \n            type=\"time\" \n            id=\"alarm-time\" \n            required\n          >\n        <\/div>\n\n        <div class=\"alarm-form-group\">\n          <label>PC\u756a\u53f7\uff08\u8907\u6570\u9078\u629e\u53ef\uff09:<\/label>\n          <div class=\"alarm-pc-controls\">\n            <button id=\"alarm-select-all-btn\" class=\"alarm-btn alarm-btn-tertiary\">\u5168\u9078\u629e<\/button>\n            <button id=\"alarm-clear-all-btn\" class=\"alarm-btn alarm-btn-tertiary\">\u5168\u89e3\u9664<\/button>\n          <\/div>\n          <div id=\"alarm-pc-list\" class=\"alarm-pc-checkboxes\">\n            <!-- JS\u3067\u52d5\u7684\u751f\u6210 -->\n          <\/div>\n        <\/div>\n\n        <div class=\"alarm-form-group\">\n          <label for=\"alarm-memo\">\u30e1\u30e2\uff08\u30aa\u30d7\u30b7\u30e7\u30f3\uff09:<\/label>\n          <input \n            type=\"text\" \n            id=\"alarm-memo\" \n            placeholder=\"\u4f8b\uff1a\u7c3f\u8a18\u8a66\u9a13\u7d42\u4e86\u300110\u5206\u9045\u523b\"\n          >\n        <\/div>\n\n        <div class=\"alarm-button-group\">\n          <button id=\"alarm-add-btn\" class=\"alarm-btn alarm-btn-primary\">\u2705 \u30bb\u30c3\u30c8<\/button>\n          <button id=\"alarm-clear-form-btn\" class=\"alarm-btn alarm-btn-secondary\">\ud83d\uddd1\ufe0f \u30af\u30ea\u30a2<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- \u30a2\u30e9\u30fc\u30e0\u30d1\u30cd\u30eb -->\n      <div class=\"alarm-alarms-panel\">\n        <h2>\u767b\u9332\u6e08\u307f\u30a2\u30e9\u30fc\u30e0<\/h2>\n        <div id=\"alarm-alarms-info\" class=\"alarm-alarms-info\">\n          \u767b\u9332\u6570: <span id=\"alarm-count\">0<\/span>\u4ef6\n        <\/div>\n        <table class=\"alarm-table\">\n          <thead>\n            <tr>\n              <th style=\"width: 60px;\">\u6642\u523b<\/th>\n              <th>PC\u756a\u53f7<\/th>\n              <th>\u30e1\u30e2<\/th>\n              <th style=\"width: 70px;\">\u30b9\u30c6\u30fc\u30bf\u30b9<\/th>\n              <th style=\"width: 60px;\">\u64cd\u4f5c<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody id=\"alarm-alarms-tbody\">\n            <!-- JS\u3067\u52d5\u7684\u751f\u6210 -->\n          <\/tbody>\n        <\/table>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u30a2\u30e9\u30fc\u30e0\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 -->\n  <div id=\"alarm-popup\" class=\"alarm-popup\" style=\"display: none;\">\n    <div class=\"alarm-popup-content\">\n      <h2>\ud83d\udd14 \u30a2\u30e9\u30fc\u30e0\u5b9f\u884c<\/h2>\n      <div class=\"alarm-details\">\n        <div>\u6642\u523b: <strong id=\"alarm-popup-time\" class=\"alarm-time-display\">&#8211;:&#8211;<\/strong><\/div>\n        <div>PC: <strong id=\"alarm-popup-pcs\">&#8212;<\/strong><\/div>\n        <div id=\"alarm-popup-memo-div\" style=\"display: none;\">\u30e1\u30e2: <strong id=\"alarm-popup-memo\">&#8212;<\/strong><\/div>\n      <\/div>\n      <button class=\"alarm-popup-btn\" onclick=\"document.getElementById('alarm-popup').style.display='none'\">\n        \u4e86\u89e3\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <script>\n    (function() {\n      \/\/ \u30a2\u30e9\u30fc\u30e0\u7ba1\u7406\u30af\u30e9\u30b9\n      class WordPressAlarmManager {\n        constructor() {\n          this.storageKey = 'wpAlarmData';\n          this.alarms = JSON.parse(localStorage.getItem(this.storageKey)) || [];\n          this.audioContext = null;\n          this.init();\n        }\n\n        init() {\n          this.renderPCList();\n          this.renderAlarms();\n          this.setupEventListeners();\n          this.startCheckingAlarms();\n          this.startTimerDisplay();\n        }\n\n        renderPCList() {\n          const pcList = document.getElementById('alarm-pc-list');\n          pcList.innerHTML = '';\n          \n          for (let i = 1; i <= 45; i++) {\n            const div = document.createElement('div');\n            div.className = 'alarm-pc-checkbox';\n            div.innerHTML = `\n              <input type=\"checkbox\" id=\"alarm-pc-${i}\" value=\"${i}\">\n              <label for=\"alarm-pc-${i}\">PC${i}<\/label>\n            `;\n            pcList.appendChild(div);\n          }\n        }\n\n        setupEventListeners() {\n          document.getElementById('alarm-add-btn').addEventListener('click', () => {\n            this.addAlarm();\n          });\n\n          document.getElementById('alarm-clear-form-btn').addEventListener('click', () => {\n            this.clearForm();\n          });\n\n          document.getElementById('alarm-select-all-btn').addEventListener('click', () => {\n            document.querySelectorAll('.alarm-pc-checkbox input[type=\"checkbox\"]').forEach(el => {\n              el.checked = true;\n            });\n          });\n\n          document.getElementById('alarm-clear-all-btn').addEventListener('click', () => {\n            document.querySelectorAll('.alarm-pc-checkbox input[type=\"checkbox\"]').forEach(el => {\n              el.checked = false;\n            });\n          });\n\n          document.getElementById('alarm-time').addEventListener('keypress', (e) => {\n            if (e.key === 'Enter') this.addAlarm();\n          });\n\n          document.getElementById('alarm-memo').addEventListener('keypress', (e) => {\n            if (e.key === 'Enter') this.addAlarm();\n          });\n        }\n\n        addAlarm() {\n          const time = document.getElementById('alarm-time').value;\n          const memo = document.getElementById('alarm-memo').value;\n          const selectedPCs = Array.from(\n            document.querySelectorAll('.alarm-pc-checkbox input[type=\"checkbox\"]:checked')\n          ).map(el => parseInt(el.value));\n\n          if (!time) {\n            alert('\u23f0 \u6642\u523b\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044');\n            return;\n          }\n\n          if (selectedPCs.length === 0) {\n            alert('\ud83d\udcf1 PC\u30921\u3064\u4ee5\u4e0a\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044');\n            return;\n          }\n\n          const alarm = {\n            id: Date.now(),\n            time,\n            pcs: selectedPCs,\n            memo,\n            done: false\n          };\n\n          this.alarms.push(alarm);\n          this.save();\n          this.renderAlarms();\n          this.clearForm();\n          this.showToast(`\u2705 \u30a2\u30e9\u30fc\u30e0\u8ffd\u52a0\u5b8c\u4e86: ${time}`);\n        }\n\n        clearForm() {\n          document.getElementById('alarm-time').value = '';\n          document.getElementById('alarm-memo').value = '';\n          document.querySelectorAll('.alarm-pc-checkbox input').forEach(el => el.checked = false);\n        }\n\n        deleteAlarm(id) {\n          if (confirm('\u3053\u306e\u30a2\u30e9\u30fc\u30e0\u3092\u524a\u9664\u3057\u307e\u3059\u304b\uff1f')) {\n            this.alarms = this.alarms.filter(a => a.id !== id);\n            this.save();\n            this.renderAlarms();\n            this.showToast('\ud83d\uddd1\ufe0f \u30a2\u30e9\u30fc\u30e0\u3092\u524a\u9664\u3057\u307e\u3057\u305f');\n          }\n        }\n\n        renderAlarms() {\n          const tbody = document.getElementById('alarm-alarms-tbody');\n          const count = document.getElementById('alarm-count');\n          \n          count.textContent = this.alarms.length;\n\n          if (this.alarms.length === 0) {\n            tbody.innerHTML = '<tr><td colspan=\"5\" class=\"alarm-empty-message\">\u767b\u9332\u6e08\u307f\u30a2\u30e9\u30fc\u30e0\u306f\u3042\u308a\u307e\u305b\u3093<\/td><\/tr>';\n            return;\n          }\n\n          tbody.innerHTML = this.alarms\n            .sort((a, b) => a.time.localeCompare(b.time))\n            .map(alarm => {\n              const pcDisplay = alarm.pcs.length > 3 \n                ? `PC${alarm.pcs.slice(0, 3).join(', PC')}...` \n                : `PC${alarm.pcs.join(', PC')}`;\n              \n              return `\n                <tr>\n                  <td><strong class=\"alarm-time-display\">${alarm.time}<\/strong><\/td>\n                  <td title=\"PC${alarm.pcs.join(', PC')}\">${pcDisplay}<\/td>\n                  <td title=\"${alarm.memo || ''}\">${alarm.memo ? alarm.memo.substring(0, 10) + (alarm.memo.length > 10 ? '...' : '') : '\u2014'}<\/td>\n                  <td>\n                    <span class=\"alarm-status ${alarm.done ? 'done' : 'pending'}\">\n                      ${alarm.done ? '\u2705 \u5b8c\u4e86' : '\u23f3 \u5f85\u6a5f\u4e2d'}\n                    <\/span>\n                  <\/td>\n                  <td>\n                    <button class=\"alarm-btn-delete\" onclick=\"window.wpAlarmManager.deleteAlarm(${alarm.id})\">\n                      \u524a\u9664\n                    <\/button>\n                  <\/td>\n                <\/tr>\n              `;\n            })\n            .join('');\n        }\n\n        startCheckingAlarms() {\n          setInterval(() => {\n            const now = new Date();\n            const currentTime = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;\n\n            this.alarms.forEach(alarm => {\n              if (alarm.time === currentTime && !alarm.done) {\n                this.triggerAlarm(alarm);\n                alarm.done = true;\n                this.save();\n                this.renderAlarms();\n              }\n            });\n          }, 1000);\n        }\n\n        startTimerDisplay() {\n          const updateTime = () => {\n            const now = new Date();\n            const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;\n            const timeEl = document.getElementById('alarm-current-time');\n            if (timeEl) {\n              timeEl.textContent = timeStr;\n            }\n          };\n          updateTime();\n          setInterval(updateTime, 1000);\n        }\n\n        async triggerAlarm(alarm) {\n          \/\/ 5\u79d2\u9593\u306e\u30c1\u30e3\u30a4\u30e0\u97f3\u3092\u518d\u751f\n          await this.playSchoolChime();\n\n          \/\/ \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u8868\u793a\n          const pcList = alarm.pcs.length > 10 \n            ? `PC${alarm.pcs.slice(0, 10).join(', PC')}... \u4ed6${alarm.pcs.length - 10}\u53f0`\n            : `PC${alarm.pcs.join(', PC')}`;\n          \n          document.getElementById('alarm-popup-time').textContent = alarm.time;\n          document.getElementById('alarm-popup-pcs').textContent = pcList;\n          \n          if (alarm.memo) {\n            document.getElementById('alarm-popup-memo-div').style.display = 'block';\n            document.getElementById('alarm-popup-memo').textContent = alarm.memo;\n          } else {\n            document.getElementById('alarm-popup-memo-div').style.display = 'none';\n          }\n\n          document.getElementById('alarm-popup').style.display = 'flex';\n          this.flashScreen();\n        }\n\n        flashScreen() {\n          const originalBg = document.body.style.backgroundColor;\n          for (let i = 0; i < 6; i++) {\n            setTimeout(() => {\n              document.body.style.backgroundColor = i % 2 === 0 ? '#ff6b6b' : originalBg;\n            }, i * 150);\n          }\n          setTimeout(() => {\n            document.body.style.backgroundColor = originalBg;\n          }, 900);\n        }\n\n        async playSchoolChime() {\n          try {\n            if (!this.audioContext) {\n              this.audioContext = new (window.AudioContext || window.webkitAudioContext)();\n            }\n\n            const audioContext = this.audioContext;\n\n            \/\/ \u5b66\u6821\u30c1\u30e3\u30a4\u30e0\u97f3\u306e\u5468\u6ce2\u6570\u30d1\u30bf\u30fc\u30f3\uff08\u30c9\u30df\u30bd\u30c9\u30df\uff09- 5\u56de\u306e\u97f3\n            const notes = [\n              { freq: 262, duration: 0.3 },   \/\/ \u30c9(C4)\n              { freq: 330, duration: 0.3 },   \/\/ \u30df(E4)\n              { freq: 392, duration: 0.6 },   \/\/ \u30bd(G4)\n              { freq: 523, duration: 0.4 },   \/\/ \u30c9(C5)\n              { freq: 659, duration: 0.5 }    \/\/ \u30df(E5)\n            ];\n\n            const totalDuration = 5;\n            let currentTime = audioContext.currentTime;\n            let elapsedTime = 0;\n\n            \/\/ 5\u79d2\u9593\u30eb\u30fc\u30d7\u3057\u3066\u518d\u751f\n            while (elapsedTime < totalDuration) {\n              for (const note of notes) {\n                if (elapsedTime + note.duration > totalDuration) {\n                  \/\/ \u6b8b\u308a\u6642\u9593\u306b\u5408\u308f\u305b\u3066\u8abf\u6574\n                  const remainingTime = totalDuration - elapsedTime;\n                  this.playNote(audioContext, note.freq, currentTime, Math.min(note.duration, remainingTime));\n                  elapsedTime = totalDuration;\n                  break;\n                }\n\n                this.playNote(audioContext, note.freq, currentTime, note.duration);\n                currentTime += note.duration;\n                elapsedTime += note.duration;\n              }\n            }\n          } catch (error) {\n            console.error('\u97f3\u58f0\u518d\u751f\u30a8\u30e9\u30fc:', error);\n          }\n        }\n\n        playNote(audioContext, frequency, startTime, duration) {\n          const oscillator = audioContext.createOscillator();\n          const gainNode = audioContext.createGain();\n\n          oscillator.connect(gainNode);\n          gainNode.connect(audioContext.destination);\n\n          oscillator.frequency.value = frequency;\n          oscillator.type = 'sine';\n\n          \/\/ \u97f3\u91cf\u306f\u3086\u3063\u304f\u308a\u7acb\u3061\u4e0a\u304c\u308a\u3001\u7d42\u4e86\u6642\u306b\u6e1b\u8870\n          gainNode.gain.setValueAtTime(0, startTime);\n          gainNode.gain.linearRampToValueAtTime(0.4, startTime + 0.05);\n          gainNode.gain.setValueAtTime(0.4, startTime + duration - 0.1);\n          gainNode.gain.exponentialRampToValueAtTime(0.01, startTime + duration);\n\n          oscillator.start(startTime);\n          oscillator.stop(startTime + duration);\n        }\n\n        showToast(message) {\n          const toast = document.createElement('div');\n          toast.className = 'alarm-toast';\n          toast.textContent = message;\n          document.body.appendChild(toast);\n          setTimeout(() => toast.remove(), 3000);\n        }\n\n        save() {\n          localStorage.setItem(this.storageKey, JSON.stringify(this.alarms));\n        }\n      }\n\n      \/\/ \u30b0\u30ed\u30fc\u30d0\u30eb\u306b\u30a2\u30af\u30bb\u30b9\u53ef\u80fd\u306b\n      window.wpAlarmManager = new WordPressAlarmManager();\n    })();\n  <\/script>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd14 PC\u30a2\u30e9\u30fc\u30e0\u7ba1\u7406 \u8907\u6570PC(1\uff5e45)\u306e\u30a2\u30e9\u30fc\u30e0\u4e00\u5143\u7ba1\u7406 \u5b9f\u884c\u4e2d &#8211;:&#8211; \u30a2\u30e9\u30fc\u30e0\u6642\u523b: PC\u756a\u53f7\uff08\u8907\u6570\u9078\u629e\u53ef\uff09: \u5168\u9078\u629e \u5168\u89e3\u9664 \u30e1\u30e2\uff08\u30aa\u30d7\u30b7\u30e7\u30f3\uff09: \u2705 \u30bb\u30c3\u30c8 \ud83d\uddd1\ufe0f \u30af\u30ea\u30a2 \u767b\u9332\u6e08\u307f\u30a2\u30e9 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/nk-ts.net\/?page_id=5525\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;\u30bb\u30f3\u30bf\u30fc\u7528&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5525","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nk-ts.net\/index.php?rest_route=\/wp\/v2\/pages\/5525","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nk-ts.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nk-ts.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nk-ts.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nk-ts.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5525"}],"version-history":[{"count":8,"href":"https:\/\/nk-ts.net\/index.php?rest_route=\/wp\/v2\/pages\/5525\/revisions"}],"predecessor-version":[{"id":5533,"href":"https:\/\/nk-ts.net\/index.php?rest_route=\/wp\/v2\/pages\/5525\/revisions\/5533"}],"wp:attachment":[{"href":"https:\/\/nk-ts.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}