{"id":25871,"date":"2025-02-22T19:21:35","date_gmt":"2025-02-22T10:21:35","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25871"},"modified":"2025-02-22T19:21:36","modified_gmt":"2025-02-22T10:21:36","slug":"voogle-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25871","title":{"rendered":"Voogle.html"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Voogle<\/title>\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/8.0.1\/normalize.css\">\n  <style>\n    \/* \u5168\u4f53\u306e\u57fa\u672c\u8a2d\u5b9a *\/\n    body {\n      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n      margin: 0;\n      padding: 0;\n      background: #f7f7f7;\n      color: #333;\n      line-height: 1.6;\n    }\n    header {\n      background: #003d66;\n      color: #fff;\n      padding: 20px;\n      text-align: center;\n    }\n    header h1 {\n      margin: 0;\n      font-size: 2.5em;\n    }\n    nav {\n      margin-top: 10px;\n    }\n    nav a {\n      color: #fff;\n      margin: 0 15px;\n      text-decoration: none;\n      font-size: 1em;\n    }\n    \/* \u30ec\u30a4\u30a2\u30a6\u30c8\u30b3\u30f3\u30c6\u30ca *\/\n    .container {\n      display: flex;\n      max-width: 1200px;\n      margin: 20px auto;\n      padding: 0 20px;\n    }\n    \/* \u30b5\u30a4\u30c9\u30d0\u30fc *\/\n    .sidebar {\n      flex: 0 0 250px;\n      background: #fff;\n      padding: 20px;\n      margin-right: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n      height: fit-content;\n    }\n    .sidebar h2 {\n      font-size: 1.3em;\n      margin-top: 0;\n      border-bottom: 1px solid #eee;\n      padding-bottom: 5px;\n    }\n    .sidebar section {\n      margin-bottom: 20px;\n    }\n    .sidebar label {\n      display: block;\n      margin-bottom: 5px;\n    }\n    .sidebar input[type=\"date\"],\n    .sidebar select {\n      width: 100%;\n      padding: 8px;\n      margin-bottom: 10px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n    }\n    .sidebar .checkbox-group label {\n      display: inline-block;\n      margin-right: 10px;\n      font-size: 0.9em;\n    }\n    .sidebar ul {\n      list-style: none;\n      padding-left: 0;\n    }\n    .sidebar li {\n      padding: 5px 0;\n      cursor: pointer;\n      color: #005fa3;\n    }\n    .sidebar li:hover {\n      text-decoration: underline;\n    }\n    \/* \u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4 *\/\n    .main-content {\n      flex: 1;\n      background: #fff;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n    }\n    \/* \u691c\u7d22\u30d5\u30a9\u30fc\u30e0 *\/\n    .search-section {\n      position: relative;\n      margin-bottom: 20px;\n    }\n    .search-form {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n    }\n    .search-form input[type=\"text\"] {\n      flex: 1;\n      padding: 12px;\n      font-size: 1.1em;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      outline: none;\n    }\n    .search-form button {\n      padding: 12px 20px;\n      font-size: 1.1em;\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n    }\n    #searchButton {\n      background: #005fa3;\n      color: #fff;\n    }\n    #searchButton:hover {\n      background: #00407a;\n    }\n    \/* \u30aa\u30fc\u30c8\u30b5\u30b8\u30a7\u30b9\u30c8 *\/\n    .suggestions {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      position: absolute;\n      width: calc(100% - 20px);\n      background: #fff;\n      border: 1px solid #ccc;\n      border-top: none;\n      z-index: 10;\n      max-height: 200px;\n      overflow-y: auto;\n    }\n    .suggestions li {\n      padding: 8px 10px;\n      cursor: pointer;\n    }\n    .suggestions li:hover {\n      background: #f0f8ff;\n    }\n    \/* \u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30d4\u30ca\u30fc *\/\n    .spinner {\n      display: none;\n      margin: 20px auto;\n      width: 50px;\n      height: 50px;\n      border: 6px solid rgba(0,0,0,0.1);\n      border-top-color: #005fa3;\n      border-radius: 50%;\n      animation: spin 0.8s linear infinite;\n    }\n    @keyframes spin {\n      to { transform: rotate(360deg); }\n    }\n    \/* \u691c\u7d22\u7d50\u679c\u30ab\u30fc\u30c9 *\/\n    .results {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 20px;\n    }\n    .result-item {\n      background: #fafafa;\n      border: 1px solid #eee;\n      padding: 15px;\n      border-radius: 8px;\n      transition: box-shadow 0.2s;\n    }\n    .result-item:hover {\n      box-shadow: 0 2px 8px rgba(0,0,0,0.15);\n    }\n    .result-title {\n      font-size: 1.2em;\n      color: #005fa3;\n      margin: 0 0 5px 0;\n    }\n    .result-title a {\n      text-decoration: none;\n      color: inherit;\n    }\n    .result-url {\n      font-size: 0.85em;\n      color: #888;\n      margin-bottom: 8px;\n      word-break: break-all;\n    }\n    .result-snippet {\n      font-size: 0.95em;\n      margin-bottom: 10px;\n    }\n    .result-meta {\n      font-size: 0.8em;\n      color: #666;\n    }\n    \/* \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3 *\/\n    .pagination {\n      text-align: center;\n      margin: 30px 0;\n    }\n    .pagination a {\n      margin: 0 5px;\n      text-decoration: none;\n      color: #005fa3;\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      cursor: pointer;\n    }\n    .pagination a.active {\n      background: #005fa3;\n      color: #fff;\n      border-color: #005fa3;\n    }\n    .pagination a:hover {\n      background: #f0f8ff;\n    }\n    \/* \u300c\u3055\u3089\u306b\u8aad\u307f\u8fbc\u3080\u300d\u30dc\u30bf\u30f3 *\/\n    .load-more {\n      display: block;\n      width: 200px;\n      margin: 20px auto;\n      padding: 12px;\n      text-align: center;\n      background: #005fa3;\n      color: #fff;\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n    }\n    .load-more:hover {\n      background: #00407a;\n    }\n    \/* \u30d5\u30c3\u30bf\u30fc *\/\n    footer {\n      text-align: center;\n      padding: 15px;\n      font-size: 0.8em;\n      color: #aaa;\n      background: #f7f7f7;\n      margin-top: 20px;\n    }\n    \/* \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc *\/\n    @media (max-width: 800px) {\n      .container {\n        flex-direction: column;\n      }\n      .sidebar {\n        margin-right: 0;\n        margin-bottom: 20px;\n      }\n    }\n  <\/style>\n<\/head>\n<body>\n  <header>\n    <h1>Voogle\u691c\u7d22\u30a8\u30f3\u30b8\u30f3<\/h1>\n    <nav>\n      <a href=\"#\">\u30db\u30fc\u30e0<\/a>\n      <a href=\"#\">\u4f7f\u3044\u65b9<\/a>\n      <a href=\"#\">\u304a\u554f\u3044\u5408\u308f\u305b<\/a>\n    <\/nav>\n  <\/header>\n\n  <div class=\"container\">\n    <!-- \u30b5\u30a4\u30c9\u30d0\u30fc\uff1a\u30d5\u30a3\u30eb\u30bf\u30fc\u30fb\u30bd\u30fc\u30c8\u30fb\u691c\u7d22\u5c65\u6b74 -->\n    <aside class=\"sidebar\">\n      <section>\n        <h2>\u30d5\u30a3\u30eb\u30bf\u30fc<\/h2>\n        <form id=\"filterForm\">\n          <label for=\"startDate\">\u958b\u59cb\u65e5:<\/label>\n          <input type=\"date\" id=\"startDate\">\n          <label for=\"endDate\">\u7d42\u4e86\u65e5:<\/label>\n          <input type=\"date\" id=\"endDate\">\n          <label>\u30b3\u30f3\u30c6\u30f3\u30c4\u30bf\u30a4\u30d7:<\/label>\n          <div class=\"checkbox-group\">\n            <!-- Wikipedia\u691c\u7d22\u7d50\u679c\u7528\u3068\u3057\u3066\u8ffd\u52a0 -->\n            <label><input type=\"checkbox\" name=\"contentType\" value=\"wikipedia\" checked> Wikipedia<\/label>\n            <!-- \u4ed6\u306e\u9805\u76ee\u306f\u5c06\u6765\u7684\u306a\u62e1\u5f35\u7528 -->\n            <label><input type=\"checkbox\" name=\"contentType\" value=\"news\" checked> \u30cb\u30e5\u30fc\u30b9<\/label>\n            <label><input type=\"checkbox\" name=\"contentType\" value=\"blog\" checked> \u30d6\u30ed\u30b0<\/label>\n            <label><input type=\"checkbox\" name=\"contentType\" value=\"forum\" checked> \u30d5\u30a9\u30fc\u30e9\u30e0<\/label>\n          <\/div>\n          <label for=\"sortOrder\">\u30bd\u30fc\u30c8\u9806:<\/label>\n          <select id=\"sortOrder\">\n            <option value=\"relevance\">\u95a2\u9023\u9806<\/option>\n            <option value=\"date\">\u65b0\u7740\u9806<\/option>\n          <\/select>\n          <button type=\"submit\" style=\"margin-top:10px; padding:8px 12px; background:#005fa3; color:#fff; border:none; border-radius:4px; cursor:pointer;\">\u9069\u7528<\/button>\n        <\/form>\n      <\/section>\n      <section>\n        <h2>\u691c\u7d22\u5c65\u6b74<\/h2>\n        <ul id=\"searchHistory\">\n          <!-- \u6700\u8fd1\u306e\u691c\u7d22\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u8868\u793a -->\n        <\/ul>\n      <\/section>\n    <\/aside>\n\n    <!-- \u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4\uff1a\u691c\u7d22\u30d5\u30a9\u30fc\u30e0\uff06\u7d50\u679c -->\n    <main class=\"main-content\">\n      <div class=\"search-section\">\n        <form id=\"searchForm\" class=\"search-form\">\n          <input type=\"text\" id=\"searchInput\" placeholder=\"\u691c\u7d22\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u5165\u529b\" autocomplete=\"off\">\n          <button type=\"submit\" id=\"searchButton\">\u691c\u7d22<\/button>\n        <\/form>\n        <!-- \u30aa\u30fc\u30c8\u30b5\u30b8\u30a7\u30b9\u30c8 -->\n        <ul id=\"suggestions\" class=\"suggestions\"><\/ul>\n      <\/div>\n      <!-- \u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30d4\u30ca\u30fc -->\n      <div id=\"spinner\" class=\"spinner\"><\/div>\n      <!-- \u691c\u7d22\u7d50\u679c\u30ab\u30fc\u30c9 -->\n      <div id=\"results\" class=\"results\">\n        <!-- \u7d50\u679c\u306fJavaScript\u3067\u52d5\u7684\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0 -->\n      <\/div>\n      <!-- \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3 -->\n      <div id=\"pagination\" class=\"pagination\"><\/div>\n      <!-- Load More \u30dc\u30bf\u30f3\uff08\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306e\u4ee3\u66ff\uff09 -->\n      <button id=\"loadMore\" class=\"load-more\">\u3055\u3089\u306b\u8aad\u307f\u8fbc\u3080<\/button>\n    <\/main>\n  <\/div>\n\n  <footer>\n    &copy; 2025 Voogle. All rights reserved.\n  <\/footer>\n\n  <script>\n    \/\/ --- \u30aa\u30fc\u30c8\u30b5\u30b8\u30a7\u30b9\u30c8\u7528\u306e\u30b5\u30f3\u30d7\u30eb\u5019\u88dc ---\n    const suggestionsData = [\n      \"JavaScript\", \"HTML\", \"CSS\", \"\u30af\u30ed\u30fc\u30e9\u30fc\", \"\u691c\u7d22\u30a8\u30f3\u30b8\u30f3\", \"Web\u958b\u767a\", \"React\", \"Node.js\", \"Python\", \"\u30c7\u30fc\u30bf\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0\"\n    ];\n\n    const searchInput = document.getElementById('searchInput');\n    const suggestionsList = document.getElementById('suggestions');\n\n    searchInput.addEventListener('input', function() {\n      const query = this.value.toLowerCase();\n      suggestionsList.innerHTML = '';\n      if(query.length === 0) return;\n      const filtered = suggestionsData.filter(item => item.toLowerCase().includes(query));\n      filtered.forEach(item => {\n        const li = document.createElement('li');\n        li.textContent = item;\n        li.addEventListener('click', () => {\n          searchInput.value = item;\n          suggestionsList.innerHTML = '';\n        });\n        suggestionsList.appendChild(li);\n      });\n    });\n\n    \/\/ --- \u691c\u7d22\u5c65\u6b74\u7ba1\u7406 ---\n    const searchHistoryEl = document.getElementById('searchHistory');\n    function updateSearchHistory(query) {\n      let history = JSON.parse(localStorage.getItem('searchHistory')) || [];\n      if (!history.includes(query)) {\n        history.unshift(query);\n        if(history.length > 5) history.pop();\n        localStorage.setItem('searchHistory', JSON.stringify(history));\n        renderSearchHistory();\n      }\n    }\n    function renderSearchHistory() {\n      let history = JSON.parse(localStorage.getItem('searchHistory')) || [];\n      searchHistoryEl.innerHTML = '';\n      history.forEach(item => {\n        const li = document.createElement('li');\n        li.textContent = item;\n        li.addEventListener('click', () => {\n          searchInput.value = item;\n          performSearch(item);\n        });\n        searchHistoryEl.appendChild(li);\n      });\n    }\n    renderSearchHistory();\n\n    \/\/ --- Wikipedia\u691c\u7d22\u7d50\u679c\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0 ---\n    function renderResults(page, results) {\n      const resultsContainer = document.getElementById('results');\n      \/\/ \u7d50\u679c\u30ab\u30fc\u30c9\u306f\u3059\u3079\u3066\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\uff08Load More\u306e\u5834\u5408\u306f\u8ffd\u8a18\u53ef\u80fd\u306b\u5909\u66f4\u3082\u691c\u8a0e\uff09\n      resultsContainer.innerHTML = '';\n      const startIndex = (page - 1) * resultsPerPage;\n      const endIndex = startIndex + resultsPerPage;\n      const pageResults = results.slice(startIndex, endIndex);\n      if(pageResults.length === 0) {\n        resultsContainer.innerHTML = '<p>\u8a72\u5f53\u3059\u308b\u691c\u7d22\u7d50\u679c\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>';\n        return;\n      }\n      pageResults.forEach(result => {\n        const div = document.createElement('div');\n        div.className = 'result-item';\n        div.innerHTML = `\n          <h2 class=\"result-title\"><a href=\"${result.url}\" target=\"_blank\">${result.title}<\/a><\/h2>\n          <div class=\"result-url\">${result.url}<\/div>\n          <p class=\"result-snippet\">${result.snippet}<\/p>\n          <div class=\"result-meta\">\u6295\u7a3f\u65e5: ${result.date} | \u30bf\u30a4\u30d7: ${result.contentType}<\/div>\n        `;\n        resultsContainer.appendChild(div);\n      });\n    }\n\n    \/\/ --- \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0 ---\n    function renderPagination(page, totalResults) {\n      const paginationContainer = document.getElementById('pagination');\n      paginationContainer.innerHTML = '';\n      const totalPages = Math.ceil(totalResults \/ resultsPerPage);\n      \/\/ \u524d\u3078\n      const prev = document.createElement('a');\n      prev.textContent = '\u00ab';\n      prev.addEventListener('click', () => {\n        if(page > 1) {\n          currentPage--;\n          renderResults(currentPage, filteredResults);\n          renderPagination(currentPage, filteredResults.length);\n        }\n      });\n      paginationContainer.appendChild(prev);\n      \/\/ \u30da\u30fc\u30b8\u756a\u53f7\n      for(let i = 1; i <= totalPages; i++) {\n        const pageLink = document.createElement('a');\n        pageLink.textContent = i;\n        if(i === page) pageLink.classList.add('active');\n        pageLink.addEventListener('click', () => {\n          currentPage = i;\n          renderResults(currentPage, filteredResults);\n          renderPagination(currentPage, filteredResults.length);\n        });\n        paginationContainer.appendChild(pageLink);\n      }\n      \/\/ \u6b21\u3078\n      const next = document.createElement('a');\n      next.textContent = '\u00bb';\n      next.addEventListener('click', () => {\n        if(page < totalPages) {\n          currentPage++;\n          renderResults(currentPage, filteredResults);\n          renderPagination(currentPage, filteredResults.length);\n        }\n      });\n      paginationContainer.appendChild(next);\n    }\n\n    \/\/ --- \u5b9a\u6570\u30fb\u5909\u6570 ---\n    let filteredResults = []; \/\/ Wikipedia API\u304b\u3089\u53d6\u5f97\u3057\u305f\u7d50\u679c\u3092\u683c\u7d0d\n    let currentPage = 1;\n    const resultsPerPage = 10;\n    const spinner = document.getElementById('spinner');\n\n    \/\/ --- Wikipedia API\u3092\u5229\u7528\u3057\u305f\u691c\u7d22\u5b9f\u884c ---\n    const searchForm = document.getElementById('searchForm');\n    searchForm.addEventListener('submit', function(e) {\n      e.preventDefault();\n      const query = searchInput.value.trim();\n      performSearch(query);\n    });\n    function performSearch(query) {\n      updateSearchHistory(query);\n      spinner.style.display = 'block';\n      \/\/ Wikipedia API\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\uff08origin=* \u3092\u6307\u5b9a\u3057\u3066\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5bfe\u5fdc\uff09\n      const url = \"https:\/\/ja.wikipedia.org\/w\/api.php?action=query&list=search&format=json&origin=*&srsearch=\" + encodeURIComponent(query) + \"&srlimit=20\";\n      fetch(url)\n        .then(response => response.json())\n        .then(data => {\n          spinner.style.display = 'none';\n          if (data.query && data.query.search && data.query.search.length > 0) {\n            \/\/ API\u304b\u3089\u53d6\u5f97\u3057\u305f\u5404\u9805\u76ee\u306etimestamp\u3092\u65e5\u4ed8\u6587\u5b57\u5217\u306b\u5909\u63db\n            filteredResults = data.query.search.map(item => {\n              return {\n                title: item.title,\n                snippet: item.snippet,\n                url: \"https:\/\/ja.wikipedia.org\/?curid=\" + item.pageid,\n                date: new Date(item.timestamp).toISOString().split('T')[0],\n                contentType: \"wikipedia\"\n              };\n            });\n            currentPage = 1;\n            renderResults(currentPage, filteredResults);\n            renderPagination(currentPage, filteredResults.length);\n          } else {\n            document.getElementById('results').innerHTML = '<p>\u8a72\u5f53\u3059\u308b\u691c\u7d22\u7d50\u679c\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>';\n          }\n        })\n        .catch(error => {\n          spinner.style.display = 'none';\n          console.error('Error:', error);\n          document.getElementById('results').innerHTML = '<p>\u691c\u7d22\u7d50\u679c\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002<\/p>';\n        });\n    }\n\n    \/\/ --- \u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u30d5\u30a3\u30eb\u30bf\u30fc\u51e6\u7406 ---\n    const filterForm = document.getElementById('filterForm');\n    filterForm.addEventListener('submit', function(e) {\n      e.preventDefault();\n      applySidebarFilters();\n      currentPage = 1;\n      renderResults(currentPage, filteredResults);\n      renderPagination(currentPage, filteredResults.length);\n    });\n    function applySidebarFilters() {\n      \/\/ \u30d5\u30a3\u30eb\u30bf\u30fc\u8a2d\u5b9a\u306e\u53d6\u5f97\n      const startDate = document.getElementById('startDate').value;\n      const endDate = document.getElementById('endDate').value;\n      const sortOrder = document.getElementById('sortOrder').value;\n      const checkboxes = document.querySelectorAll('input[name=\"contentType\"]:checked');\n      const types = Array.from(checkboxes).map(cb => cb.value);\n      \/\/ \u73fe\u5728\u306efilteredResults\u306b\u5bfe\u3057\u3066\u3055\u3089\u306b\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\n      filteredResults = filteredResults.filter(result => {\n        let valid = true;\n        if(startDate && result.date < startDate) valid = false;\n        if(endDate && result.date > endDate) valid = false;\n        if(types.length && !types.includes(result.contentType)) valid = false;\n        return valid;\n      });\n      \/\/ \u30bd\u30fc\u30c8\u51e6\u7406\uff1a\u65e5\u4ed8\u306e\u964d\u9806\uff08\u65b0\u7740\u9806\uff09\u306e\u5834\u5408\n      if(sortOrder === \"date\") {\n        filteredResults.sort((a,b) => new Date(b.date) - new Date(a.date));\n      }\n    }\n\n    \/\/ --- Load More \u30dc\u30bf\u30f3 ---\n    const loadMoreBtn = document.getElementById('loadMore');\n    loadMoreBtn.addEventListener('click', () => {\n      const totalPages = Math.ceil(filteredResults.length \/ resultsPerPage);\n      if(currentPage < totalPages) {\n        currentPage++;\n        \/\/ \u65e2\u5b58\u306e\u7d50\u679c\u306b\u8ffd\u8a18\u3059\u308b\u65b9\u5f0f\n        const resultsContainer = document.getElementById('results');\n        const startIndex = (currentPage - 1) * resultsPerPage;\n        const endIndex = startIndex + resultsPerPage;\n        const pageResults = filteredResults.slice(startIndex, endIndex);\n        pageResults.forEach(result => {\n          const div = document.createElement('div');\n          div.className = 'result-item';\n          div.innerHTML = `\n            <h2 class=\"result-title\"><a href=\"${result.url}\" target=\"_blank\">${result.title}<\/a><\/h2>\n            <div class=\"result-url\">${result.url}<\/div>\n            <p class=\"result-snippet\">${result.snippet}<\/p>\n            <div class=\"result-meta\">\u6295\u7a3f\u65e5: ${result.date} | \u30bf\u30a4\u30d7: ${result.contentType}<\/div>\n          `;\n          resultsContainer.appendChild(div);\n        });\n        renderPagination(currentPage, filteredResults.length);\n      }\n    });\n  <\/script>\n<\/body>\n<\/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":[3],"class_list":["post-25871","post","type-post","status-publish","format-standard","hentry","category-html","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25871","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=25871"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25871\/revisions"}],"predecessor-version":[{"id":25872,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25871\/revisions\/25872"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25871"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}