【Rails】Controller別で基本のレイアウトを変えたい

AdminとUserでヘッダーやメニューの共通部品の表示を変えたい！
などのように、Controller別で共通箇所のレイアウトを分けたい時の方法です。

Controllerの設定
Viewの設定
Stylesheetの設定
まとめ

Controllerの設定

レイアウトを分けたいcontrollerの親となるcontrollerを作ります。
通常はApplicationControllerが親になっているかと思いますが、
この部分をnamespace別のものに置き換えます。
今回はAdmin専用のレイアウトを作る前提で書いていきます。

class AdminBaseController < ApplicationController
end

注意点としては、この親となるクラス自体は ApplicationController を継承するようにしてください。

上記のように、ApplicationControllerを親としたクラスを一つ作り、
以降Adminフォルダ化のコントローラはこのクラスを継承するようにします。
例えば controllers/admins/admin_settings_controller.rb というクラスを
作りたい場合は以下のように使用します。

module Admins
  class AdminSettingsController < AdminBaseController
  end
end

作成した親クラスの中で layout を定義します。

class AdminBaseController < ApplicationController
  layout 'admin'
end

この layout で定義されたテンプレートが、
Admin全体で共通するテンプレートとなります。

Viewの設定

次は前述した基本レイアウトとなるファイルを作成します。
views/layout フォルダ下に admin.html.slim (もしくはadmin.html.erb)ファイルを作成してください。

doctype html
html lang='ja'
  head
    meta charset='utf-8'
    meta http-equiv='x-ua-compatible' content='ie=edge'
    meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5, user-scalable=no'

    = stylesheet_link_tag 'admin'
    = javascript_include_tag 'admin', 'data-turbo-track': 'reload', defer: true

  body
    .admin 
      = yield

ポイントとしては、ここでスタイルシートやJavaScriptファイルを
admin専用のものを読み込むようにしています。
こうすることでスタイルシートなども分けることができるようになります。

body 直下に .admin というものがありますが、
こちらは <div class="admin"> というdivタグになります。
個人的なやり方ですが、スタイルを当てる際に

.admin {
  &__password_input {}
}

のような感じでぱっと見でどこのスタイルか分かるようにしたいので、
このようにレイアウトを分けるときは特に
そのnamesapce名のクラスを持つブロックで囲うようにしています。

Stylesheetの設定

先ほどのviewでAdmin専用のスタイルシートを読み込むように設定したので、
今度はその大元となるファイルを作成します。

app/assets/stylesheets 直下に admin.sass.scss ファイルを作成します。
その中で、さらに読み込みたいファイルをインポートしてください。

# app/assets/stylesheets/admin.sass.scss
@import "./common/reset";
@import "./admin/common/variable";
@import "./admin/settings/module";
...

基本的にここには、Adminで使用したいスタイルの読み込みだけを書いた方が良いでしょう。
どのファイルを読み込むかの選択だけを記述し、
具体的なスタイルについてはその読み込んだファイル内に記述します。

まとめ

以上がController別で共通のレイアウトを設定する方法になります。
流れをまとめます。
1. ベースとなるコントローラを作成し、その中でレイアウトを指定する
2. 指定されたレイアウトのviewファイルを作成し、この中で使用するスタイルシートを指定する
3. 指定されたスタイルシートのファイルを作成し、読み込みたい書くスタイルをインポートする

それぞれで大元のファイルを作って、そこで個別のものを呼び出す感じになっています。
このようにしなくても、アプリ全体のファイル内で条件分岐で分けたりもできますが、
そうすると後々修正する時など大変になりますので、
分けるときはきっちり分けてしまうやり方が良いと思います。