deviseを使ったログイン画面で表示される描画を出し分ける方法


環境
Ruby 2.7.0
Rails 6.0.3
devise 4.7.2

やりたいこと

  • ユーザー認証画面(サインイン・サインアップなど)は通常のレイアウトと画面の描画を変えたい
  • 通常の画面(ユーザー認証画面以外)では、application.html.erbに記載の内容を表示させたい

背景

deviseを使ってて、サインアップとかログインの時はapplication.htmlの表示とは違う描画をしたいなーて時、どうやって画面の切り分け(deviseを使って描画される時の画面と、通常の画面でapplication.htmlでの画面を出し分けたい)って時の対処法が分からん!サインインの画面はheaderとかfooterとかの表示いらないんだけどなー…ってときに調べたら公式に書いてあった^^;

結論

devise github(公式ページ)
1. ユーザー認証用のHTMLを作る
2. ApplicationControllerに描画の切替を制御する記述をする

説明

ユーザー認証用のHTML(ファイル名は任意)のファイル名で作って、app/views/layouts/配下に作ります
※ためにしapp/views/layouts/devise.html.erbで作るとします

devise.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <header class="header">
      <div class="header__inner">
        <div class="header__logo">sample</div>
      </div>
    </header>
    <%= yield %>
  </body>
</html>

ApplicationControllerに描画の切替を制御する記述します
表示される内容がdevise_controllerかどうかを判断するためにif devise_controller?を記述し、
trueだったらdevise.html.erb
falseだったらapplication.html.erb
を呼ぶようにしています

application_controller.rb
class ApplicationController < ActionController::Base
  layout :layout_by_resource

  private

  def layout_by_resource
    if devise_controller?
      'devise'
    else
      'application'
    end
  end
end

この2ステップで描画の切り分けができます^^