A Little Each Day

note to self

deviseでviewを作成する方法

こんにちは。本日はdeviseで使うビューファイルを生成する方法です。

deviseは簡単にユーザー登録機能やセッション機能を実装することができますが、デフォルトではすごく味気ないレイアウトが表示されるだけです。

なのでdevise用のviewファイルを作成して修正することにより、deviseのそれぞれのアクションにあった画面を装飾することができます。


※deviseの導入はこちらを参考にしてください。

blog.otsukasatoshi.com


バージョン

Ruby '2.2.1'
Rails '4.2.1'


viewの作成

deviseのviewファイルを作成するのは簡単で、「rails g devise:views」をプロジェクトディレクトリでターミナルに打つことにより実現できます。

$ rails g devise:views
Running via Spring preloader in process 7216
      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/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb


するとたくさんのdevise用のレイアウトファイルがviewsフォルダ以下に生成されたことがわかると思います。

これらのviewファイルを修正することによりdeviseのそれぞれのアクションごとのレイアウトを変えることができます。


Bootstrapで簡単な装飾をする

次にBootstrapを使い簡単なフォームの装飾をしていきましょう。
deviseは簡単に登録やログイン機能を実装できますが、そのままではフォームなどのレイアウトが味気ないので、それっぽくしていきましょう。

※Bootstrapの導入はこちらを参考にしてください。

blog.otsukasatoshi.com


今回は試しにログイン部分のレイアウトを装飾したいと思います。
フォームとボタンを装飾していきます。

#views/devise/sessions/new.html.erb

<h2>Log in</h2>

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, class: "form-control" %>
  </div>

  <div class="field">
    <%= f.label :password %><br />
    <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
  </div>

  <% if devise_mapping.rememberable? -%>
    <div class="field">
      <%= f.check_box :remember_me %>
      <%= f.label :remember_me %>
    </div>
  <% end -%>

  <div class="actions">
    <%= f.submit "Log in", class: "btn btn-primary" %>
  </div>
<% end %>

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


すると以下のように簡単にですがそれっぽい感じのデザインになったのではないでしょうか。

f:id:chi_kun:20160530153956p:plain


他にもBootstrapにはラベル関連やボタン関連など多様なレイアウトが用意されているのでお好きなようにカスタマイズしてみてください。


ユーザー登録画面などをdeviseの方にする

deviseを使えばユーザー登録などの機能を簡単に実装できましたが、もしあなたが事前にユーザー関連の機能を実装していた場合、deviseとuser_controller間で機能がかぶってしまいます。

なのでここではユーザー登録はdeviseの方にして、users_controllerのユーザー登録の部分(newとcreate)は消してしまいましょう。

users_controllerの編集

newとcreateアクションを削除しましょう。

# users_controller.rb

  #以下を消す
  def new
    @user = User.new
  end

  #以下を消す
  def create
    @user = User.new(user_params)

    respond_to do |format|
      if @user.save
        format.html { redirect_to @user, notice: 'User was successfully created.' }
        format.json { render :show, status: :created, location: @user }
      else
        format.html { render :new }
        format.json { render json: @user.errors, status: :unprocessable_entity }
      end
    end
  end


controllerは以上でOKです。


ルーティングの編集

最後にルーティングの設定です。上記でusers_controllerのnewとcreateの部分を削除したので、ルーティングの方も修正して行きましょう。

# routes.rb

  #デバイスのルーティング
  devise_for :users
  #user_controllerのルーティング
  resources :users, only: [:index, :show, :edit, :update, :destroy]


onlyを用いることで、生成するルーティングを指定することができます。
この場合はonlyの後に書いてある、index, show, edit, update, destroyのルーティングが生成されるという意味です。



本日は以上です。