{"id":26046,"date":"2025-06-03T06:47:25","date_gmt":"2025-06-02T21:47:25","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26046"},"modified":"2025-06-03T06:47:26","modified_gmt":"2025-06-02T21:47:26","slug":"rssreader-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26046","title":{"rendered":"RSSreader.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;title>\u8d85RSS\u30cb\u30e5\u30fc\u30b9\u30ea\u30fc\u30c0\u30fc&lt;\/title>\n  &lt;style>\n    body {\n      font-family: \"Segoe UI\", sans-serif;\n      background: #f4f4f4;\n      margin: 0;\n      padding: 20px;\n    }\n    h1 {\n      text-align: center;\n      color: #222;\n    }\n    #search {\n      display: block;\n      margin: 10px auto;\n      padding: 10px;\n      width: 80%;\n      font-size: 16px;\n      border-radius: 8px;\n      border: 1px solid #ccc;\n    }\n    #feeds {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      gap: 20px;\n    }\n    .feed-card {\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n      width: 320px;\n      padding: 12px;\n      box-sizing: border-box;\n    }\n    .feed-card img {\n      width: 100%;\n      height: auto;\n      border-radius: 8px;\n      margin-bottom: 10px;\n    }\n    .feed-card h2 {\n      font-size: 16px;\n      margin: 0 0 5px;\n    }\n    .feed-card p {\n      font-size: 14px;\n      color: #555;\n    }\n    .feed-card time {\n      display: block;\n      font-size: 12px;\n      color: #999;\n      margin-top: 5px;\n    }\n  &lt;\/style>\n&lt;\/head>\n&lt;body>\n  &lt;h1>\u8d85RSS\u30cb\u30e5\u30fc\u30b9\u30ea\u30fc\u30c0\u30fc&lt;\/h1>\n  &lt;input type=\"text\" id=\"search\" placeholder=\"\u8a18\u4e8b\u3092\u691c\u7d22...\">\n\n  &lt;div id=\"feeds\">&lt;\/div>\n\n  &lt;script>\n    const rssUrls = &#91;\n      \"https:\/\/news.yahoo.co.jp\/rss\/topics\/top-picks.xml\",\n      \"https:\/\/b.hatena.ne.jp\/hotentry\/it.rss\",\n      \"https:\/\/www.nhk.or.jp\/rss\/news\/cat0.xml\",\n      \"http:\/\/tyosuke20xx.com\/rss\"\n    ];\n    const proxy = \"https:\/\/api.allorigins.win\/get?url=\";\n    const feedsContainer = document.getElementById(\"feeds\");\n    const searchInput = document.getElementById(\"search\");\n\n    let allCards = &#91;];\n\n    function formatDate(pubDateStr) {\n      const date = new Date(pubDateStr);\n      return isNaN(date) ? \"\" : `${date.getFullYear()}\u5e74${date.getMonth() + 1}\u6708${date.getDate()}\u65e5 ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;\n    }\n\n    function extractImageFromDescription(desc) {\n      const match = desc.match(\/&lt;img.*?src=\"(.*?)\"\/);\n      return match ? match&#91;1] : null;\n    }\n\n    async function fetchAndDisplayFeeds() {\n      feedsContainer.innerHTML = \"\ud83d\udd04 \u66f4\u65b0\u4e2d\u2026\";\n      allCards = &#91;];\n\n      for (const url of rssUrls) {\n        try {\n          const res = await fetch(proxy + encodeURIComponent(url));\n          const data = await res.json();\n          const parser = new DOMParser();\n          const xml = parser.parseFromString(data.contents, \"text\/xml\");\n          const items = xml.querySelectorAll(\"item\");\n\n          items.forEach((item, i) => {\n            if (i >= 5) return;\n\n            const title = item.querySelector(\"title\")?.textContent || \"\";\n            const link = item.querySelector(\"link\")?.textContent || \"#\";\n            const desc = item.querySelector(\"description\")?.textContent || \"\";\n            const pubDate = item.querySelector(\"pubDate\")?.textContent || \"\";\n            const dateFormatted = formatDate(pubDate);\n            const img = extractImageFromDescription(desc);\n\n            const card = document.createElement(\"div\");\n            card.className = \"feed-card\";\n            card.innerHTML = `\n              ${img ? `&lt;img src=\"${img}\" alt=\"thumbnail\">` : \"\"}\n              &lt;h2>&lt;a href=\"${link}\" target=\"_blank\">${title}&lt;\/a>&lt;\/h2>\n              &lt;p>${desc.replace(\/&lt;&#91;^>]+>\/g, '').slice(0, 100)}...&lt;\/p>\n              &lt;time>${dateFormatted}&lt;\/time>\n            `;\n            allCards.push({ title, desc, element: card });\n            feedsContainer.appendChild(card);\n          });\n        } catch (e) {\n          console.error(\"RSS\u53d6\u5f97\u5931\u6557:\", url, e);\n        }\n      }\n    }\n\n    searchInput.addEventListener(\"input\", () => {\n      const keyword = searchInput.value.toLowerCase();\n      feedsContainer.innerHTML = \"\";\n      allCards.forEach(({ title, desc, element }) => {\n        if (title.toLowerCase().includes(keyword) || desc.toLowerCase().includes(keyword)) {\n          feedsContainer.appendChild(element);\n        }\n      });\n    });\n\n    fetchAndDisplayFeeds();\n    setInterval(fetchAndDisplayFeeds, 60000); \/\/ 60\u79d2\u3054\u3068\u81ea\u52d5\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":[80],"tags":[],"class_list":["post-26046","post","type-post","status-publish","format-standard","hentry","category-html"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26046","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=26046"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26046\/revisions"}],"predecessor-version":[{"id":26047,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26046\/revisions\/26047"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26046"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}