個人アプリ開発 エリア別一覧ページ作成

エリア一覧ページの作成

今回はエリアコントローラを作成し、都道府県ごとのアクションに所属都道府県のデータを持つインスタンスを作成する方法で実装を行いました。
結果かなり冗長なコードになり、もっとスマートにできるはず…とも思いましたが、
URLは/area/tokyoみたいな感じになり、そこは良かったので一旦こちらで進めました。

コントローラ作成

$ rails g controller areas

ルーティング編集

ーーー追記ーーー
resources :areas do
    collection do
      get 'tokyo'
      get 'kanagawa'
      get 'chiba'
      get 'ibaraki'
      get 'saitama'
      get 'tochigi'
    end
  end

コントローラ編集

def tokyo
    @groups = Group.where(area: "東京")
  end
ーーー以下略ーーー

ビュー作成(部分テンプレを作成)

[areas/_index.html.haml]
= render "common/header"

.groups-main
  .groups-main--head
    .groups-main--head__wrapper
      %h1
        = @groups[0].area
        の水族館
      %p
        口コミ評価が高い順にご紹介！

    = render "common/lists"
  = render "top/side-bar"

= render "top/footer"

その他の修正

マウスオーバーで説明テキストを表示

下記の箇所は見た目を優先し、アイコンと数字の表示のみにしましたが、
ちょっと内容が分かりにくいと思ったので、カーソルを持って行った時に説明が出るようにしました。

CSSで兄弟クラスにホバーアクションをつけられるのは知らなかったので、勉強になる修正でした。
参考：
CSSで実装する、マウスオーバーで表示される吹き出し ｜ Tips Note by TAM

CarrierWaveでアップロードした画像ファイルは全てGit管理下から外す

commitをする度にいつか修正したい...と思いつつ後回しにしてました汗

[.gitignore]
# Ignore uploaded files in development
 /public/uploads/

画像は/public/uploads/に保存される為、そこを.gitignoreに記述してあげるだけ。
毎度のストレスを考えると、まずはじめにやっておくべきでした。

CSSで最後のクラスの指定

繰り返し処理をしているところの最下部にborder-bottomをつけたい。
下記箇所の修正。ちょっと分かりにくいが、border-topのみスタイリングしている状態。

[css]
.ranking__box:last-of-type {
  margin-bottom: 25px;
  border-bottom: solid 2px #dbdbff;
}

.class:last-of-type {
繰り返し処理を施している場合、最後のクラスにスタイルを当てる
これも初めての記述でした。今後使えそう。