住所検索（ransack）

内容

投稿を住所で絞り込めるように実装する

住所検索機能

1. ransackで関連するモデルのカラムを検索する

フォームタグの要素名に、関連するモデル名関連するモデルのカラム名を指定する
postモデルに紐づくaddressモデルのカラム名(postal_code)を検索条件にしたい時、f.フォームヘルパー :要素名、の要素名をaddress_postal_code_eqとする
search.html.erb

<%= search_form_for @q, url: posts_path do |f| %>
  <%= f.text_field :address_postal_code_eq %>

2. ビューを編集

投稿一覧/詳細ページに住所を追加する

ページネーションのデザイン変更

ページネーション機能はkaminariというgemを用いて実装しているが、デザインがいまいちなので自分でカスタマイズしてみる

1. kaminariのviewファイルを作成

viewフォルダの中にkaminariのview一覧を作成
ターミナル

rails g kaminari:views default

2. 日本語化

kaminariのgemのデフォが英語になっているので、これを日本語環境に変える
config/application.rb

config.i18n.default_locale = :ja
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]

一行目は、日本語環境を適用、二行目は複数のlacaleファイル(後述)が適用されるコード
次にconfig/localesフォルダーにkaminari.ja.ymlを作成し、コード記述
config/locales/kaminari.ja.yml

ja:
  views:
    pagination:
      first: "« 最初"
      last: "最後 »"
      previous: "‹ 前へ"
      next: "次へ ›"
      truncate: "..."

3. 該当のcssファイルを編集

index.css

.pagination{
  display: flex;
  justify-content: flex-start;
}

.pagination span{
  width: 3em;
  background-color: #fff;
  text-align: center;
  border: solid 1px #ddd;
  margin-right: 0.3vw;
  transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.pagination span.current{
  background-color: limegreen;
  color: #fff;
}

.pagination span:hover{
  background-color: #ddd;
  transition: .3s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

4. 投稿件数を表示したい場合

投稿何件中何件表示、という表示をさせたい時は以下のように記述する
index.html.erb

<%= @posts.total_count %>件中<%= @posts.offset_value + 1 %>〜<%= @posts.offset_value + @posts.length %>件表示

次回

画像複数投稿機能を実装