Day 5： はじめての Bootstrap

/
#cebu#rails#bootstrap

from Qiita：Bootstrapを初めて触ってみた

Environment

仮想環境 OS: Ubuntu 18.04 Ruby 2.5.1p57 Rails 5.2.2 MySQL

What is Bootstrap

Bootstrapホームページトップより

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

preparation till rails s

undefined
1
rails new private_butostrap -d mysql
2
#Gemfileのmini-racerコメントイン
3
bundle install
4
/config/database.ymlのパスワード情報追加
5
rails db:create
6
rails s  # 一応確認

Scaffoldでテーブル作成

undefined
1
# rails g scaffold (コントローラ名/モデル名)　カラム名：データ型　・・・
2
rails g scaffold User name:string email:string sex:integer age:integer address:integer attendance:integer opinion:text

rails db:migrate

undefined
1
rails db:migrate
2
# 一応確認として
3
use private_butostrap_development;
4
show table;

consoleでデータ追加

undefined
1
(1..100).each do |num|
2
  if num % 2 == 0
3
    s = 0
4
    ad = 0
5
    at = 0
6
  else
7
    s = 1
8
    ad = 1
9
    at = 1
10
  end
11


12
  user = User.create(name: "taro-#{num}", email: "val-#{num}@gmail.com", sex: s, address: ad, attendance: at, opinion: "nothing special-#{num}")
13
  user.save
14
end

Bootstrapで見栄え修正

ButostrapのCSSの読み込み

app/views/layouts/application.html.erb
1
<!-- <head>の中で読み込む -->
2
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
3


4
<!-- <body>の中で読み込む -->
5
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
6
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
7
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

リンクが青くなった。

indexページのNewUserボタンの変更

app/views/users/index.html.erb
1
# 元のコード
2
<%= link_to 'New User', new_user_path" %>
3
# Bootstrap用のclass追加
4
<%= link_to 'New User', new_user_path , class: "btn btn-primary"%>

同様に show、edit、destroy ボタンも変更

tableの見栄えも変更

app/views/layouts/application.html.erb
1
<!-- # 元のコード -->
2
<table>
3
<!-- # 修正後 -->
4
<table class="table table-hover table-dark">

jsファイルの挿入部分を考える

授業のなかで言われたこと

  • head か body どうかが、ユーザビリティに影響を与える
    • head 内：js ファイルが重い場合は、js ファイルが読み込まれるまで、ページが表示されない
    • body 内：先にページが表示されて、その後に js ファイルが読み込まれる
    • HTML 解析前に実行されるべき js ファイルなどは head タグ内に記述するべし

ページ読み込み時間は、ユーザーの直帰率等に影響を及ぼす

一次データ:Does Page Load Time Really Affect Bounce Rate? pingdom

上の一次データによると、ページ読み込み時間 3 秒までは直帰率は 10％弱だが、5 秒で 38%、7 秒で 50%を超える