🖇️

【Rails】gem:acts-as-taggable-on と Bootstrap Tags Input を使ったタグ機能② 検索機能編

2023/09/27に公開

Bootstrap

前回の続きです。前回の記事は以下の通り。

前回タグ付けと表示ができるようになったので、タグ検索ができるよう実装していきます。
タグをクリックするとそのタグを含んだ投稿を表示します。

ルーティング追加

タグ検索をするためにルーティングを追加します。

routes.rb

Rails.application.routes.draw do
  scope module: :public do
    resources :posts do
      collection do
      ：
      end
     end

+   resources :tags, only: [:show]
      :
end

コントローラ追加

gem:kaminariを使ってページネーションも入れている書き方になっています。

tags_controller.rb

class Public::TagsController < ApplicationController
  def show
    # タグ一覧を取得
    @tags = Post.tag_counts_on(:tags)

    # パラメータからタグ名を取得
    tag_name = params[:id]

    # タグ名に基づいてタグに関連する情報を取得（例：タグが付けられた投稿）
    @tag = ActsAsTaggableOn::Tag.find_by(name: tag_name)

    # 特定のタグに関連付けられた投稿を取得
    @tagged_posts = Post.tagged_with(tag_name)

    # ページネーションのために、特定のタグに関連付けられた投稿の総数を計算
    @total_posts_count = @tagged_posts.count

    # ページネーションを適用し、1ページあたり12件の投稿を表示
    @tagged_posts = @tagged_posts.page(params[:page]).per(12)

    # タグの一覧ページを表示するビューテンプレートをレンダリング
    render 'show'
  end
end

ビューの実装

タグにリンクをつける
以下のようにタグにリンクをつけてあげ、タグをクリックするとページ遷移するようにします。以下の例は、タグを2個だけ抽出しています。

必要ページ

<% post.tag_list.first(2).each do |tag| %>
  <span class="tag-btn ml-3"><%= link_to tag, tag_path(tag) %></span>
<% end %>

タグ検索詳細ページ
タグの検索画面です。閲覧数のカラムをpostにいれているので、ビューで投稿の閲覧数順に並び替えをしています。

tags/show.html.erb

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <% if @tagged_posts.present? %>
      <h4 class="headline mt-5 ml-5">Tag: <%= @tag.name %>の一覧（<%= @total_posts_count %>件）</h4>
      <div class="row mt-3">
        <% @tagged_posts = @tagged_posts.order(impressions_count: :desc) %>
        <% @tagged_posts.each do |post| %>
          <%= render partial: 'public/shared/post_item', locals: { post: post } %>
        <% end %>
      </div>
    　　  <% else %>
        <h1 class="tags-title">Tag not found</h1>
        <% end %>
      <div class="pagination justify-content-center">
       <%= paginate @tagged_posts, theme: 'bootstrap-5' %>
      </div>
    </div>
  </div>
</div>

デプロイ時のエラーは苦戦しましたが、簡単にタグ機能を実装できた使いやすいgemでした。

ルーティング追加

コントローラ追加

ビューの実装

Discussion