Active hashで作ったカテゴリーを用いてransackでカテゴリー検索

今回はアクティブハッシュを用いたカテゴリ検索をしたいと思います

自分は今コーヒーの感想を共有できるアプリを作ってます。
インスタのコーヒー版的な感じです。

期待する動作！

このように,「地域　ラテンアメリカ、コク　ほどよい」みたいにカテゴリーを選択して投稿

選択した、カテゴリがしっかり表示されてます。

名前は、グアテマラ、地域はラテンアメリカにして、検索してみて

しっかり検索結果が表示されました！！

具体的な実装方法

今回はカテゴリ選択のactive hashと言うgemと検索機能を簡単に実装できるransackと言うgemを導入します。

active hashとは、都道府県名一覧やカテゴリーなど「基本的に変更されないデータ」があったとします。基本的に変更されないデータであるため、データベースに保存する必要性はありません。一方、ビューファイルなどにそれらのデータを直接書いてしまうと、可読性に欠けます。
そのようなケースでは、ActiveHashが有用です。
都道府県名などの変更がないデータをモデルに記述し、あたかもデータベースに保存されていたデータとして取り扱うことができるようにするGemです。すなわち、都道府県名などのデータに対して、ActiveRecordのメソッドを用いることができます。
テーブルの数を無駄に増やす必要もなくなります。

ransackとはシンプルな検索フォームと高度な検索フォームの作成を可能にするgemです。

まずはこれらのgemを導入しましょう。

色々なカテゴリーを設けてますが、今回は酸味を表す、acidityカテゴリーだけに着目して解説していきます。

active hashでのカテゴリーの実装(わかってる方は飛ばしてください)

acidity.rb

class Acidity < ActiveHash::Base
  self.data = [

    { id: 2, name: 'LOW(少ない)' },
    { id: 3, name: 'MEDIUM(ほどよい)' },
    { id: 4, name: 'HIGH(強い)' }
  ]
end

これが、active hashで作った カテゴリーです。

コーヒーの投稿を保存する、drinksテーブルにacidity_idを保存してます

drinks.rb

class Drink < ApplicationRecord
  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to :user
  has_one :trade
  has_many :drink_tag_relations
  has_many :tags,through: :drink_tag_relations
  has_one_attached :image
  belongs_to_active_hash :region
  belongs_to_active_hash :body
  belongs_to_active_hash :acidity
  belongs_to_active_hash :processing
  with_options presence: true do
    validates :name
    validates :explain
  end
end

belongs_to_active_hash :acidity

と記述することで、acidityとアソシエーションが組まれて、カテゴリ選択ができるようになります
```ruby

extend ActiveHash::Associations::ActiveRecordExtensions
```
　と記述して、moduleを取り込むことによって、 belongs_to_active_hashメソッド
が使えます

drinks/new.html.erb

 <%= f.collection_select(:acidity_id,Acidity.all,:id,:name,{},{class: "こんな感じでクラスを設定できます"})%>

こんな感じでカテゴリが実装できます

第一引数に、保存先のカラム名,今回はacidity_id

第二引数に、表示したい配列データを指定する、Acidity.all

第三引数に、表示する際に参照するDBのカラム名

第四引数に、実際に表示されるカラム名

Acidity.rbのnameが厳密に言えばカラムではないが、
データベースのように扱えるので、nameを指定する

これで先ほどのようなプルダウン形式のカテゴリーの選択欄が作成できました。

検索機能の実装!

ルーティングの記述

routes.rb

Rails.application.routes.draw do
  root to: 'drinks#index'


  get '/drinks/searchdrink',  to: 'drinks#search_drink'
  resources :drinks, only: [:index,:new,:show,:create,:destroy] do
    collection do
      get 'search'
    end

end

resourcesの上に、書かないと意図しない画面に遷移させられたりするので、それより上に書きましょう！

コントローラーの記述

drinks_controller.rb

class DrinksController < ApplicationController
  include SessionsHelper

  before_action :create_searching_object,only: [:index,:search_drink]
  def index
    @user = current_user
    @drinks = Drink.all.order("created_at DESC")
  end

  def new
    @drink = DrinkTag.new
  end

  def create
    @drink = DrinkTag.new(drink_params)
    if @drink.valid?
      @drink.save
      redirect_to drinks_path
    else
      render 'new'
    end
  end



  def search_drink

    @results = @p.result

  end

  private
  def drink_params
    params.require(:drink_tag).permit(:name,:price,:explain,:image,:tag_name,:region_id,:body_id,:acidity_id,:processing_id).merge(user_id: current_user.id)
  end

  def create_searching_object
    @p = Drink.ransack(params[:q]) 
  end

