Ruby on Rails 画像アイコンで検索したい！！ ransack

はじめに

この記事はRuby初心者が備忘録を兼ねて作成したものです。間違い等ありました指摘よろしくお願いします。

環境

・ruby 3.2.3
・rails 7.2.1

実現したいこと

Railsでよくある掲示板投稿アプリ。そこでの検索機能を実装していきます。ただ今回は画像アイコンでの検索を可能にしていきたいと思います。
またransackを使用するのですが詳細に関しては、他にわかりやすい記事がたくさんあると思うので割愛したいと思います。

アプリケーション作成

まずはGemfileにransackを追加し、bundle install

Gemfile

gem 'ransack'

コントローラーの作成

app/controllers/boards_controller.rb

class BoardsController < ApplicationController
  def index
    @q = Board.ransack(params[:q])
    @boards = @q.result.includes(:user)
  end
  
 （略）
 
end

掲示板を投稿する際、こちらが用意した画像アイコンを選択してもらうので以下のように作成。

app/views/boards/new.html.erb

<p>新しい投稿</p>

<%= form_with model: @board do |form| %>
  <div>
    <%= form.label :タイトル %>
    <%= form.text_field :title %>
  </div>
  <div>
    <%= form.label :本文 %>
    <%= form.text_area :body %>
  </div>
  <div>
  <p>アイコンを選択:</p>
    <div>
      <%= form.radio_button :icon, "your_img１", id: "icon_0_10" %>
      <%= label_tag "icon_0_10" do %>
        <%= image_tag("your_img１", alt: "アイコン１", class: "icon-img") %>
      <% end %>
    </div>
    <div>
      <%= form.radio_button :icon, "your_img2", id: "icon_0_20" %>
      <%= label_tag "icon_0_20" do %>
        <%= image_tag("your_img2", alt: "アイコン２", class: "icon-img") %>
      <% end %>
    </div>
    <div>
      <%= form.radio_button :icon, "your_img3", id: "icon_0_30" %>
      <%= label_tag "icon_0_30" do %>
        <%= image_tag("your_img3", alt: "アイコン３", class: "icon-img") %>
      <% end %>
    </div>  
  </div>
  <div>
  <div>
    <%= form.submit "投稿" %>
  </div>
<% end %>

・form.radio_buttonを使用しラジオボタンを生成してます。
・:icon これはラジオボタンが関連付けられている属性名です。 boards テーブルの icon
カラムに対応しています。
・id: "icon_0_10" はlabel_tagでこのIDを使ってラジオボタンとラベルを関連付けるために利用されます。

ヘッダー部分に画像を表示。選択することで画像で検索できるようにする。

app/views/shared/_header.html.erb

<%= search_form_for @q do |f| %>
        <div>
          <div class="icon-selection">
            <%= f.label :icon, "アイコンで検索" %>
            <div>
              <%= f.radio_button :icon_eq, "your_img１", id: "icon_0_10",class: "d-none" %>
              <%= label_tag "icon_0_10", image_tag("your_img１", alt: "アイコン1", class: "icon-img")  %>
            </div>
            <div>
              <%= f.radio_button :icon_eq, "your_img2",id: "icon_0_20",class: "d-none" %>
              <%= label_tag "icon_0_20", image_tag("your_img2", alt: "アイコン1", class: "icon-img") %>
            </div>
            <div>
              <%= f.radio_button :icon_eq, "your_img3", id: "icon_0_30",class: "d-none" %>
              <%= label_tag "icon_0_30", image_tag("your_img3", alt: "アイコン1", class: "icon-img") %>
            </div>
            <div>
              <%= f.submit "検索" %>
            </div>
          </div>
        </div>
      <% end %>

:icon_eqでデータベースのアイコンフィールドの値と等しいかどうかをチェック。選択されたアイコンに基づいて検索結果をフィルタリングしています。

最後にRansackがどの属性を使って検索できるかを定義

app/models/board.rb

class Board < ApplicationRecord
  validates :title, presence: true, length:  { maximum: 255 }
  validates :body, presence: true, length: { maximum: 65_535 }
  validates :icon, presence:true

  belongs_to :user
  has_many :comments, dependent: :destroy

  def self.ransackable_attributes(auth_object= nil)
    ["icon"]
  end
end

参考

https://railsdoc.com/page/label_tag
https://github.com/activerecord-hackery/ransack
https://qiita.com/gyu_outputs/items/6cad794b4ca3868e976e