#GWアドベントカレンダー 「1つサービスを作る」の3日目記事 Bootstrap4適用

以下の GWアドベントカレンダー 「1つサービスを作る」の3日目記事です。

gw-advent.9wick.com

Bootstrap4を適用していきます。

ログイン後のリダイレクト

やり残したことを対応します。
after_sign_in_path_for はログイン後のリダイレクト先、after_sign_out_path_forはログアウト後のリダイレクト先です。

app/controllers/application_controller.rb に追記します。

class ApplicationController < ActionController::Base
  private

  def after_sign_in_path_for(resource)
    user_path(resource)
  end

  def after_sign_out_path_for(resource)
    root_path
  end
end

参考にしました。

github.com

bootstrapに対応

getbootstrap.com

Railsで使うにはドキュメントにあるように gem 'bootstrap', '~> 4.4.1'を行えば良いようです。 getbootstrap.com

しかし、色々と調べてみると、一番良いのは、こちらのドキュメントでしょうかね？

github.com

Gemfile に2つのgemを放り込みます。

gem 'bootstrap', '~> 4.4.1'
gem 'jquery-rails'

そしてbundle installする。

次にapplication.cssをapplication.scssにリネームする。

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

app/assets/stylesheets/application.scss を編集して@import "bootstrap";を追記する。

そして、JSのディレクトリが無いので作成する。

mkdir -p app/assets/javascript/

その後、app/assets/javascript/application.jsを以下の内容で新規に作成する。

//= require jquery3
//= require popper
//= require bootstrap

動作確認

app/views/users/show.html.erb を以下のように編集します。
bootstrap メディアオブジェクトを適用します。

<div class="media">
  <a href="<%= @user.twitter %>" class="align-self-start mr-3">
    <img src="<%= @user.image %>">
  </a>
  <div class="media-body">
    <h5 class="mt-0"><%= @user.name %></h5>
    <p><%= @user.description %></p>
    <p><%= @user.website %></p>
    <p><%= @user.twitter %></p>
  </div>
</div>

そして rails サーバーを再起動してTwitterログインすると、プロフィール画面が少しだけきれいに表示されました。