ウェブサイト内に検索窓を設置したいと考えている方に向けて、手打ちHTMLサイトにJavaScriptを使って簡単に検索機能を実装する方法を解説します。WordPressなどのCMSを使わず、HTMLとJavaScriptだけで検索機能を作成することは可能です。この記事では、検索窓の作成方法とその動作の仕組みについて、具体的なコードとともに説明します。
1. HTMLとJavaScriptで検索窓を作成する基本的な方法
まず、検索窓のHTMLコードを作成します。これには、ユーザーが検索キーワードを入力できるテキストボックスと、検索を実行するためのボタン（虫眼鏡アイコンなど）を用意します。以下は基本的な検索フォームの例です。
<form action="" method="get">
<input type="text" id="search" name="s" placeholder="検索キーワード">
<button type="submit"><i class="fa fa-search"></i> 検索</button>
</form>次に、この検索窓が動作するためにJavaScriptを使って検索結果ページに遷移する仕組みを作ります。検索ボタンをクリックすると、指定した検索ワードがURLに反映され、結果が表示されるようになります。
2. 検索結果ページを表示するURLの仕組み
検索窓に入力されたキーワードをURLに反映させるために、フォームの送信方法を指定します。通常、検索結果のページは「?s=検索ワード」の形式で表示されるため、以下のコードを使って検索結果を表示することができます。
<form action="/search" method="get">
<input type="text" id="search" name="s" placeholder="検索ワード">
<button type="submit">検索</button>
</form>このように、ユーザーが検索キーワードを入力し、虫メガネのアイコンや検索ボタンをクリックすると、検索結果が表示されます。例えば、「◯◯.com/?s=なんたらかんたら」というURLで検索結果ページが表示されます。
3. 検索結果ページの作成方法
検索結果ページでは、入力されたキーワードに関連するページをリスト表示する必要があります。これを実現するためには、サーバーサイドの処理（例えばPHPなど）が必要ですが、手打ちHTMLのみであれば、特定のページをリストアップする静的な方法を使うことができます。
簡単な方法として、検索キーワードに基づいた静的なページを手動で作成することもできますが、動的にコンテンツを表示させたい場合には、JavaScriptでリストを表示したり、APIを活用したりする方法が考えられます。
4. より高度な検索機能を実装する方法
手打ちHTMLサイトでは、静的な方法で検索機能を実装することもできますが、より高度な検索機能を実装するためにはJavaScriptとサーバーサイドの技術（PHPなど）を組み合わせる必要があります。これにより、サイト内の全てのページを対象にした動的な検索が可能になります。
もし、動的な検索機能を実装したい場合、Google Custom Search Engine（CSE）などを利用する方法もあります。これにより、Googleの検索技術を利用して、より正確な検索結果を表示することができます。
まとめ
手打ちHTMLサイトでも、JavaScriptを使って簡単に検索窓を設置することができます。ユーザーが入力した検索キーワードをURLに反映させ、検索結果ページを表示することで、より便利なサイトを作成することができます。さらに、動的な検索機能を追加したい場合には、サーバーサイドの技術を使うことが必要ですが、簡単な静的検索ならJavaScriptとHTMLだけで十分対応可能です。
コメント