はじめに

（ * 注意：この記事は学習の一環として実装した物の一部を記事にしています。又、技術的に最適な方法ではない可能性があります。）

導入当初にBootstrapを使ってデザインや配置が変更できなかったので配置できるようにしてみました。

Deviseを導入

実行環境
ruby '2.5.3'
gem 'rails', '~> 5.2.2'
gem bootstrap-sass

##Devise gemをインストール
以下をGemfileに記入しbundle installを実行する。

gem 'devise'

Deviseのファイルを作成する。

$rails g devise:install
Running via Spring preloader in process 55270
      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

1.に書かれている通りにconfig/environments/development.rbにURLオプションを記載する。

config/environments/development.rb

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

2.ではrootを設定しなければいけないのでしていない方は設定してください。

3.flashを表示させる為にapplication.rbの<body>タグに記載する。

app/views/layouts/application.html.erb

<body>
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
</body>

##モデルの作成
deviseに応じたUserモデルを作成する。

$ rails g devise User

生成されたmodels/user.rbのモジュールを追加したり,マイグレーションファイルdb/migrate/生成されたファイルのカラムを変更したりできますが今回はここを省きます。

$rails db:migrateを実行します。

$ rails db:migrate

##viewの作成
deviseはviewを作成できて便利です。

$ rails g devise:views

これによりapp/views/deviseに生成されます。

・しかし、今回の場合、作成したモデルUserに合わせたいので(app/views/deviseだと分かりづらい。)、viewをusersと指定します。

$ rails g devise:views users

Running via Spring preloader in process 59595
Expected boolean default value for '--markerb'; got :erb (string)
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/users/shared
      create    app/views/users/shared/_links.html.erb
      invoke  form_for
      create    app/views/users/confirmations
      create    app/views/users/confirmations/new.html.erb
      create    app/views/users/passwords
      create    app/views/users/passwords/edit.html.erb
      create    app/views/users/passwords/new.html.erb
      create    app/views/users/registrations
      create    app/views/users/registrations/edit.html.erb
      create    app/views/users/registrations/new.html.erb
      create    app/views/users/sessions
      create    app/views/users/sessions/new.html.erb
      create    app/views/users/unlocks
      create    app/views/users/unlocks/new.html.erb
      invoke  erb
      create    app/views/users/mailer
      create    app/views/users/mailer/confirmation_instructions.html.erb
      create    app/views/users/mailer/email_changed.html.erb
      create    app/views/users/mailer/password_change.html.erb
      create    app/views/users/mailer/reset_password_instructions.html.erb
      create    app/views/users/mailer/unlock_instructions.html.erb

##反映されない問題
生成されたviews/userファイルをカスタマイズしてブラウザで確認してみると反映されてません。
なぜかというと、デフォルトでスコープされているのがviews/deviseになっており正確にviews/usersが呼び出せていませんでした。

##解決方法

デフォルトのスコープを変更してあげることでviews/usersのカスタマイズが反映されます。
#config.scoped_views = trueをコメントアウトします。

config/initializers/devise.rb

config.scoped_views = true

#終わりに
deviseの導入からviewの編集可能方法まで書きました。
devise:controllers usersなどもありますがコントローラに関しては使う人それぞれなので今回は省きます。

Devise viewのデザインを編集可能にする

はじめに

Deviseを導入

Deviseのファイルを作成する。