deviseを用いたユーザーまわりの機能の実装②

ログイン・サインアップ画面のビューの変更

deviseを使用してログイン機能を実装すると自動的にログイン画面とサインアップ画面が生成される。ただしこれはとてもシンプルな見た目になっているため、UIを整えていくことが多い。

手順

①devise用のビューファイルを作成 ②ログイン・サインアップ画面のビューファイルの編集

①devise用のビューファイルを作成する

deviseでログイン機能を実装すると、ログイン・サインアップ画面は自動的に生成されるがビューファイルとしては生成されない。これは、deviseのGem内に存在するビューファイルを読み込んでいるためである。よって、ビューファイルに変更を加えるためには、deviseのコマンドを利用してビューファイルを生成する必要がある。

・下記のコマンドを実行し、devise用のビューファイルを生成する。ターミナル

  $ rails g devise:views

これにより、app/views/devise以下のディレクトリにビューファイル各種が新規作成される。

②ログイン・サインアップ画面のビューファイルの編集

①の作業でdevise用のビューファイルを生成することができ他ので、次は生成されたビューファイルを編集してレイアウトを変更していく。

サインアップ画面は「app/views/devise/registrations/new.html.erb」ログイン画面のビューは「app/views/devise/sessions/new.html.erb」というビューファイルが対応しているため、この2つのファイルに変更を加え、作りたい見た目を作成していく。

サインアップ時の登録情報を増やす

今回は、サインアップ時にニックネームを登録できるようにする（上記までの作業で、メールアドレスとパスワードの2つが登録できている状態のはず）。

手順

①ユーザーテーブルにカラムを追加する。 ②登録画面のビューを編集する。 ③ストロングパラメーターを編集する。

①ユーザーテーブルにカラムを追加する

ニックネームを登録するために、usersテーブルにニックネームを保存するためのカラムを追加する。追加したカラムに、サインアップ時に登録するニックネームを保存することになる。

・カラムを追加するマイグレーションファイルの作成カラムを追加するマイグレーションファイルを作成するためには、下記コマンドを実行する。

$ rails g migration Addカラム名To追加先テーブル名 追加するカラム名:型

例えば、userの自己紹介を保存するためのカラム、introductionカラムをusersテーブルにtext型で追加したいとすると、以下の例のように書くことになる。

例）ターミナル

  $ rails g migration AddIntroductionToUsers introduction:text
  # usersテーブルにintroductionカラムをtext型で追加するマイグレーションファイルの作成

この時、「Add」「Introduction」「To」「Users」と、単語の頭文字が大文字になっていることに注目。表記方法について以下に記す。

スネークケースとキャメルケース

プログラムが単語の区切りを認識する際、2通りの方法がある。その２つが「スネークケース、キャメルケース」である。スネークケースは、「sample_ai_ueo」のように「 _ 」で単語を区切る方法。キャメルケースは、「SampleAiUeo」のように単語の頭文字を大文字にすることで単語を区切る方法。

②登録画面のビューを編集する

これでDB側の準備は整ったので、続いてユーザーの新規登録画面にニックネームを登録するためのフォームを追加する。ユーザーの新規登録画面のビューは、app/views/devise/registrations/new.html.erb。今回は入力文字数を制限するオプションもつけているが、必須ではないので無視しても構わない。

text_field:maxlengthオプション

maxlengthは、text_fieldというinputタグを生成するヘルパーメソッドにつけることができるオプション。

app/views/devise/registrations/new.html.erb

  <div class="field">
    <%= f.text_field :nickname, autofocus: true, maxlength: "6" %>
  </div>

例えば本コードの場合、生成されたフォームに7文字以上入力すると、エンターキーを押した瞬間に6文字までカットされる。

③ストロングパラメーターを編集する

サインアップ時に入力する情報はパラメーターとしてサーバーに送信されるため、通常のリクエストの場合は、コントローラに記述してあるストロングパラメーターで受け取れるパラメーターを制限することになる。しかし、deviseでログイン機能を実装した場合のパラメーターの受け取り方は通常とは異なる。ログイン時に送られてくるパラメーターを制限するストロングパラメーターは、deviseのGem内に記述されているため編集することはできないのである。ではどうするかというと、今回追加したニックネームを受け取れるようにするにはdeviseが提供しているconfigure_permitted_parametersメソッドを利用する。

configure_permitted_parametersメソッド

deviseでは初期状態でサインアップ時にメールアドレスとパスワードのみを受け取るようにストロングパラメーターが設定してあるため、追加したキーのパラメーターは許可されていない。追加のパラメーターを許可したい場合は、application_controllerにおいてbefore_actionにconfigure_permitted_parametersメソッドを設定する必要がある。

例）

  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?

    def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:ストロングパラメーターを追加したいアクション名, keys: [:追加するキー])
    end
  end

今回は、sign_upアクションに対してnicknameというキーのパラメーターを追加で許可する。

・app/controllers/application_controllerを以下のように編集する。 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?

    def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname])
    end
  end

上記の一連の作業により、サインアップ時にニックネームを登録することができるようになる。