グーグル検索の履歴は検索するときに参考にしたい
過去に何を検索したか忘れることが多い。
検索した内容が履歴として、すぐに確認できれば検索が楽になる！
そんなことを思いChatGPTに検索履歴を表示できるGoogle検索風サイトを生成してもらった！
ChatGPTに生成してもらう前に、構成は事前に考えていたりいなかったり(・∀・)
構成図
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google検索風サイト</title>
<style>
/* 全体のレイアウト */
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
/* ロゴ風タイトル */
.logo {
font-size: 48px;
color: #4285f4;
font-weight: bold;
margin-bottom: 20px;
}
.logo span:nth-child(2) { color: #ea4335; }
.logo span:nth-child(3) { color: #fbbc05; }
.logo span:nth-child(4) { color: #4285f4; }
.logo span:nth-child(5) { color: #34a853; }
/* 検索ボックス */
.search-box {
width: 90%;
max-width: 500px;
display: flex;
border: 1px solid #dcdcdc;
border-radius: 24px;
padding: 10px;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
.search-box input[type="text"] {
flex-grow: 1;
border: none;
outline: none;
font-size: 16px;
padding-left: 10px;
}
.search-box button {
background-color: #f8f9fa;
border: none;
color: #4285f4;
font-size: 16px;
cursor: pointer;
padding: 0 15px;
border-radius: 24px;
}
/* 履歴リスト */
.history {
width: 90%;
max-width: 500px;
margin-top: 20px;
font-size: 14px;
color: #555;
}
.history h2 {
margin: 0 0 10px;
font-size: 16px;
color: #666;
}
.history ul {
list-style: none;
padding: 0;
margin: 0;
}
.history ul li {
padding: 5px 0;
border-bottom: 1px solid #e0e0e0;
}
</style>
<script>
// ページ読み込み時に検索履歴を取得して表示
window.onload = function() {
displayHistory();
};
// フォーム送信時に検索内容を保存
function saveSearch() {
const query = document.getElementById("query").value;
if (query) {
// 既存の履歴を取得して更新
let searchHistory = JSON.parse(localStorage.getItem("searchHistory")) || [];
searchHistory.unshift(query); // 最新の検索を先頭に追加
localStorage.setItem("searchHistory", JSON.stringify(searchHistory));
displayHistory();
}
}
// 検索履歴を表示する関数
function displayHistory() {
const historyContainer = document.getElementById("history-list");
historyContainer.innerHTML = ""; // 前回の表示をクリア
// ローカルストレージから検索履歴を取得
const searchHistory = JSON.parse(localStorage.getItem("searchHistory")) || [];
// 検索履歴をリストとして表示
searchHistory.forEach(query => {
const listItem = document.createElement("li");
listItem.textContent = query;
historyContainer.appendChild(listItem);
});
}
</script>
</head>
<body>
<!-- Google風ロゴ -->
<div class="logo">
<span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</div>
<!-- 検索ボックス -->
<form action="https://www.google.com/search" method="GET" target="_blank" onsubmit="saveSearch()">
<div class="search-box">
<input type="text" id="query" name="q" placeholder="検索内容を入力" required>
<button type="submit">検索</button>
</div>
</form>
<!-- 検索履歴 -->
<div class="history">
<h2>検索履歴</h2>
<ul id="history-list"></ul>
</div>
</body>
</html>
実行結果
ポイント① - フォーム要素
<!-- 検索ボックス -->
<form action="https://www.google.com/search" method="GET" target="_blank" onsubmit="saveSearch()">
<div class="search-box">
<input type="text" id="query" name="q" placeholder="検索内容を入力" required>
<button type="submit">検索</button>
</div>
</form>
グーグル検索の検索キーワードの渡し方はGETメソッドでクエリパラメータとしてリクエストしている。
https://www.google.com/search?q=[検索ワード]
<form>: フォーム要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/form
ポイント② - localStorage
localStorage（ローカルストレージ）の中身は、ブラウザの開発ツールで確認することができます。
(｀・ω・´)確認します。
キー：searchHistory
値：["GETメソッド","GETメソッド","GETメソッド","GETメソッド","GETメソッド"]
localStorage（ローカルストレージ）はキャッシュが削除されない限り残るデータです。
〇確認方法
「F12 or 右クリック → 検証」 → アプリケーションのタブ → ローカル ストレージ