Update index.html

index.html

@@ -2235,108 +2235,113 @@
                 tempoInput.value = isTMode ? 66 : 92;
                 tempoInput.dispatchEvent(new Event('input'));
             });
-            document.addEventListener('DOMContentLoaded', function() {
-                    // URLパラメータをチェック
-                    const urlParams = new URLSearchParams(window.location.search);
-                    const isTMode = urlParams.has('mode') && urlParams.get('mode') === 't';
-            
-                    // タイムマーカーデータ
-                    const timeMarkers = isTMode ? [
-                            { label: '①[1番]', time: 15.2 },
-                            { label: '②[1番]', time: 43.8 },
-                            { label: '①[2番]', time: 79.0 },
-                            { label: '②[2番]', time: 108.0 },
-                            { label: '③', time: 137.25 },
-                            { label: '④', time: 162.55 },
-                            { label: '⑤', time: 191.65 }
-                    ] : [
-                            { label: 'A', time: 8.35 },
-                            { label: 'B', time: 72.1 },
-                            { label: 'C', time: 98.67 },
-                            { label: 'D', time: 155.83 },
-                            { label: 'E', time: 192.55 }
-                    ];
-            
-                    // タイムマーカーを表示
-                    const timeMarkersContainer = document.getElementById('time-markers-container');
-            
-                    timeMarkers.forEach(marker => {
-                            const markerElement = document.createElement('div');
-                            markerElement.className = 'time-marker';
-                            markerElement.innerHTML = `<b>${marker.label}</b>(${marker.time}秒)`;
-                            markerElement.dataset.time = marker.time;
-            
-                            // ドラッグ開始
-                            markerElement.addEventListener('dragstart', function(e) {
-                                    e.dataTransfer.setData('text/plain', marker.time);
-                                    this.classList.add('dragging');
-                            });
-            
-                            // ドラッグ終了
-                            markerElement.addEventListener('dragend', function() {
-                                    this.classList.remove('dragging');
-                            });
-            
-                            // ドラッグ可能に設定
-                            markerElement.draggable = true;
-            
-                            // クリックで開始時間に設定
-                            markerElement.addEventListener('click', function() {
-                                    document.getElementById('start-time').value = marker.time;
-                                    updateProgressMarkers();
-                            });
-            
-                            timeMarkersContainer.appendChild(markerElement);
-                    });
-            
-                    // ドロップターゲットの設定
-                    const startTimeInput = document.getElementById('start-time');
-                    const endTimeInput = document.getElementById('end-time');
-            
-                    [startTimeInput, endTimeInput].forEach(input => {
-                            // ドラッグオーバー
-                            input.addEventListener('dragover', function(e) {
-                                    e.preventDefault();
-                                    this.style.backgroundColor = 'rgba(100, 255, 218, 0.2)';
-                            });
-            
-                            // ドラッグリーブ
-                            input.addEventListener('dragleave', function() {
-                                    this.style.backgroundColor = '';
-                            });
-            
-                            // ドロップ
-                            input.addEventListener('drop', function(e) {
-                                    e.preventDefault();
-                                    this.style.backgroundColor = '';
-            
-                                    const time = parseFloat(e.dataTransfer.getData('text/plain'));
-                                    if (!isNaN(time)) {
-                                            this.value = time;
-                                            updateProgressMarkers();
-                                    }
-                            });
-                    });
-            
-                    // 入力ボックスの変更時にマーカーを更新
-                    startTimeInput.addEventListener('input', updateProgressMarkers);
-                    endTimeInput.addEventListener('input', updateProgressMarkers);
-            
-                    // 既存のupdateProgressMarkers関数を再利用
-                    function updateProgressMarkers() {
-                            const duration = video.duration || videoDuration;
-                            const startTime = parseFloat(startTimeInput.value) || 0;
-                            const endTime = parseFloat(endTimeInput.value) || duration;
-            
-                            if (duration > 0) {
-                                    startMarker.style.left = `${(startTime / duration) * 100}%`;
-                                    endMarker.style.left = `${(endTime / duration) * 100}%`;
-            
-                                    startMarker.style.display = 'block';
-                                    endMarker.style.display = 'block';
-                            }
+            // タイムマーカー関連のコードを修正
+document.addEventListener('DOMContentLoaded', function() {
+    // まず必要なDOM要素を取得
+    const startMarker = document.getElementById('start-marker');
+    const endMarker = document.getElementById('end-marker');
+    const video = document.getElementById('video');
+    const startTimeInput = document.getElementById('start-time');
+    const endTimeInput = document.getElementById('end-time');
+
+    // URLパラメータをチェック
+    const urlParams = new URLSearchParams(window.location.search);
+    const isTMode = urlParams.has('mode') && urlParams.get('mode') === 't';
+
+    // タイムマーカーデータ
+    const timeMarkers = isTMode ? [
+            { label: '①[1番]', time: 15.2 },
+            { label: '②[1番]', time: 43.8 },
+            { label: '①[2番]', time: 79.0 },
+            { label: '②[2番]', time: 108.0 },
+            { label: '③', time: 137.25 },
+            { label: '④', time: 162.55 },
+            { label: '⑤', time: 191.65 }
+    ] : [
+            { label: 'A', time: 8.35 },
+            { label: 'B', time: 72.1 },
+            { label: 'C', time: 98.67 },
+            { label: 'D', time: 155.83 },
+            { label: 'E', time: 192.55 }
+    ];
+
+    // タイムマーカーを表示
+    const timeMarkersContainer = document.getElementById('time-markers-container');
+
+    timeMarkers.forEach(marker => {
+            const markerElement = document.createElement('div');
+            markerElement.className = 'time-marker';
+            markerElement.innerHTML = `<b>${marker.label}</b>(${marker.time}秒)`;
+            markerElement.dataset.time = marker.time;
+
+            // ドラッグ開始
+            markerElement.addEventListener('dragstart', function(e) {
+                    e.dataTransfer.setData('text/plain', marker.time);
+                    this.classList.add('dragging');
+            });
+
+            // ドラッグ終了
+            markerElement.addEventListener('dragend', function() {
+                    this.classList.remove('dragging');
+            });
+
+            // ドラッグ可能に設定
+            markerElement.draggable = true;
+
+            // クリックで開始時間に設定
+            markerElement.addEventListener('click', function() {
+                    startTimeInput.value = marker.time;
+                    updateProgressMarkers();
+            });
+
+            timeMarkersContainer.appendChild(markerElement);
+    });
+
+    // ドロップターゲットの設定
+    [startTimeInput, endTimeInput].forEach(input => {
+            // ドラッグオーバー
+            input.addEventListener('dragover', function(e) {
+                    e.preventDefault();
+                    this.style.backgroundColor = 'rgba(100, 255, 218, 0.2)';
+            });
+
+            // ドラッグリーブ
+            input.addEventListener('dragleave', function() {
+                    this.style.backgroundColor = '';
+            });
+
+            // ドロップ
+            input.addEventListener('drop', function(e) {
+                    e.preventDefault();
+                    this.style.backgroundColor = '';
+
+                    const time = parseFloat(e.dataTransfer.getData('text/plain'));
+                    if (!isNaN(time)) {
+                            this.value = time;
+                            updateProgressMarkers();
                     }
             });
+    });
+
+    // 入力ボックスの変更時にマーカーを更新
+    startTimeInput.addEventListener('input', updateProgressMarkers);
+    endTimeInput.addEventListener('input', updateProgressMarkers);
+
+    // updateProgressMarkers関数
+    function updateProgressMarkers() {
+            const duration = video.duration || 0;
+            const startTime = parseFloat(startTimeInput.value) || 0;
+            const endTime = parseFloat(endTimeInput.value) || duration;
+
+            if (duration > 0) {
+                    if(startMarker) startMarker.style.left = `${(startTime / duration) * 100}%`;
+                    if(endMarker) endMarker.style.left = `${(endTime / duration) * 100}%`;
+
+                    if(startMarker) startMarker.style.display = 'block';
+                    if(endMarker) endMarker.style.display = 'block';
+            }
+    }
+});
             
         </script>
     </body>