{"id":25484,"date":"2024-09-05T07:57:50","date_gmt":"2024-09-04T22:57:50","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25484"},"modified":"2024-09-05T07:57:52","modified_gmt":"2024-09-04T22:57:52","slug":"%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af%e3%82%b5%e3%82%a4%e3%83%88-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25484","title":{"rendered":"\u30d6\u30c3\u30af\u30de\u30fc\u30af\u30b5\u30a4\u30c8.html"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"ja\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>\u30d6\u30c3\u30af\u30de\u30fc\u30af\u30b5\u30a4\u30c8&lt;\/title>\n    &lt;style>\n        :root {\n            --bg-color: #f4f4f9;\n            --text-color: #000;\n            --link-color: #007bff;\n            --btn-bg-color: #007bff;\n            --btn-hover-color: #0056b3;\n            --delete-btn-bg-color: #dc3545;\n            --delete-btn-hover-color: #c82333;\n        }\n\n        &#91;data-theme=\"dark\"] {\n            --bg-color: #2e2e2e;\n            --text-color: #fff;\n            --link-color: #66b2ff;\n            --btn-bg-color: #0056b3;\n            --btn-hover-color: #007bff;\n            --delete-btn-bg-color: #c82333;\n            --delete-btn-hover-color: #dc3545;\n        }\n\n        body {\n            font-family: Arial, sans-serif;\n            margin: 20px;\n            padding: 0;\n            background-color: var(--bg-color);\n            color: var(--text-color);\n            transition: background-color 0.3s, color 0.3s;\n        }\n        .container {\n            max-width: 800px;\n            margin: auto;\n            padding: 20px;\n            background: #fff;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n            border-radius: 8px;\n            background-color: var(--bg-color);\n            color: var(--text-color);\n            transition: background-color 0.3s, color 0.3s;\n        }\n        .bookmark-form {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n            margin-bottom: 20px;\n        }\n        .bookmark-form input, .bookmark-form select {\n            padding: 10px;\n            font-size: 16px;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n            background-color: var(--bg-color);\n            color: var(--text-color);\n        }\n        .bookmark-form button {\n            padding: 10px;\n            font-size: 16px;\n            background-color: var(--btn-bg-color);\n            color: white;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n        }\n        .bookmark-form button:hover {\n            background-color: var(--btn-hover-color);\n        }\n        .bookmark-list {\n            list-style-type: none;\n            padding: 0;\n        }\n        .bookmark-item {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin: 10px 0;\n            padding: 10px;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n            background-color: #fafafa;\n            background-color: var(--bg-color);\n            color: var(--text-color);\n        }\n        .bookmark-item a {\n            text-decoration: none;\n            color: var(--link-color);\n        }\n        .bookmark-item button {\n            padding: 5px 10px;\n            font-size: 14px;\n            background-color: var(--delete-btn-bg-color);\n            color: white;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n        }\n        .bookmark-item button:hover {\n            background-color: var(--delete-btn-hover-color);\n        }\n        .controls {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 20px;\n        }\n    &lt;\/style>\n&lt;\/head>\n&lt;body data-theme=\"light\">\n\n    &lt;div class=\"container\">\n        &lt;h1>\u30d6\u30c3\u30af\u30de\u30fc\u30af\u30b5\u30a4\u30c8&lt;\/h1>\n        \n        &lt;div class=\"controls\">\n            &lt;input type=\"text\" id=\"search-bar\" placeholder=\"\u30d6\u30c3\u30af\u30de\u30fc\u30af\u3092\u691c\u7d22\" oninput=\"filterBookmarks()\">\n            &lt;select id=\"category-filter\" onchange=\"filterByCategory()\">\n                &lt;option value=\"all\">\u3059\u3079\u3066\u306e\u30ab\u30c6\u30b4\u30ea\u30fc&lt;\/option>\n            &lt;\/select>\n            &lt;button onclick=\"toggleTheme()\">\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5207\u308a\u66ff\u3048&lt;\/button>\n        &lt;\/div>\n\n        &lt;div class=\"bookmark-form\">\n            &lt;input type=\"text\" id=\"bookmark-title\" placeholder=\"\u30bf\u30a4\u30c8\u30eb\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\" required>\n            &lt;input type=\"url\" id=\"bookmark-url\" placeholder=\"URL\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\" required>\n            &lt;input type=\"text\" id=\"bookmark-category\" placeholder=\"\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\">\n            &lt;button onclick=\"addBookmark()\">\u30d6\u30c3\u30af\u30de\u30fc\u30af\u3092\u8ffd\u52a0&lt;\/button>\n        &lt;\/div>\n\n        &lt;ul id=\"bookmark-list\" class=\"bookmark-list\">&lt;\/ul>\n    &lt;\/div>\n\n    &lt;script>\n        document.addEventListener('DOMContentLoaded', loadBookmarks);\n\n        function loadBookmarks() {\n            const bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || &#91;];\n            const categories = new Set();\n            bookmarks.forEach(bookmark => {\n                renderBookmark(bookmark);\n                categories.add(bookmark.category);\n            });\n            updateCategoryFilter(Array.from(categories));\n        }\n\n        function addBookmark() {\n            const titleInput = document.getElementById('bookmark-title');\n            const urlInput = document.getElementById('bookmark-url');\n            const categoryInput = document.getElementById('bookmark-category');\n            const title = titleInput.value.trim();\n            const url = urlInput.value.trim();\n            const category = categoryInput.value.trim();\n\n            if (title === '' || url === '') {\n                alert('\u30bf\u30a4\u30c8\u30eb\u3068URL\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n                return;\n            }\n\n            const bookmark = { title, url, category };\n            saveBookmark(bookmark);\n            renderBookmark(bookmark);\n\n            titleInput.value = '';\n            urlInput.value = '';\n            categoryInput.value = '';\n\n            updateCategoryFilter(&#91;category]);\n        }\n\n        function saveBookmark(bookmark) {\n            const bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || &#91;];\n            bookmarks.push(bookmark);\n            localStorage.setItem('bookmarks', JSON.stringify(bookmarks));\n        }\n\n        function renderBookmark(bookmark) {\n            const bookmarkList = document.getElementById('bookmark-list');\n            const listItem = document.createElement('li');\n            listItem.className = 'bookmark-item';\n\n            listItem.innerHTML = `\n                &lt;span>${bookmark.title} (${bookmark.category})&lt;\/span>\n                &lt;div>\n                    &lt;a href=\"${bookmark.url}\" target=\"_blank\">\u8a2a\u554f&lt;\/a>\n                    &lt;button onclick=\"editBookmark('${bookmark.url}')\">\u7de8\u96c6&lt;\/button>\n                    &lt;button onclick=\"deleteBookmark('${bookmark.url}')\">\u524a\u9664&lt;\/button>\n                &lt;\/div>\n            `;\n\n            bookmarkList.appendChild(listItem);\n        }\n\n        function deleteBookmark(url) {\n            let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || &#91;];\n            bookmarks = bookmarks.filter(bookmark => bookmark.url !== url);\n            localStorage.setItem('bookmarks', JSON.stringify(bookmarks));\n            refreshBookmarkList();\n        }\n\n        function editBookmark(url) {\n            let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || &#91;];\n            const bookmark = bookmarks.find(bookmark => bookmark.url === url);\n            if (bookmark) {\n                document.getElementById('bookmark-title').value = bookmark.title;\n                document.getElementById('bookmark-url').value = bookmark.url;\n                document.getElementById('bookmark-category').value = bookmark.category;\n                deleteBookmark(url);  \/\/ \u7de8\u96c6\u306e\u305f\u3081\u306b\u4e00\u65e6\u524a\u9664\n            }\n        }\n\n        function refreshBookmarkList() {\n            const bookmarkList = document.getElementById('bookmark-list');\n            bookmarkList.innerHTML = '';\n            loadBookmarks();\n        }\n\n        function filterBookmarks() {\n            const query = document.getElementById('search-bar').value.toLowerCase();\n            const bookmarkItems = document.querySelectorAll('.bookmark-item');\n            bookmarkItems.forEach(item => {\n                const title = item.querySelector('span').innerText.toLowerCase();\n                item.style.display = title.includes(query) ? 'flex' : 'none';\n            });\n        }\n\n        function filterByCategory() {\n            const category = document.getElementById('category-filter').value;\n            const bookmarkItems = document.querySelectorAll('.bookmark-item');\n            bookmarkItems.forEach(item => {\n                const itemCategory = item.querySelector('span').innerText.split(' (')&#91;1].slice(0, -1);\n                item.style.display = (category === 'all' || itemCategory === category) ? 'flex' : 'none';\n            });\n        }\n\n        function updateCategoryFilter(categories) {\n            const filter = document.getElementById('category-filter');\n            categories.forEach(category => {\n                if (!&#91;...filter.options].some(option => option.value === category)) {\n                    const option = document.createElement('option');\n                    option.value = category;\n                    option.textContent = category;\n                    filter.appendChild(option);\n                }\n            });\n        }\n\n        function toggleTheme() {\n            const body = document.body;\n            const currentTheme = body.getAttribute('data-theme');\n            const newTheme = currentTheme === 'light' ? 'dark' : 'light';\n            body.setAttribute('data-theme', newTheme);\n        }\n    &lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[4],"tags":[42,3],"class_list":["post-25484","post","type-post","status-publish","format-standard","hentry","category-programming","tag-html","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25484"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25484\/revisions"}],"predecessor-version":[{"id":25485,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25484\/revisions\/25485"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25484"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}