自作ブログのカスタマイズ：タグ検索機能の実装方法

こんにちは、鈴木俊吾（すずしん）です。

あなたは、ブログに検索機能を追加したいと思ったことはありませんか？
この機能を追加することで、読者が特定のキーワードに関連する記事を探しやすくなります。
利便性が上がって、読者の満足度もきっと向上することでしょうね。
ブログのPVも増えるかもしれませんし、検索機能を追加しておくと、いざというときに便利です。
やっておいて損はないと思います。

というわけで…。
このたび、私は自作ブログをカスタマイズしてみました。
具体的には、タグ検索機能を追加しました。
キーワードを入力すると、そのキーワードに一致するタグの記事を検索できるようになりました。

この記事では、そのタグ検索機能の実装方法を紹介します。
自作ブログ上では、FreeMarkerをテンプレートエンジンとして使っています。
一般的な方法とは若干異なりますが、参考にしていただければ幸いです。

ブログ内検索機能の必要性

ブログの記事が多くなってくると、読者が特定の記事を探すのが難しくなります。
そのため、ブログ内に検索機能を追加することで、読者が簡単に記事を見つけられるようになります。

タグ検索機能は、記事に付けられたタグをキーワードとして検索する機能です。
タグ検索機能を追加することで、読者が特定のタグに関連する記事を探しやすくなります。

自作ブログにタグ検索機能を追加することで、読者の利便性が向上します。
「ぜひ、自分のブログにもタグ検索機能を追加したい！」
という方は、以下の手順を参考にしてみてください。

タグ検索機能の実装方法

タグ検索機能の実装方法は、以下の手順で行いました。

1. 検索用のテキストボックスと検索ボタンを設置
2. 検索ボタンをクリックしたときに、入力されたキーワードを取得
3. 入力されたキーワードに一致するタグの記事を表示

この手順に従って、タグ検索機能を実装しました。

前提として、各タグの記事が存在していて、個別記事にはタグが正しく設定されていることが必要です。
そして、そのタグの記事のURLは/tag/{keyword}となることに注意してください。

具体的な実装例

具体的な実装例を以下に示します。

まず、検索用のテキストボックスと検索ボタンを設置します。
divタグを用意して、その中にテキストボックスと検索ボタンを配置します。
divタグのクラス名はsearchとします。

<div class="search">
  <input type="text" id="tag-search" placeholder="タグを入力してください">
  <button id="search-button">検索</button>
</div>

このHTMLのスタイルは、CSSで設定します。
以下は、テキストボックスと検索ボタンのスタイルを設定する例です。

.search {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

#tag-search {
  width: 300px;
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

#search-button {
  margin-left: 10px;
  padding: 10px 20px;
  background-color: #007BFF;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#search-button:hover {
  background-color: #0056b3;
}

次に、検索ボタンをクリックしたときに、入力されたキーワードを取得するJavaScriptを記述します。

<script type="text/javascript">
  function redirectToTagPage() {
    const keyword = document.getElementById('tag-search').value.trim().toLowerCase();
    if (keyword) {
      window.location.href = "/tag/" + encodeURIComponent(keyword);
    }
  }

  document.getElementById('search-button').addEventListener('click', redirectToTagPage);

  document.getElementById('tag-search').addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
      redirectToTagPage();
    }
  });
</script>

検索ボックスに入力されたキーワードを取得し、/tag/以下にエンコードしてリダイレクトします。
このとき、/tag/以下には、入力されたキーワードに一致する記事を表示するページのURLを指定します。

私の自作ブログの場合では、HTMLとJavaScriptのコードをFreeMarkerテンプレートとして埋め込んでいます。
FreeMarkerテンプレートの場合、<#include>ディレクティブを使って、共通の処理内容を読み込むことができます。
search.ftlというファイルを作成して、さきほどのHTMLとJavaScriptのコードを記述し、<#include>ディレクティブで読み込むことで、共通の処理を再利用しています。

<#include "search.ftl">

以上で、タグ検索機能の実装が完了です。

実際の見た目は、以下のようになります。
結構いい感じになりました。

これで、自作ブログにタグ検索機能を追加できましたね。
タグ検索機能を使って、あなたの興味のある記事を探してみてください。

まとめ

この記事では、自作ブログにタグ検索機能を追加する方法を紹介しました。
検索用のテキストボックスと検索ボタンを設置し、JavaScriptで入力されたキーワードを取得して、一致するタグの記事を表示する方法です。

自作ブログにタグ検索機能を追加することで、読者の利便性が向上します。
ぜひ、自分のブログにもタグ検索機能を追加してみてくださいね。

この記事を気に入ってもらえたら、シェアしていただけると嬉しいです。
また、質問やご意見があれば、お気軽にコメントしてください。

それでは、また次回の更新をお楽しみに！

関連タグ

この記事に付けられているタグの一覧です。
タグをクリックすると、そのタグが付けられた記事の一覧を表示します。

#ブログ #プログラミング #HTML #CSS #JavaScript #FreeMarker #検索 #2024年9月

SNSシェアのお願い

もし、この記事を気に入ってもらえたら…。
SNSへシェアしていただけると嬉しいです。

あなたのシェアは、非常に励みになります。
今後の更新に対するモチベーションにもつながります。

ぜひともよろしくお願いします。