Devise の画面への bootstrap の適用
Devise で作ったログイン画面に bootstrap を適用してきれいにしていきます。
手順としては以下の通り
- 認証用モデル個別の View を作る
- devise の設定で個別の View を使うように設定
- bootstrap のインストール
- 作った View を bootstrap 対応に書き換え
認証用モデル個別の View を作る
以下のコマンドを実行することで、app/views/users 以下に個別 View が作成されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$ bundle exec rails g devise:views user invoke Devise::Generators::SharedViewsGenerator create app/views/users/shared create app/views/users/shared/_error_messages.html.erb 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 |
Devise の設定を個別 View を使用するように変更
config/initializers/devise.rb を編集して、個別 View を使うように変更します。
|
1 2 |
- # config.scoped_views = false + config.scoped_views = true |
bootstrap のインストールと設定
最初のインストールで bootstrap 自体はインストールしているので、設定を行う。
手順としては以下の通り。
- app/assets/stylesheets/application.css から application.scss に変更
- application.scss で bootstrap のための設定変更
- 同様に app/assets/javascripts/application.js で bootstrap のための設定変更
application.scss を編集
|
1 2 3 4 5 6 |
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss $ vi app/assets/stylesheets/application.scss - *= require_tree . - *= require_self 末尾に + @import "bootstrap"; |
application.js を編集
|
1 2 |
+ //= require jquery + //= require bootstrap-sprockets |
ここまで来たら一回表示しなおしてみる。
|
1 |
$ bundle exec rails s |
bootstrap の適用
application.html.erb の変更
アプリケーション全体にbootstrapを適用するために、app/view/layout/application.html.erb を編集
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Devise Sample</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body class="application"> <main role="main"> <div class="container"> <div class="row"> <%= yield %> </div> </main> </body> </html> |
このままだと、home#index の表示がぐちゃぐちゃなので、一旦 col-sm-12 で全体をくくる。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="col-sm-12"> <h1>Home#index</h1> <p>Find me in app/views/home/index.html.erb</p> <% if user_signed_in? %> Logged in as <strong><%= current_user.email %></strong>.<br/> <%= link_to 'プロフィール変更', edit_user_registration_path %> | <%= link_to 'ログアウト', destroy_user_session_path, method: :delete %> <% else %> <%= link_to "サインイン", new_user_registration_path %> | <%= link_to "ログイン", new_user_session_path %> <% end %> </div> |
ログイン時の画面を bootstrap 化
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="card col-sm-5 mx-auto mt-5"> <div class="card-body"> <h3 class="mt-1 mb-3">ログイン</h3> <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> <div class="form-group"> <%= f.label :email, "メールアドレス", :class => "form-label" %> <%= f.email_field :email, autofocus: true, autocomplete: "email", :class => "form-control" %> </div> <div class="form-group"> <%= f.label :password, "パスワード", :class => "form-label" %> <%= link_to "パスワードを忘れた場合", new_user_password_path, :class => "float-right" %> <%= f.password_field :password, :class => "form-control" %> <% if devise_mapping.rememberable? %> <div class="form-check"> <%= f.check_box :remember_me, :class => "form-check-input" %> <%= f.label :remember_me, "ログインを記憶", :class => "form-check-label" %> </div> <% end %> </div> <div class="actions"> <%= f.submit "ログイン", :class => "btn btn-primary btn-block" %> </div> <% end %> <div class="small text-muted text-center mt-4">新しいユーザですか?</div> <%= link_to "アカウントを作成", new_user_registration_path, :class => "btn btn-light btn-block border mt-1" %> </div> </div> |
ユーザ登録画面の bootstrap 化
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="card col-sm-6 mx-auto mt-5"> <div class="card-body"> <h3 class="mt-1 mb-3">アカウントを作成</h3> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> <div class="form-group"> <%= f.label :email, "メールアドレス", :class => "form-label" %> <%= f.email_field :email, autocomplete: "email", :class => "form-control" %> </div> <div class="form-group"> <%= f.label :password, "パスワード (%s文字以上)"%@minimum_password_length, :class => "form-label" %> <%= f.password_field :password, :class => "form-control" %> </div> <div class="form-group"> <%= f.label :password_confirmation, "もう一度パスワードを入力してください", :class => "form-label" %> <%= f.password_field :password_confirmation, :class => "form-control" %> </div> <div class="actions"> <%= f.submit "アカウントを作成する", :class => "btn btn-primary btn-block" %> </div> <% end %> <div class="mt-2"> すでにアカウントをお持ちですか？<%= link_to "ログイン", new_user_session_path %> </div> </div> </div> |
ユーザ編集画面の bootstrap 化
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<div class="card col-sm-6 mx-auto mt-5"> <div class="card-body"> <h3 class="text-center mt-1 mb-4">アカウントを編集する</h3> <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> <div class="form-group"> <%= f.label :email, "Eメール", :class => "form-label" %> <%= f.email_field :email, autocomplete: "email", :class => "form-control" %> </div> <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div> <% end %> <div class="form-group"> <%= f.label :password, "パスワード", :class => "form-label" %> <span class="small">(パスワードを変更しない場合は記入しないでください。)</span> <%= f.password_field :password, :class => "form-control" %> <% if @minimum_password_length %> <div class="small form-text text-muted">最低<%= @minimum_password_length %>文字以上</div> <% end %> </div> <div class="form-group"> <%= f.label :password_confirmation, "パスワード(確認)", :class => "form-label" %><br /> <%= f.password_field :password_confirmation, :class=>"form-control" %> </div> <div class="form-group"> <%= f.label :current_password, "現在のパスワード", :class => "form-label" %> <%= f.password_field :current_password, :class => "form-control" %> <div class="small form-text">変更のために現在のパスワードを入力してください。</div> </div> <div class="actions"> <%= f.submit "更新する", :class => "btn btn-primary btn-block" %> <%= link_to "キャンセルして戻る", :back, :class => "btn btn-secondary btn-block" %> </div> <% end %> </div> </div> |
ここまでの設定でそこそこのデザインのログイン関連の画面ができました。
