<!DOCTYPE html>\r\n<html lang="ja">\r\n<head>\r\n <meta charset="UTF-8">\r\n <title>Javascript\u30c1\u30a7\u30c3\u30af<\/title>\r\n <style>\r\n body { font-family: sans-serif; margin: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }\r\n \/* \u30bf\u30d6\u30a8\u30ea\u30a2 *\/\r\n #tabs { display: flex; background: #2c3e50; padding: 5px 5px 0 5px; gap: 2px; overflow-x: auto; }\r\n .tab { padding: 10px 18px; color: #ecf0f1; background: #34495e; cursor: pointer; border-radius: 4px 4px 0 0; white-space: nowrap; }\r\n .tab.active { background: #fff; color: #2c3e50; font-weight: bold; }\r\n \r\n \/* \u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4\u30a8\u30ea\u30a2 *\/\r\n #main { display: flex; flex: 1; overflow: hidden; }\r\n \r\n \/* \u5de6\u5074\u30ab\u30e9\u30e0\u69cb\u9020 *\/\r\n #leftcolumn { width: 250px; background: #f8f9fa; border-right: 1px solid #dee2e6; display: flex; flex-direction: column; }\r\n \r\n \/* \u5b66\u751f\u5207\u308a\u66ff\u3048\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc *\/\r\n #student_controller { padding: 10px; background: #fff; border-bottom: 1px solid #dee2e6; display: flex; gap: 6px; }\r\n .nav-btn { flex: 1; padding: 8px 4px; text-align: center; background: #34495e; color: #fff; font-size: 12px; font-weight: bold; border-radius: 4px; cursor: pointer; user-select: none; white-space: nowrap; }\r\n .nav-btn:hover { background: #2c3e50; }\r\n .nav-btn.disabled { background: #ced4da; color: #6c757d; cursor: not-allowed; }\r\n \r\n \/* Excel\u30b3\u30d4\u30fc\u5c02\u7528\u30dc\u30bf\u30f3\u306e\u500b\u5225\u30b9\u30bf\u30a4\u30eb *\/\r\n #copy_list_btn { background: #217346; color: #fff; } \/* Excel\u3092\u30a4\u30e1\u30fc\u30b8\u3057\u305f\u30b0\u30ea\u30fc\u30f3 *\/\r\n #copy_list_btn:hover { background: #154a2d; }\r\n #copy_list_btn.success { background: #28a745; } \/* \u30b3\u30d4\u30fc\u6210\u529f\u6642\u306e\u30a8\u30d5\u30a7\u30af\u30c8 *\/\r\n \r\n \/* \u5de6\u5074\uff1a\u5b66\u7c4d\u756a\u53f7\u30ea\u30b9\u30c8 *\/\r\n #sidebar { flex: 1; overflow-y: auto; padding: 10px; }\r\n .student-item { padding: 8px; margin-bottom: 6px; background: #fff; cursor: pointer; border: 1px solid #ced4da; border-radius: 4px; position: relative; }\r\n .student-item:hover { background: #e9ecef; }\r\n .student-item.active { background: #0078d7; color: #fff; }\r\n \r\n \/* \u4e0d\u6b63\u7591\u60d1\u306e\u8b66\u544a\u30b9\u30bf\u30a4\u30eb *\/\r\n .student-item.alert { border: 2px solid #dc3545; background: #fff5f5; }\r\n .student-item.alert:hover { background: #ffe3e3; }\r\n .student-item.active.alert { background: #dc3545; color: #fff; }\r\n .badge { display: inline-block; background: #dc3545; color: white; padding: 2px 6px; font-size: 11px; border-radius: 3px; font-weight: bold; margin-top: 3px; }\r\n .active .badge { background: white; color: #dc3545; }\r\n \r\n \/* \u53f3\u5074\uff1a\u5168\u4f53\u8868\u793a\u30a8\u30ea\u30a2 *\/\r\n #viewer-container { flex: 1; display: flex; flex-direction: column; background: #fff; }\r\n #file-info { padding: 12px; background: #f1f3f5; border-bottom: 1px solid #dee2e6; font-size: 14px; line-height: 1.4; color: #333; }\r\n \r\n \/* \u5de6\u53f3\u5206\u5272\u7528\u306e\u30d3\u30e5\u30fc\u30a8\u30ea\u30a2 *\/\r\n #view-area { flex: 1; display: flex; overflow: hidden; background: #fdfdfd; }\r\n \r\n \/* \u30d3\u30e5\u30fc\u30a8\u30ea\u30a2\u5de6\uff08\u30d7\u30ec\u30d3\u30e5\u30fc\u8868\u793a\u5074\uff09 *\/\r\n .view-left { flex: 1; width: 50%; border-right: 2px solid #dee2e6; display: flex; justify-content: center; align-items: center; overflow: auto; background: #fff; }\r\n #viewer { border: none; width: 100%; height: 100%; }\r\n #img-viewer { max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: auto; }\r\n \r\n \/* \u30d3\u30e5\u30fc\u30a8\u30ea\u30a2\u53f3\uff08\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u8868\u793a\u5074\uff09 *\/\r\n .view-right { flex: 1; width: 50%; display: flex; flex-direction: column; background: #fff; overflow: hidden; }\r\n .code-header { background: #2c3e50; color: #fff; padding: 8px 12px; font-size: 12px; font-weight: bold; }\r\n #viewer-source { border: none; width: 100%; flex: 1; background: #fafafa; }\r\n .no-code-message { padding: 20px; color: #777; font-style: italic; text-align: center; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id="tabs"><\/div>\r\n<div id="main">\r\n <div id="leftcolumn">\r\n <div id="student_controller">\r\n <div id="prev_btn" class="nav-btn disabled" onclick="navigateStudent(-1)">\u524d\u3078<\/div>\r\n <div id="next_btn" class="nav-btn disabled" onclick="navigateStudent(1)">\u6b21\u3078<\/div>\r\n <div id="copy_list_btn" class="nav-btn" onclick="copyStudentIdsToClipboard()">\u540d\u7c3f\u30b3\u30d4\u30fc<\/div>\r\n <\/div>\r\n <div id="sidebar">\u2190 \u5de6\u4e0a\u306e\u30bf\u30d6\u304b\u3089\u56de\u6570\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/div>\r\n <\/div>\r\n <div id="viewer-container">\r\n <div id="file-info">\u5b66\u751f\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3059\u308b\u3068\u3001\u3053\u3053\u306b\u4e2d\u8eab\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/div>\r\n \r\n <div id="view-area">\r\n <div class="view-left">\r\n <iframe id="viewer" style="display:none;"><\/iframe>\r\n <img id="img-viewer" style="display:none;">\r\n <\/div>\r\n \r\n <div class="view-right">\r\n <div class="code-header">\ud83d\udcc1 \u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\uff08\u30d7\u30ec\u30fc\u30f3\u30c6\u30ad\u30b9\u30c8\u8868\u793a\uff09<\/div>\r\n <iframe id="viewer-source" style="display:none;"><\/iframe>\r\n <div id="source-fallback" class="no-code-message">\u5b66\u751f\u3092\u9078\u629e\u3059\u308b\u3068\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u304c\u3053\u3053\u306b\u8868\u793a\u3055\u308c\u307e\u3059<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst totalData = {};\r\nconst hashMap = {};\r\nconst existingFolders = [];\r\nlet currentStudentList = [];\r\nlet currentStudentIndex = -1;\r\n\r\nfunction registerList(listData) {\r\n if (!Array.isArray(listData) || listData.length === 0) return;\r\n\r\n const firstPath = listData[0][0].replace(\/^\\.\\\/\/, '');\r\n const folder = firstPath.split('\/')[0];\r\n\r\n if (!totalData[folder]) {\r\n totalData[folder] = [];\r\n existingFolders.push(folder);\r\n }\r\n\r\n listData.forEach(item => {\r\n const path = item[0];\r\n const hash = item[1];\r\n if (!path) return;\r\n\r\n const cleanPath = path.replace(\/^\\.\\\/\/, '');\r\n const parts = cleanPath.split('\/');\r\n const filename = parts[1];\r\n const id = filename.substring(0, 7); \/\/ \u5b66\u7c4d\u756a\u53f7\r\n\r\n const studentObj = { id: id, filename: filename, fullpath: cleanPath, hash: hash, isCopy: false, copyWith: [] };\r\n totalData[folder].push(studentObj);\r\n\r\n if (!hashMap[hash]) {\r\n hashMap[hash] = [];\r\n }\r\n hashMap[hash].push(studentObj);\r\n });\r\n}\r\n\r\nfor (let i = 1; i <= 15; i++) {\r\n const num = String(i).padStart(2, '0');\r\n const script = document.createElement('script');\r\n script.src = `list${num}.js`;\r\n script.onerror = () => { };\r\n document.head.appendChild(script);\r\n}\r\n\r\nwindow.addEventListener('load', () => {\r\n setTimeout(initializeSystem, 500);\r\n});\r\n\r\nfunction initializeSystem() {\r\n Object.keys(hashMap).forEach(hash => {\r\n const list = hashMap[hash];\r\n if (list.length > 1) {\r\n list.forEach(target => {\r\n target.isCopy = true;\r\n list.forEach(other => {\r\n if (target.fullpath !== other.fullpath) {\r\n target.copyWith.push(other.fullpath);\r\n }\r\n });\r\n });\r\n }\r\n });\r\n\r\n existingFolders.sort();\r\n\r\n const tabsContainer = document.getElementById('tabs');\r\n tabsContainer.innerHTML = ''; \r\n \r\n if (existingFolders.length === 0) {\r\n tabsContainer.innerHTML = '<div style="color:white; padding:10px;">listxx.js \u30d5\u30a1\u30a4\u30eb\u304c\u4e00\u3064\u3082\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002<\/div>';\r\n return;\r\n }\r\n\r\n existingFolders.forEach(folder => {\r\n const tab = document.createElement('div');\r\n tab.className = 'tab';\r\n tab.innerText = `${folder}\u56de (${totalData[folder].length}\u4ef6)`;\r\n tab.id = `tab_${folder}`;\r\n tab.onclick = () => selectTab(folder, tab);\r\n tabsContainer.appendChild(tab);\r\n });\r\n\r\n if (existingFolders.length > 0) {\r\n const latestFolder = existingFolders[existingFolders.length - 1];\r\n const latestTabEl = document.getElementById(`tab_${latestFolder}`);\r\n if (latestTabEl) latestTabEl.click();\r\n }\r\n}\r\n\r\nfunction selectTab(folder, tabEl) {\r\n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\r\n tabEl.classList.add('active');\r\n\r\n const sidebar = document.getElementById('sidebar');\r\n sidebar.innerHTML = '';\r\n\r\n \/\/ \u2605\u3053\u3053\u3067\u5b66\u7c4d\u756a\u53f7\u9806\u306b\u30bd\u30fc\u30c8\u3055\u308c\u3066\u3044\u307e\u3059\r\n totalData[folder].sort((a, b) => a.id.localeCompare(b.id));\r\n \r\n currentStudentList = totalData[folder];\r\n currentStudentIndex = -1;\r\n updateControllerButtons();\r\n\r\n currentStudentList.forEach((student, index) => {\r\n const item = document.createElement('div');\r\n item.className = 'student-item';\r\n item.id = `student_item_${index}`;\r\n \r\n const ext = student.filename.split('.').pop();\r\n item.innerHTML = `<div><strong>${student.id}<\/strong> <small style="color:#666;">(${ext})<\/small><\/div>`;\r\n \r\n if (student.isCopy) {\r\n item.classList.add('alert');\r\n item.innerHTML += `<span class="badge">\u26a0\ufe0f\u30b3\u30d4\u30da\u7591\u60d1 (${student.copyWith.length}\u4ef6\u3068\u4e00\u81f4)<\/span>`;\r\n }\r\n\r\n item.onclick = () => selectStudent(student, index);\r\n sidebar.appendChild(item);\r\n });\r\n}\r\n\r\nfunction selectStudent(student, index) {\r\n currentStudentIndex = index;\r\n \r\n document.querySelectorAll('.student-item').forEach(i => i.classList.remove('active'));\r\n const activeItem = document.getElementById(`student_item_${index}`);\r\n if (activeItem) {\r\n activeItem.classList.add('active');\r\n activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n }\r\n\r\n updateControllerButtons();\r\n\r\n let infoHtml = `<strong>\u30d5\u30a1\u30a4\u30eb\u30d1\u30b9:<\/strong> ${student.fullpath}<br><strong>MD5\u30cf\u30c3\u30b7\u30e5:<\/strong> <code>${student.hash}<\/code>`;\r\n if (student.isCopy) {\r\n infoHtml += `<br><span style="color:#dc3545; font-weight:bold;">\u26a0\ufe0f\u4e0d\u6b63\u691c\u51fa\uff08\u5185\u5bb9\u304c\u4ee5\u4e0b\u306e\u30d5\u30a1\u30a4\u30eb\u3068\u5b8c\u5168\u4e00\u81f4\u3057\u3066\u3044\u307e\u3059\uff09:<\/span><br><small style="color:#dc3545;">${student.copyWith.join('<br>')}<\/small>`;\r\n }\r\n document.getElementById('file-info').innerHTML = infoHtml;\r\n\r\n const iframe = document.getElementById('viewer');\r\n const img = document.getElementById('img-viewer');\r\n const iframeSource = document.getElementById('viewer-source');\r\n const sourceFallback = document.getElementById('source-fallback');\r\n const ext = student.filename.split('.').pop().toLowerCase();\r\n\r\n iframe.style.display = 'none';\r\n img.style.display = 'none';\r\n iframeSource.style.display = 'none';\r\n sourceFallback.style.display = 'none';\r\n iframe.src = 'about:blank';\r\n iframeSource.src = 'about:blank';\r\n\r\n if (['png', 'jpg', 'jpeg', 'gif'].includes(ext)) {\r\n img.src = student.fullpath;\r\n img.style.display = 'block';\r\n sourceFallback.textContent = '\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u306e\u305f\u3081\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306f\u3042\u308a\u307e\u305b\u3093';\r\n sourceFallback.style.display = 'block';\r\n } else if (['html', 'htm', 'txt', 'js'].includes(ext)) {\r\n iframe.src = student.fullpath;\r\n iframe.style.display = 'block';\r\n \r\n iframeSource.src = student.fullpath + '.txt';\r\n iframeSource.style.display = 'block';\r\n } else {\r\n iframe.style.display = 'block';\r\n sourceFallback.innerHTML = `\u76f4\u63a5\u5c55\u958b\u3067\u304d\u306a\u3044\u5f62\u5f0f\uff08.${ext}\uff09\u3067\u3059\u3002`;\r\n sourceFallback.style.display = 'block';\r\n }\r\n}\r\n\r\nfunction navigateStudent(direction) {\r\n const nextIndex = currentStudentIndex + direction;\r\n if (nextIndex >= 0 && nextIndex < currentStudentList.length) {\r\n selectStudent(currentStudentList[nextIndex], nextIndex);\r\n }\r\n}\r\n\r\nfunction updateControllerButtons() {\r\n const prevBtn = document.getElementById('prev_btn');\r\n const nextBtn = document.getElementById('next_btn');\r\n\r\n if (currentStudentIndex > 0) {\r\n prevBtn.classList.remove('disabled');\r\n } else {\r\n prevBtn.classList.add('disabled');\r\n }\r\n\r\n if (currentStudentIndex >= 0 && currentStudentIndex < currentStudentList.length - 1) {\r\n nextBtn.classList.remove('disabled');\r\n } else {\r\n nextBtn.classList.add('disabled');\r\n }\r\n}\r\n\r\n\/\/ \u2605\u3010\u65b0\u898f\u6a5f\u80fd\u3011\u5b66\u7c4d\u756a\u53f7\u4e00\u89a7\u3092\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u4e00\u62ec\u30b3\u30d4\u30fc\u3059\u308b\u95a2\u6570\r\nfunction copyStudentIdsToClipboard() {\r\n if (currentStudentList.length === 0) {\r\n alert("\u30b3\u30d4\u30fc\u3059\u308b\u5b66\u751f\u30c7\u30fc\u30bf\u304c\u3042\u308a\u307e\u305b\u3093\u3002\u30bf\u30d6\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002");\r\n return;\r\n }\r\n\r\n \/\/ \u5b66\u7c4d\u756a\u53f7\u3060\u3051\u3092\u53d6\u308a\u51fa\u3057\u3066\u6539\u884c\uff08\\n\uff09\u3067\u9023\u7d50\r\n const idListText = currentStudentList.map(student => student.id).join("\\n");\r\n\r\n \/\/ \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u66f8\u304d\u8fbc\u307f\r\n navigator.clipboard.writeText(idListText).then(() => {\r\n const btn = document.getElementById('copy_list_btn');\r\n const originalText = btn.innerText;\r\n \r\n \/\/ \u6210\u529f\u3057\u305f\u3053\u3068\u304c\u8996\u899a\u7684\u306b\u308f\u304b\u308b\u3088\u3046\u306b1.5\u79d2\u9593\u30dc\u30bf\u30f3\u5909\u5316\r\n btn.innerText = "\u30b3\u30d4\u30fc\u5b8c\u4e86\uff01";\r\n btn.classList.add('success');\r\n \r\n setTimeout(() => {\r\n btn.innerText = originalText;\r\n btn.classList.remove('success');\r\n }, 1500);\r\n }).catch(err => {\r\n alert("\u30b3\u30d4\u30fc\u306b\u5931\u6557\u3057\u307e\u3057\u305f: " + err);\r\n });\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/h4>\n
![](\"\/labo\/suzuki\/wp-content\/uploads\/2649\/SS-fullpage.png\")
<\/p>\n
\u5b9f\u969b\u306e\u3082\u306e<\/h4>\n