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

# はじめに

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

導入当初に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などもありますがコントローラに関しては使う人それぞれなので今回は省きます。