devise にusername カラムを追加し、usernameを登録できるようにする。


deviseはデフォルトではemailカラムとpasswordカラムしか持っていないためusernameが入っているアカウント情報を登録できない。

deviseを使う際にusernameを登録できるようにしなくてはいけなくなったため、やり方をメモしていく。

まずdeviseのインストール

Gemfile
```
gem 'devise', '4.1.1'
```

terminal

```
bundle install
```

```
rails g devise install
Running via Spring preloader in process 30712
      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. If you are deploying on Heroku with Rails 3.2 only, you may want to set:

       config.assets.initialize_on_precompile = false

     On config/application.rb forcing your application to not access the DB
     or load models when precompiling your assets.

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

       rails g devise:views

===============================================================================

```

マイグレーションファイルを追加し、usernameカラムを追加していきます。

```
rails g migration add_username_to_users username:string

rake db:migrate
```

次にstrong parameterの追加

```application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

 　　def configure_permitted_parameters
    added_attrs = [ :username, :email, :password, :password_confirmation　]
    devise_parameter_sanitizer.permit :sign_up, keys: added_attrs
    devise_parameter_sanitizer.permit :account_update, keys: added_attrs
    devise_parameter_sanitizer.permit :sign_in, keys: added_attrs
  end
end
```

参考
https://github.com/plataformatec/devise/wiki/How-To:-Allow-users-to-sign-in-using-their-username-or-email-address

次にviewをカスタマイズできるようにしていく。

```
rails g devise:views
```

```devise.rb
...
config.scoped_views = true
...
```

viewにusername欄を追加していく。

```views/registrations/new.html.erb
<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>
  <div class="field">
    <%= f.label :username %><br />
    <%= f.text_field :username, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
```

これで表示してみると

<img width="500" alt="スクリーンショット 2016-09-30 11.14.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/136253/b76a16be-3bbd-9b46-9c24-1e4dd23fb8f5.png">
うまく表示できてるみたいですね。


登録はどうだろう...
signupしてusernameを表示してみると

```top_pages/show.html.erb
<%= @user.username %>
```


<img width="500" alt="スクリーンショット 2016-09-30 11.25.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/136253/eb9a2119-b7c9-0803-b5b2-5dfc7eab4014.png">

うまく登録できてるみたいですね！

以上