{"id":25754,"date":"2024-12-22T20:39:14","date_gmt":"2024-12-22T11:39:14","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25754"},"modified":"2024-12-22T20:39:16","modified_gmt":"2024-12-22T11:39:16","slug":"%e5%9c%b0%e9%9c%87%e6%83%85%e5%a0%b1%e3%82%b5%e3%82%a4%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25754","title":{"rendered":"\u5730\u9707\u60c5\u5831\u30b5\u30a4\u30c8"},"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>\u5730\u9707\u60c5\u5831 - \u5b8c\u5168\u7248&lt;\/title>\n    &lt;style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n            background-color: var(--bg-color, #ffffff);\n            color: var(--text-color, #000000);\n            transition: background-color 0.3s, color 0.3s;\n        }\n        .container {\n            max-width: 1200px;\n            margin: 20px auto;\n            padding: 20px;\n            background: var(--card-bg, #ffffff);\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n        }\n        h1 {\n            text-align: center;\n        }\n        #map {\n            height: 400px;\n            margin-top: 20px;\n        }\n        .toggle-dark-mode {\n            position: fixed;\n            top: 10px;\n            right: 10px;\n            padding: 10px;\n            background: #007BFF;\n            color: white;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n        }\n        @media (max-width: 768px) {\n            .container {\n                padding: 10px;\n            }\n        }\n    &lt;\/style>\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\">&lt;\/script>\n&lt;\/head>\n&lt;body>\n    &lt;button class=\"toggle-dark-mode\" onclick=\"toggleDarkMode()\">\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5207\u308a\u66ff\u3048&lt;\/button>\n    &lt;div class=\"container\">\n        &lt;h1>\u5730\u9707\u60c5\u5831&lt;\/h1>\n        &lt;div id=\"quakeStats\">\n            &lt;canvas id=\"intensityChart\" width=\"400\" height=\"200\">&lt;\/canvas>\n        &lt;\/div>\n        &lt;div id=\"map\">&lt;\/div>\n        &lt;div id=\"regionData\">&lt;\/div>\n    &lt;\/div>\n\n    &lt;script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\">&lt;\/script>\n    &lt;script>\n        const rssUrl = 'https:\/\/www.jma.go.jp\/bosai\/quake\/data\/list.xml';\n        let quakeData = &#91;];\n        const regions = {};\n\n        const map = L.map('map').setView(&#91;35.6895, 139.6917], 5);\n        L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n            attribution: '\u00a9 OpenStreetMap contributors'\n        }).addTo(map);\n\n        async function fetchEarthquakeData() {\n            try {\n                const response = await fetch(`https:\/\/api.allorigins.win\/get?url=${encodeURIComponent(rssUrl)}`);\n                const data = await response.json();\n                const parser = new DOMParser();\n                const xmlDoc = parser.parseFromString(data.contents, \"text\/xml\");\n\n                const items = xmlDoc.getElementsByTagName('item');\n                quakeData = &#91;];\n\n                for (let i = 0; i &lt; items.length; i++) {\n                    const title = items&#91;i].getElementsByTagName('title')&#91;0].textContent;\n                    const description = items&#91;i].getElementsByTagName('description')&#91;0].textContent;\n                    const pubDate = items&#91;i].getElementsByTagName('pubDate')&#91;0].textContent;\n\n                    const match = description.match(\/\u9707\u6e90\u5730:(.+?)\u3001\u7def\u5ea6:(.+?)\u3001\u7d4c\u5ea6:(.+?)\u3001\u9707\u5ea6:(.+?)\u3001\/);\n                    if (match) {\n                        const location = match&#91;1];\n                        const lat = parseFloat(match&#91;2]);\n                        const lng = parseFloat(match&#91;3]);\n                        const intensity = parseFloat(match&#91;4]);\n\n                        quakeData.push({ title, location, lat, lng, intensity, pubDate });\n                        if (!regions&#91;location]) {\n                            regions&#91;location] = &#91;];\n                        }\n                        regions&#91;location].push({ intensity, pubDate });\n                    }\n                }\n\n                displayQuakeData();\n                updateChart();\n            } catch (error) {\n                console.error('\u5730\u9707\u60c5\u5831\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f:', error);\n            }\n        }\n\n        function displayQuakeData() {\n            map.eachLayer(layer => {\n                if (layer.options &amp;&amp; layer.options.pane === \"markerPane\") {\n                    map.removeLayer(layer);\n                }\n            });\n\n            quakeData.forEach(quake => {\n                L.circle(&#91;quake.lat, quake.lng], {\n                    color: 'red',\n                    fillColor: '#f03',\n                    fillOpacity: 0.5,\n                    radius: quake.intensity * 10000\n                }).addTo(map)\n                .bindPopup(`&lt;strong>${quake.title}&lt;\/strong>&lt;br>\u9707\u6e90\u5730: ${quake.location}&lt;br>\u9707\u5ea6: ${quake.intensity}`);\n            });\n        }\n\n        function updateChart() {\n            const ctx = document.getElementById('intensityChart').getContext('2d');\n            const labels = quakeData.map(q => q.pubDate);\n            const intensities = quakeData.map(q => q.intensity);\n\n            new Chart(ctx, {\n                type: 'line',\n                data: {\n                    labels: labels,\n                    datasets: &#91;{\n                        label: '\u9707\u5ea6',\n                        data: intensities,\n                        borderColor: 'rgba(255, 99, 132, 1)',\n                        borderWidth: 2,\n                        fill: false\n                    }]\n                }\n            });\n        }\n\n        function toggleDarkMode() {\n            const isDarkMode = document.body.style.getPropertyValue('--bg-color') === '#ffffff';\n            document.body.style.setProperty('--bg-color', isDarkMode ? '#333333' : '#ffffff');\n            document.body.style.setProperty('--text-color', isDarkMode ? '#ffffff' : '#000000');\n            document.body.style.setProperty('--card-bg', isDarkMode ? '#444444' : '#ffffff');\n        }\n\n        fetchEarthquakeData();\n        setInterval(fetchEarthquakeData, 60000); \/\/ 1\u5206\u3054\u3068\u306b\u66f4\u65b0\n    &lt;\/script>\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":[103,7],"tags":[],"class_list":["post-25754","post","type-post","status-publish","format-standard","hentry","category-html5","category-webdev"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25754","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=25754"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25754\/revisions"}],"predecessor-version":[{"id":25755,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25754\/revisions\/25755"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25754"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}