6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-07-04

環境
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ステップで描画の切り分けができます^^

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?