indexアクションでは、全投稿の情報を取得しています

create_searching_objectアクションでは、キー(:q)を使って、drinksテーブルから商品情報を探しています
@p と言う名前の検索オブジェクトを生成しています

index,search_drinkアクションのみで使用するので、before_actionで限定しています

search_drinkアクションでは@pに対して、.resultとすることで検索結果を取得して、@resultに代入しています

コントローラーの処理は以上です。

検索フォームの実装

ここでは、投稿の検索フォームを実装しましょう。その際、「search_form_for」と「collection_select」という2つのメソッドを使用します。

search_form_forはransack特有の検索フォームを生成するヘルパーメソッドです。

collection_selectメソッドはDBにある情報をプルダウン形式で表示できるヘルパーメソッドです。

drinks/index.html.erb

<%= search_form_for @p, url: drinks_searchdrink_path do |f| %>

  <%= f.search_field :name_cont%>

  <%# _contはidじゃなくて文字列のときに使う%>
  <p>カテゴリー検索</p>
  <%# ベースはドリンククラスで、第二引数で%>
  <%= f.label '酸味'%>
  <%= f.collection_select :acidity_id_eq,Acidity.all,:id,:name,include_blank: '指定なし' %>

  <%= f.submit '検索' %>
<% end %>

search_form_forの引数に「@p(検索オブジェクト)」を渡すことで検索フォームを生成しています。

urlはdrink#search_drinkに飛ばしたいので、rails routeで確認してこう言う感じになりました

  <%= f.collection_select :acidity_id_eq,Acidity.all,:id,:name,include_blank: '指定なし' %>

第一引数　検索したいカラム名

第二引数　実際に表示したい配列データを指定する

今回で言えば、Acidity.allです。

第三引数　表示する際に参照するDBのカラム名

第四引数 実際に表示されるカラム名

オプション　include_black 何も選択してないときに表示される内容、今回は「指定無し」

検索結果を表示するビューを作成

search_drinkアクションの処理が終わったら、railsのデフォルトでsearch_drink.html.erbにリダイレクトされるので、
search_drink.html.erbを作成して

<h1>
  検索結果
</h1>
<%# 検索結果の個数で条件分岐 %>
<% if @results.length !=0 %>

<%  @results.each do |drink| %>
  <div class='main'>

  <%# 商品一覧 %>
  <div class='item-contents'>
    <h2 class='title'></h2>
    <ul class='item-lists'>

      <%# 商品のインスタンス変数になにか入っている場合、中身のすべてを展開できるようにしましょう %>
      <%if drink%>
      <li class='list'>
        <%= link_to drink_path(drink.id) do %>
        <div class='item-img-content'>
          <%= image_tag drink.image , class: "item-img" if drink.image.attached? %>

          <%# if drink.trade%>



          <%# end %>
        </div>
        <div class='item-info'>
          <h3 class='item-name'>
            <%= drink.name %>
          </h3>
          <div class='item-price'>
            <span><%= drink.price %>円<br>(税込み)</span>
            <div class='star-btn'>
              <%# image_tag "star.png", class:"star-icon" %>
              <span class='star-count'>0</span>
            </div>
          </div>
          <div class='item-explain'>
            <%= drink.explain%>
          </div>
          <div>
            <% if drink.region %>
            産地 <%= drink.region.name%>              
            <% end %>
          </div>
          <div>
            <% if drink.body%>
            コク <%= drink.body.name %>
            <% end %>
          </div>
          <div>
            <% if drink.acidity %>
              酸味 <%= drink.acidity.name%>
            <% end %>
          </div>
          <div>
            <% if drink.processing%>
              加工法 <%= drink.processing.name%>
            <% end %>
          </div>
        </div>
        <% if logged_in? && current_user.id == drink.user_id %>
        <div class="item-delete">
          <%= link_to "削除する",drink_path(drink),method: :delete %>
        </div>
        <% if drink.trade%>
        <%= link_to "商品を購入する", drink_trades_path(drink) %>
        <% end %>
        <% end %>
      </li>
      <%end%>



    </ul>
  </div>
  <%end%>
</div>

<% end %>

<% else %>
  該当する商品はありません
<% end %>
<br>
<%= link_to 'トップページへ戻る', root_path %>

と、検索結果が、@resultに入っていて、
それをeach文で、ローカル変数をdrinkにして、検索結果があるだけ表示させています

以上で、Active hashで作ったカテゴリーを用いてransackでカテゴリ検索をする実装が終わりました！