Voogle.html - 長留裕平のブログ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Voogle</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
  <style>
    /* 全体の基本設定 */
    body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f7f7f7;
      color: #333;
      line-height: 1.6;
    }
    header {
      background: #003d66;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
      font-size: 2.5em;
    }
    nav {
      margin-top: 10px;
    }
    nav a {
      color: #fff;
      margin: 0 15px;
      text-decoration: none;
      font-size: 1em;
    }
    /* レイアウトコンテナ */
    .container {
      display: flex;
      max-width: 1200px;
      margin: 20px auto;
      padding: 0 20px;
    }
    /* サイドバー */
    .sidebar {
      flex: 0 0 250px;
      background: #fff;
      padding: 20px;
      margin-right: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      height: fit-content;
    }
    .sidebar h2 {
      font-size: 1.3em;
      margin-top: 0;
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
    }
    .sidebar section {
      margin-bottom: 20px;
    }
    .sidebar label {
      display: block;
      margin-bottom: 5px;
    }
    .sidebar input[type="date"],
    .sidebar select {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .sidebar .checkbox-group label {
      display: inline-block;
      margin-right: 10px;
      font-size: 0.9em;
    }
    .sidebar ul {
      list-style: none;
      padding-left: 0;
    }
    .sidebar li {
      padding: 5px 0;
      cursor: pointer;
      color: #005fa3;
    }
    .sidebar li:hover {
      text-decoration: underline;
    }
    /* メインコンテンツ */
    .main-content {
      flex: 1;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    /* 検索フォーム */
    .search-section {
      position: relative;
      margin-bottom: 20px;
    }
    .search-form {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .search-form input[type="text"] {
      flex: 1;
      padding: 12px;
      font-size: 1.1em;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
    }
    .search-form button {
      padding: 12px 20px;
      font-size: 1.1em;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #searchButton {
      background: #005fa3;
      color: #fff;
    }
    #searchButton:hover {
      background: #00407a;
    }
    /* オートサジェスト */
    .suggestions {
      list-style: none;
      margin: 0;
      padding: 0;
      position: absolute;
      width: calc(100% - 20px);
      background: #fff;
      border: 1px solid #ccc;
      border-top: none;
      z-index: 10;
      max-height: 200px;
      overflow-y: auto;
    }
    .suggestions li {
      padding: 8px 10px;
      cursor: pointer;
    }
    .suggestions li:hover {
      background: #f0f8ff;
    }
    /* ローディングスピナー */
    .spinner {
      display: none;
      margin: 20px auto;
      width: 50px;
      height: 50px;
      border: 6px solid rgba(0,0,0,0.1);
      border-top-color: #005fa3;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    /* 検索結果カード */
    .results {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }
    .result-item {
      background: #fafafa;
      border: 1px solid #eee;
      padding: 15px;
      border-radius: 8px;
      transition: box-shadow 0.2s;
    }
    .result-item:hover {
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .result-title {
      font-size: 1.2em;
      color: #005fa3;
      margin: 0 0 5px 0;
    }
    .result-title a {
      text-decoration: none;
      color: inherit;
    }
    .result-url {
      font-size: 0.85em;
      color: #888;
      margin-bottom: 8px;
      word-break: break-all;
    }
    .result-snippet {
      font-size: 0.95em;
      margin-bottom: 10px;
    }
    .result-meta {
      font-size: 0.8em;
      color: #666;
    }
    /* ページネーション */
    .pagination {
      text-align: center;
      margin: 30px 0;
    }
    .pagination a {
      margin: 0 5px;
      text-decoration: none;
      color: #005fa3;
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
    }
    .pagination a.active {
      background: #005fa3;
      color: #fff;
      border-color: #005fa3;
    }
    .pagination a:hover {
      background: #f0f8ff;
    }
    /* 「さらに読み込む」ボタン */
    .load-more {
      display: block;
      width: 200px;
      margin: 20px auto;
      padding: 12px;
      text-align: center;
      background: #005fa3;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .load-more:hover {
      background: #00407a;
    }
    /* フッター */
    footer {
      text-align: center;
      padding: 15px;
      font-size: 0.8em;
      color: #aaa;
      background: #f7f7f7;
      margin-top: 20px;
    }
    /* レスポンシブ対応 */
    @media (max-width: 800px) {
      .container {
        flex-direction: column;
      }
      .sidebar {
        margin-right: 0;
        margin-bottom: 20px;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Voogle検索エンジン</h1>
    <nav>
      <a href="#">ホーム</a>
      <a href="#">使い方</a>
      <a href="#">お問い合わせ</a>
    </nav>
  </header>

  <div class="container">
    <!-- サイドバー：フィルター・ソート・検索履歴 -->
    <aside class="sidebar">
      <section>
        <h2>フィルター</h2>
        <form id="filterForm">
          <label for="startDate">開始日:</label>
          <input type="date" id="startDate">
          <label for="endDate">終了日:</label>
          <input type="date" id="endDate">
          <label>コンテンツタイプ:</label>
          <div class="checkbox-group">
            <!-- Wikipedia検索結果用として追加 -->
            <label><input type="checkbox" name="contentType" value="wikipedia" checked> Wikipedia</label>
            <!-- 他の項目は将来的な拡張用 -->
            <label><input type="checkbox" name="contentType" value="news" checked> ニュース</label>
            <label><input type="checkbox" name="contentType" value="blog" checked> ブログ</label>
            <label><input type="checkbox" name="contentType" value="forum" checked> フォーラム</label>
          </div>
          <label for="sortOrder">ソート順:</label>
          <select id="sortOrder">
            <option value="relevance">関連順</option>
            <option value="date">新着順</option>
          </select>
          <button type="submit" style="margin-top:10px; padding:8px 12px; background:#005fa3; color:#fff; border:none; border-radius:4px; cursor:pointer;">適用</button>
        </form>
      </section>
      <section>
        <h2>検索履歴</h2>
        <ul id="searchHistory">
          <!-- 最近の検索キーワードを表示 -->
        </ul>
      </section>
    </aside>

    <!-- メインコンテンツ：検索フォーム＆結果 -->
    <main class="main-content">
      <div class="search-section">
        <form id="searchForm" class="search-form">
          <input type="text" id="searchInput" placeholder="検索キーワードを入力" autocomplete="off">
          <button type="submit" id="searchButton">検索</button>
        </form>
        <!-- オートサジェスト -->
        <ul id="suggestions" class="suggestions"></ul>
      </div>
      <!-- ローディングスピナー -->
      <div id="spinner" class="spinner"></div>
      <!-- 検索結果カード -->
      <div id="results" class="results">
        <!-- 結果はJavaScriptで動的レンダリング -->
      </div>
      <!-- ページネーション -->
      <div id="pagination" class="pagination"></div>
      <!-- Load More ボタン（ページネーションの代替） -->
      <button id="loadMore" class="load-more">さらに読み込む</button>
    </main>
  </div>

  <footer>
    &copy; 2025 Voogle. All rights reserved.
  </footer>

  <script>
    // --- オートサジェスト用のサンプル候補 ---
    const suggestionsData = [
      "JavaScript", "HTML", "CSS", "クローラー", "検索エンジン", "Web開発", "React", "Node.js", "Python", "データスクレイピング"
    ];

    const searchInput = document.getElementById('searchInput');
    const suggestionsList = document.getElementById('suggestions');

    searchInput.addEventListener('input', function() {
      const query = this.value.toLowerCase();
      suggestionsList.innerHTML = '';
      if(query.length === 0) return;
      const filtered = suggestionsData.filter(item => item.toLowerCase().includes(query));
      filtered.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        li.addEventListener('click', () => {
          searchInput.value = item;
          suggestionsList.innerHTML = '';
        });
        suggestionsList.appendChild(li);
      });
    });

    // --- 検索履歴管理 ---
    const searchHistoryEl = document.getElementById('searchHistory');
    function updateSearchHistory(query) {
      let history = JSON.parse(localStorage.getItem('searchHistory')) || [];
      if (!history.includes(query)) {
        history.unshift(query);
        if(history.length > 5) history.pop();
        localStorage.setItem('searchHistory', JSON.stringify(history));
        renderSearchHistory();
      }
    }
    function renderSearchHistory() {
      let history = JSON.parse(localStorage.getItem('searchHistory')) || [];
      searchHistoryEl.innerHTML = '';
      history.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        li.addEventListener('click', () => {
          searchInput.value = item;
          performSearch(item);
        });
        searchHistoryEl.appendChild(li);
      });
    }
    renderSearchHistory();

    // --- Wikipedia検索結果のレンダリング ---
    function renderResults(page, results) {
      const resultsContainer = document.getElementById('results');
      // 結果カードはすべて再レンダリング（Load Moreの場合は追記可能に変更も検討）
      resultsContainer.innerHTML = '';
      const startIndex = (page - 1) * resultsPerPage;
      const endIndex = startIndex + resultsPerPage;
      const pageResults = results.slice(startIndex, endIndex);
      if(pageResults.length === 0) {
        resultsContainer.innerHTML = '<p>該当する検索結果がありません。</p>';
        return;
      }
      pageResults.forEach(result => {
        const div = document.createElement('div');
        div.className = 'result-item';
        div.innerHTML = `
          <h2 class="result-title"><a href="${result.url}" target="_blank">${result.title}</a></h2>
          <div class="result-url">${result.url}</div>
          <p class="result-snippet">${result.snippet}</p>
          <div class="result-meta">投稿日: ${result.date} | タイプ: ${result.contentType}</div>
        `;
        resultsContainer.appendChild(div);
      });
    }

    // --- ページネーションのレンダリング ---
    function renderPagination(page, totalResults) {
      const paginationContainer = document.getElementById('pagination');
      paginationContainer.innerHTML = '';
      const totalPages = Math.ceil(totalResults / resultsPerPage);
      // 前へ
      const prev = document.createElement('a');
      prev.textContent = '«';
      prev.addEventListener('click', () => {
        if(page > 1) {
          currentPage--;
          renderResults(currentPage, filteredResults);
          renderPagination(currentPage, filteredResults.length);
        }
      });
      paginationContainer.appendChild(prev);
      // ページ番号
      for(let i = 1; i <= totalPages; i++) {
        const pageLink = document.createElement('a');
        pageLink.textContent = i;
        if(i === page) pageLink.classList.add('active');
        pageLink.addEventListener('click', () => {
          currentPage = i;
          renderResults(currentPage, filteredResults);
          renderPagination(currentPage, filteredResults.length);
        });
        paginationContainer.appendChild(pageLink);
      }
      // 次へ
      const next = document.createElement('a');
      next.textContent = '»';
      next.addEventListener('click', () => {
        if(page < totalPages) {
          currentPage++;
          renderResults(currentPage, filteredResults);
          renderPagination(currentPage, filteredResults.length);
        }
      });
      paginationContainer.appendChild(next);
    }

    // --- 定数・変数 ---
    let filteredResults = []; // Wikipedia APIから取得した結果を格納
    let currentPage = 1;
    const resultsPerPage = 10;
    const spinner = document.getElementById('spinner');

    // --- Wikipedia APIを利用した検索実行 ---
    const searchForm = document.getElementById('searchForm');
    searchForm.addEventListener('submit', function(e) {
      e.preventDefault();
      const query = searchInput.value.trim();
      performSearch(query);
    });
    function performSearch(query) {
      updateSearchHistory(query);
      spinner.style.display = 'block';
      // Wikipedia APIエンドポイント（origin=* を指定してクロスオリジン対応）
      const url = "https://ja.wikipedia.org/w/api.php?action=query&list=search&format=json&origin=*&srsearch=" + encodeURIComponent(query) + "&srlimit=20";
      fetch(url)
        .then(response => response.json())
        .then(data => {
          spinner.style.display = 'none';
          if (data.query && data.query.search && data.query.search.length > 0) {
            // APIから取得した各項目のtimestampを日付文字列に変換
            filteredResults = data.query.search.map(item => {
              return {
                title: item.title,
                snippet: item.snippet,
                url: "https://ja.wikipedia.org/?curid=" + item.pageid,
                date: new Date(item.timestamp).toISOString().split('T')[0],
                contentType: "wikipedia"
              };
            });
            currentPage = 1;
            renderResults(currentPage, filteredResults);
            renderPagination(currentPage, filteredResults.length);
          } else {
            document.getElementById('results').innerHTML = '<p>該当する検索結果がありません。</p>';
          }
        })
        .catch(error => {
          spinner.style.display = 'none';
          console.error('Error:', error);
          document.getElementById('results').innerHTML = '<p>検索結果の取得に失敗しました。</p>';
        });
    }

    // --- サイドバーのフィルター処理 ---
    const filterForm = document.getElementById('filterForm');
    filterForm.addEventListener('submit', function(e) {
      e.preventDefault();
      applySidebarFilters();
      currentPage = 1;
      renderResults(currentPage, filteredResults);
      renderPagination(currentPage, filteredResults.length);
    });
    function applySidebarFilters() {
      // フィルター設定の取得
      const startDate = document.getElementById('startDate').value;
      const endDate = document.getElementById('endDate').value;
      const sortOrder = document.getElementById('sortOrder').value;
      const checkboxes = document.querySelectorAll('input[name="contentType"]:checked');
      const types = Array.from(checkboxes).map(cb => cb.value);
      // 現在のfilteredResultsに対してさらにフィルタリング
      filteredResults = filteredResults.filter(result => {
        let valid = true;
        if(startDate && result.date < startDate) valid = false;
        if(endDate && result.date > endDate) valid = false;
        if(types.length && !types.includes(result.contentType)) valid = false;
        return valid;
      });
      // ソート処理：日付の降順（新着順）の場合
      if(sortOrder === "date") {
        filteredResults.sort((a,b) => new Date(b.date) - new Date(a.date));
      }
    }

    // --- Load More ボタン ---
    const loadMoreBtn = document.getElementById('loadMore');
    loadMoreBtn.addEventListener('click', () => {
      const totalPages = Math.ceil(filteredResults.length / resultsPerPage);
      if(currentPage < totalPages) {
        currentPage++;
        // 既存の結果に追記する方式
        const resultsContainer = document.getElementById('results');
        const startIndex = (currentPage - 1) * resultsPerPage;
        const endIndex = startIndex + resultsPerPage;
        const pageResults = filteredResults.slice(startIndex, endIndex);
        pageResults.forEach(result => {
          const div = document.createElement('div');
          div.className = 'result-item';
          div.innerHTML = `
            <h2 class="result-title"><a href="${result.url}" target="_blank">${result.title}</a></h2>
            <div class="result-url">${result.url}</div>
            <p class="result-snippet">${result.snippet}</p>
            <div class="result-meta">投稿日: ${result.date} | タイプ: ${result.contentType}</div>
          `;
          resultsContainer.appendChild(div);
        });
        renderPagination(currentPage, filteredResults.length);
      }
    });
  </script>
</body>
</html>
投稿者: chosuke

趣味はゲームやアニメや漫画などです chosuke のすべての投稿を表示
投稿者: chosuke

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル
