Bootstrapを導入して，見た目を少し整える．
Bootstrapのインストール
Webpacker, jquery, popper.js, bootstrapをインストールする（Gemfileに gem ‘webpacker’ が既に書いてあることを確認して，もし，なかったら追加してbundle instしておくこと）．
【手順】
bin/rails webpacker:install
yarn add jquery bootstrap popper.js
Bootstrapの設定
各種の設定を変更して，Bootstrapを適用する．
【手順】
vi app/javascript/packs/application.js
（ファイル末尾に以下を追記）
import 'jquery/dist/jquery.js'
import 'popper.js/dist/popper.js'
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
vi app/views/layouts/application.html.erb
（以下を修正）
<%= stylesheet_link_tag 'application', …
↓
<%= stylesheet_pack_tag 'application', …
vi config/webpack/environment.js
（以下を追記）
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
Popper: 'popper.js/dist/popper'
})
)
module.exports = environment
Bootstrapのテスト
Bootstrapが正しく設定されたかどうかをテストする．
【手順】
vi app/views/home/index.html.erb
（末尾に以下を追記）
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
サーバを起動し，ログイン後に http://localhost:3000 へアクセスし，Bootstrapでデコレートされたボタン一覧画面が出ることを確かめる（確認後はapp/views/home/index.html.erbを元に戻しておくこと）．
Home#indexの微修正
ところで，これは本来，アクセスできてはいけない画面である．ログインしていない状態であれば，before_action :authenticate_user!, only: :index の記述でハネられるが，ログイン後は先のようにアクセスできてしまう．これを防ぐために，home_controller.rbを以下のように修正する．リダイレクトの指定を入れておくことで，ログイン後に http://localhost:3000/ へアクセスすると，そのユーザーのマイページにリダイレクトされるようにできる．
【手順】
vi app/controllers/home_controller.rb
（以下を追記）
class HomeController < ApplicationController
before_action :authenticate_user!, only: :index
def index
redirect_to user_path(current_user.id)
end
end
見栄えの修正
Bootstrapの導入に合わせて見栄えを修正する．なお，ナビゲーションバーに「home」ボタンを付け加え，いつでも自分の「マイページ」に戻れるようにした．また，noticeあるいはalertのメッセージが存在しないときは，表示しないような細工を施したこと（ヘッダのスタイル指定の部分）と，ログイン中ユーザーの氏名をナビゲーションバー部分に表示するようにしたことに注意されたい．
【手順】
vi app/views/layouts/application.html.erb
（以下のとおり修正）
<!DOCTYPE html>
<html>
<head>
<title>SBP</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_pack_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application',
'data-turbolinks-track': 'reload' %>
<style>
.alert:empty {
display: none;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-dark">
<% if user_signed_in? %>
<div class="btn btn-success">
<%= link_to 'home', user_path(current_user.id),
class: 'text-white' %></div>
<div class="text-white">
<%= current_user.fullname %></div>
<div class="btn btn-danger">
<%= link_to 'logout', destroy_user_session_path,
method: :delete, class: 'text-white' %></div>
<% else %>
<div class="btn btn-primary">
<%= link_to 'login', new_user_session_path,
class: 'text-white' %></div>
<div class="text-white">miniP</div>
<div class="btn btn-success">
<%= link_to 'sign up', new_user_registration_path,
class: 'text-white' %></div>
<% end %>
</nav>
</header>
<div class="alert alert-info" role="alert"><%= notice %></div>
<div class="alert alert-warning" role="alert"><%= alert %></div>
<div class="container">
<%= yield %>
</div>
</body>
</html>
vi app/views/users/ahow.html.erb
（以下のとおり修正）
<h1>MyPage for <%= @user.fullname %></h1>
<% if @students != nil %>
<p>
<% @students.each {|st| %>
<%= link_to st.fullname, user_path(st.id),
class: 'btn btn-light' %>
<% } %>
</p>
<% end %>
<div class="form-group">
<%= form_with model: Post.new do |f| %>
<%= f.text_area :body, placeholder: 'Add your comment',
class: 'form-control', rows: 10 %>
<%= f.hidden_field :id, { value: @user.id } %>
<%= f.submit 'submit', class: 'btn btn-primary' %>
<% end %>
</div>
<% if @posts != nil %>
<% l = @posts.length; @posts.each_with_index {|post, i|
sid = post.submitter
sname = (sid != nil) ? User.find(sid).fullname :
'Anonymous ' %>
<div class="card">
<div class="card-header">
<%= (l-i).to_s + " : " %>
<%= (sid != nil) ? (link_to sname, user_path(sid)) :
sname %>
<%= post.created_at.to_s %></div>
<div class="card-body">
<%= simple_format(h(post.body)) %></div>
</div>
<% } %>
<% end %>
確認
サーバを起動し，teacher（user000）, student（user001）それぞれのマイページが適切に表示されていることを確認する．
0 件のコメント:
コメントを投稿