Update marker.html

marker.html

@@ -92,70 +92,57 @@
 
 <script>
 let number = 60;  // 画像の数
-
 let imagesLoaded = 0;  // 読み込まれた画像の数
 
 for (let i = 1; i <= number; i++) {
-    // 新しいdiv要素を作成
     let imageBox = document.createElement('div');
     imageBox.className = 'image-box';
 
-    // 画像要素を作成
     let img = document.createElement('img');
-    img.src = location.origin + "/marker/" + i + ".png";  // 画像のパスを動的に設定
+    img.src = location.origin + "/marker/" + i + ".png";
     img.alt = "画像";
 
-    // 画像の読み込み完了イベントを設定
     img.onload = function() {
         imagesLoaded++;
         if (imagesLoaded === number) {
-            // 全ての画像が読み込まれたらローディング画面をフェードアウトさせる
             setTimeout(function() {
                 document.getElementById('loading').classList.add('hidden');
-            }, 500);  // 少し遅らせてからフェードアウト開始
+            }, 500);
         }
     };
 
-    // divに画像を追加
-    imageBox.appendChild(img);
-    document.body.appendChild(imageBox);  // 画像をbodyに追加
-}
+    // ダウンロードリンクを作成（ループ内に配置）
+    let downloadLink = document.createElement('a');
+    downloadLink.href = img.src;  // 画像のURLを直接指定
+    downloadLink.download = 'marker_' + i + '.png';
+    downloadLink.className = 'download-button';
+    downloadLink.textContent = 'ダウンロード';
+
+    // コピーリンクボタンを作成（ループ内に配置）
+    let copyButton = document.createElement('button');
+    copyButton.className = 'copy-button';
+    copyButton.textContent = 'URLをコピー';
+    
+    copyButton.onclick = function() {
+        navigator.clipboard.writeText(img.src).then(function() {
+            alert('URLがコピーされました: \n' + img.src);
+        }).catch(function(err) {
+            alert('コピーに失敗しました: ' + err);
+        });
+    };
 
-        
-
-        // ダウンロードリンクを作成
-        let downloadLink = document.createElement('a');
-        downloadLink.href = location.origin + "/marker/" + i + ".png";
-        downloadLink.download = '';
-        downloadLink.className = 'download-button';
-        downloadLink.textContent = 'ダウンロード';
-
-        // コピーリンクボタンを作成
-        let copyButton = document.createElement('button');
-        copyButton.className = 'copy-button';
-        copyButton.textContent = 'URLをコピー';
-        
-        // コピーボタンのクリックイベント
-        copyButton.onclick = function() {
-            const imageUrl = location.origin + "/marker/" + i + ".png";
-            navigator.clipboard.writeText(imageUrl).then(function() {
-                alert('URLがコピーされました: \n' + imageUrl);
-            }, function(err) {
-                alert('コピーに失敗しました: ', err);
-            });
-        };
-
-        // divに画像、ダウンロードボタン、コピーリンクを追加
-        imageBox.appendChild(img);
-        imageBox.appendChild(document.createElement('br'));
-        imageBox.appendChild(downloadLink);
-        imageBox.appendChild(document.createElement('br'));
-        imageBox.appendChild(copyButton);
-
-        // bodyにdivを追加
-        document.body.appendChild(imageBox);
+    // 各要素を `imageBox` に追加
+    imageBox.appendChild(img);
+    imageBox.appendChild(document.createElement('br'));
+    imageBox.appendChild(downloadLink);
+    imageBox.appendChild(document.createElement('br'));
+    imageBox.appendChild(copyButton);
 
+    // `body` に `imageBox` を追加
+    document.body.appendChild(imageBox);
+}
 </script>
 
+
 </body>
 </html>