✨ URLのクエリで検索ができる機能の追加

✨ URLの共有機能の追加
✨ 枠線を点滅させることで検索したときにわかりやすくする機能の追加
🐛 移動するときの位置バグを修正

script.js

@@ -20,21 +20,13 @@ function handleKeyPress(event) {
     if (event.key === 'Enter') {
         const searchTerm = document.getElementById('searchInput').value.toLowerCase();
         const contentItems = document.querySelectorAll('.content-item');
-        const headerHeight = document.querySelector('header').offsetHeight;
-
-        for (const item of contentItems) {
-            const tag = item.getAttribute('data-tag').toLowerCase();
-            if (tag === searchTerm) {
-                const itemPosition = item.getBoundingClientRect().top + window.scrollY - headerHeight - 20;
-                window.scrollTo({
-                    top: itemPosition,
-                    behavior: 'smooth'
-                });
-                return;
-            }
-        }
 
-        alert('該当するサービスが見つかりませんでした。');
+        // URLのqueryを更新
+        const newUrl = new URL(window.location);
+        newUrl.searchParams.set('search_query', searchTerm);
+        history.pushState(null, '', newUrl);
+
+        scrollToItem(searchTerm, contentItems);
     }
 }
 
@@ -89,3 +81,31 @@ function toggleFlowerMenu() {
         menuContent.style.display = 'none';
     }
 }
+
+function scrollToItem(searchTerm, contentItems) {
+    const lowerSearchTerm = searchTerm.toLowerCase();
+    for (const item of contentItems) {
+        const tag = item.getAttribute('data-tag').toLowerCase();
+        if (tag === lowerSearchTerm) {
+            const headerHeight = document.querySelector('header').offsetHeight;
+            const itemPosition = item.getBoundingClientRect().top + window.scrollY - headerHeight - 20;
+            window.scrollTo({ top: itemPosition, behavior: 'smooth' });
+
+            item.classList.add('flash-border');
+            setTimeout(() => item.classList.remove('flash-border'), 2000);
+
+            return;
+        }
+    }
+
+    alert('該当するサービスが見つかりませんでした。');
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const searchTerm = urlParams.get('search_query');
+    if (searchTerm) {
+        const contentItems = document.querySelectorAll('.content-item');
+        scrollToItem(searchTerm, contentItems);
+    }
+});

style.css

@@ -162,6 +162,24 @@ footer a {
     text-decoration: none;
 }
 
+/* 枠点滅 */
+@keyframes flash-border {
+    0% {
+        border-color: rgba(255, 0, 0, 0);
+    }
+    50% {
+        border-color: rgba(255, 0, 0, 1);
+        border-width: 3px;
+    }
+    100% {
+        border-color: rgba(255, 0, 0, 0);
+    }
+}
+
+.flash-border {
+    animation: flash-border 1s ease-in-out 2;
+}
+
 .notification {
     position: fixed;
     bottom: -50px;