Help us understand the problem. What is going on with this article?

初めてのdevise ② -- カラムを追加してみる -- ~ やってみようカスマイズ! ~

More than 1 year has passed since last update.

webアプリの重要機能の一つであるログイン認証管理を簡単に導入するgemです。
カスタマイズも色々できるようで、便利そうだ!でも、調べると使いこなすまで難しそう。。
自分の理解を深めるためにも、何回かに分けてまとめてみることにしました。

1回目はこちら
丁寧版   :初めてのdevise ① -- 導入してみる --
コードだけ版:早くdeviseいれたいねん! ① -- 入門手順で導入してみる --

前回はdeviseの最低限の導入ができました。
今回は以下のカスタマイズを行います。

1. modelにname(名前) age(年代)カラムを追加します。
2. viewに追加したカラムを表示させます。
3. 追加したカラムをDBへ登録できるようにします。

環境

  • Ruby 2.3.3
  • Rails 4.1.16
  • Windows 8 64bit
  • devise 4.2.0

手順

① 独自のカラムを追加

name age といった2つのカラムを追加します。
bash
$ rails g migration AddColumnToUsers name age
invoke active_record
create db/migrate/20170305070915_add_column_to_users.rb

作成されたマイグレーションを確認します。
今回はnameだけ少し変更します。(入力必須、デフォルトを空白を入れる設定)

20170305070915_add_column_to_users.rb
class AddColumnToUsers < ActiveRecord::Migration
  def change
    add_column :users, :name, :string, null: false, default: ""
    add_column :users, :age, :integer
  end
end

保存したら、マイグレートしましょう。

$ rake db:migrate
== 20170305070915 AddColumnToUsers: migrating =================================
-- add_column(:users, :name, :string, {:null=>false, :default=>""})
   -> 0.0050s
-- add_column(:users, :age, :integer)
   -> 0.0003s
== 20170305070915 AddColumnToUsers: migrated (0.0060s) ========================

これでFBにカラムが追加されたはず。コンソールで確認しましょう

$ rails c
Loading development environment (Rails 4.1.16)
$ User.column_names
=> ["id", "email", "encrypted_password", "reset_password_token", "reset_password_sent_at", "remember_created_at", "sign_in_count", "current_sign_in_at", "last_sign_in_at", "current_sign_in_ip", "last_sign_i
n_ip", "created_at", "updated_at", "name", "age"]

追加されれますね。DBへのカラム追加は完了です。

② Viewに独自カラムのフォームを追加

まずはカスマイズするViewを作成します。
deviseの手引きに従い、下記コマンドを実行します。

$ rails g devise:views
Expected boolean default value for '--markerb'; got :erb (string)
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb

次は、sign_up用のviewに追加カラムを入力フォームを追加します。

devise\app\views\devise\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 :name%><br />
    <%= f.text_field :name, autofocus: true  %>
  </div>

  <div class="field">
    <%= f.label :age %><br />
    <%= f.number_field :age %>
  </div>

<!--  ↑ここまで↑-->

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email%>
  </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" %>![test.png](https://qiita-image-store.s3.amazonaws.com/0/158572/63b1513b-8ebe-268c-d039-f04162b7eb05.png)

  </div>
<% end %>

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

ここまでできたら、表示してみましょう。

test.png

nameとageが追加されていますね。
ボタンを押してもエラーもでませんが、nameとageはDBへ登録されません。

③ 追加したカラムをDBへ反映

いわゆるstrong parameters設定が必要になります。
以下のようにすると、設定できます。

devise\app\controllers\application_controller.rb
class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

# ↓これを追加↓
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

    def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :age])
    end
# ↑ここまで↑

end

これでDBへ反映されます。
Viewをいじって確認してみてください。もちろんコンソールからでも確認できます。

uloruson
板前からコールセンター業へと転職。 効率化のためVBAでツールを作り続けるうち、プログラムの魅力に引き込まれる。現在、VBAと勝手が違うRailsに悪戦苦闘中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした