Edited at

Rails Tutorialの知識から【ポートフォリオ】を作って勉強する話 #3 Bootstrap4, jQueryプラグイン導入編


こんな人におすすめ


  • プログラミング初心者でポートフォリオの作り方が分からない

  • Rails Tutorialをやってみたが理解することが難しい

  • ポートフォリオを作成しながら勉強したい

前回:#2 RSpec導入編

次回:#4 System spec導入編


こんなことが分かる


  • Bootstrap4の導入方法

  • jQueryプラグインの導入方法

  • jQuery Ripplesの使い方

一緒に勉強しよう!:bow:


Bootstrapを3ではなく4にする

Tutorialで使用しているBootstrapは3。欲しいのは4。

安易にTutorial通りにGemを追加してはいけないし、ファイルもいじる必要があるらしい。

大まかな工程は以下の通り。


  1. Gemfileにbootstrapとjquery-railsを追加

  2. application.cssをapplication.scssにする

  3. application.scssを編集

  4. application.jsを編集


1. Gemfileにbootstrapとjquery-railsを追加


Gemfile

+ gem 'bootstrap', '~> 4.3.1'

+ gem 'jquery-rails'

書く場所はTutorialの通りgem 'rails'のすぐ下でOK。

Bootstrap3と異なるのは2つ。


  1. 'bootstrap-sass'ではなく'bootstrap'

  2. Rails 5.1以上の場合'jquery-rails'を入れる

2つ目に言及すると、

「BootstrapはjQueryに依存しているが、Rails 5.1以上にはjQueryが入っていないのでインストールする必要がある」

らしいです。


bash

$ bundle install


インストール完了。


2. application.cssをapplication.scssにする

app/assets/stylesheets/application.cssのファイル名を.scssに変更。


3. application.scssを編集

以下を削除。


app/assets/stylesheets/application.scss

- *= require_tree .

- *= require_self

一見コメントアウトに見えますが、違うので削除。

以下を最後に加えます。


app/assets/stylesheets/application.scss

@import "bootstrap";



4. application.jsを編集

以下を最後に加えます。


app⁩/assets⁩/⁨javascripts/application.js

//= require jquery3

//= require popper
//= require bootstrap-sprockets

これで使えるらしいぞー。

参考にさせていただきました↓

Bootstrap Ruby Gem(GitHub)

Railsアプリで Bootstrap 4 を利用する


ホーム画面をつくってみる

長かったけど、いよいよホーム画面をつくりだす。

といっても記事では一瞬。とりあえず完成形。その後解説。



ロゴはIllstratorで作成、アイコンはICOON MONOを使用。

(ICOON様良いのに)超ありふれてるーーー。


Bootstrapでデザインする

ホーム画面はヘッダー、画像部分、紹介部分の3部構成。


app/views/layouts/_header.html.erb

<header>

<nav class="navbar navbar-expand-sm navbar-dark fixed-top navbar-extend">
<a class="navbar-brand" herf="#">
<div class="navbar-brand-extend">
<%= link_to image_tag('lantern_lantern_logo.png', width: 50), root_path, class: "logo-img" %>
<%= link_to image_tag('lantern_lantern_text.png', height: 30), root_path, class: "logo-text" %>
</div>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div id="menu" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><button class="btn btn-info btn-md">Login</button></a></li>
</ul>
</div>
</nav>
</header>


app/views/static_pages/home.html.erb

<div class="jumbotron jumbotron-fluid jumbotron-extend">

<div class="container">
<h1>動画を愛そう。</h1>
<p>動画をみる時、人生は幸せ?それとも罪悪感?</p>
<p>Lantern Lanternは、学習と娯楽に費やした動画時間を入力し、</p>
<p>1日の、1ヶ月の、1年の動画時間を計測します。</p>
<p>Lantern Lanternは、動画の時間を貯金します。</p>
<%= link_to "はじめる", signup_path, class: "btn btn-info btn-lg" %>
</div>
</div>

<div class="container">
<div class="container discription-container">
<div class="row">
<div class="col-md-4">
<div class="discription-img-container">
<%= image_tag 'movie.png', class: 'discription-img' %>
</div>
<h2>動画時間を入力</h2>
<p>動画の視聴時間を入力することで動画に使った時間を可視化することが可能です。</p>
</div>
<div class="col-md-4">
<div class="discription-img-container">
<%= image_tag 'art.png', class: 'discription-img' %>
</div>
<h2>学習時間も娯楽時間も</h2>
<p>動画は単に暇つぶしのためだけのものではありません。学習など有効的に活用し記録することで有意義と感じる心理的効果が期待できます。</p>
</div>
<div class="col-md-4">
<div class="discription-img-container">
<%= image_tag 'memo.png', class: 'discription-img' %>
</div>
<h2>日記にも使える</h2>
<p>ログ機能によりどんな動画を観たのかどんな感想を持ったのかを記録することも可能です。動画との人生を豊かにする日記となるでしょう。</p>
</div>
</div>
</div>
</div>



app/assets/stylesheets/application.scss.erb

// 中略

@import "bootstrap";

$lantern-light-white: #f5f5f6;
$lantern-dark-white: #cdced1;
$lantern-black: #050c17;
$lantern-red: #b1046b;
$lantern-violet: #640c41;
$lantern-yellow: #bdb319;
$lantern-blue: #0071bc;
$lantern-dark-blue: #0c2e64;

body {
background-color: $lantern-black;
}

// header

.navbar-extend {
margin-bottom: 0;
background-color: $lantern-black;
opacity: 0.9;
ul li a button {
padding: 0.375rem 1.5rem;
}
}

.logo-img:hover {
opacity: 0.6;
}

.logo-text {
padding-top: 2px;
:hover {
opacity: 0.6;
}
}

// jumbotron

.jumbotron-extend {
background-image: url(<%= asset_path "shinkai_01.jpg" %>);
background-size: cover;
background-repeat: no-repeat;
.container {
margin-top: 6rem;
h1,
p {
margin-bottom: 0.75rem;
color: $lantern-light-white;
}
h1 {
margin-bottom: 1.5rem;
}
p:last-of-type {
margin-bottom: 2rem;
}
}
}

// discription

.discription-container h2, .discription-container p {
color: $lantern-light-white;
}

.discription-container {
margin: 3rem 0;
padding: 3rem 1rem;
h2 {
font-size: 1.6rem;
text-align: center;
margin-bottom: 1.8rem;
}
p {
font-size: 1rem;
line-height: 2.1rem;
}
}

.discription-img-container {
margin-bottom: 3rem;
text-align: center;
}

.discription-img {
width: 12rem;
border-radius: 0.1rem;
}


このあたりの書き方はBootstrap公式を頼ろう。超分かりやすい。

画像はTutorialの通りapp/assets/images/に配置。

navbarは縮小でハンバーガーに、discriptionはグリッドで整える。

jumbotronに深海の画像を挿入しているけど、こっちはscssで対応。

assetsに画像を配置しているのでasset_pathを使用。

それにともなってapplication.scssを.scss.erbに変える(じゃないと動かない)。


jQueryプラグインを導入

深海の背景にjQuery Ripplesというプラグインを使用して水の波紋を実装する、、

、、、プラグインってどうやって使うの??(無知)

お恥ずかしながらまずはrailsでのjsプラグインの使い方を調べる。


vendor

|

|----/assets

  |

  |---- /javascripts

    |

    |---- プラグイン

(引用一部改変)


なるほどプラグインはvendorに置くのか。ディレクトリ作成。


bash

$ mkdir vendor/assets

$ mkdir vendor/assets/javascripts

じゃあ次にjQuery Ripples(GitHub)をダウンロードする。

(ちなみにGitHubのダウンロード方法すら知りませんでした...ヤヴァイ)

ダウンロードしたらdist内にあるjquery.ripples-min.jsをvendor/assets/javascriptsに入れる。

次にapplication.jsを再びいじる。

//= require_tree ../../../vendor/assets/javascripts/.

プラグインを呼ぶためにこれを追加する必要があるんだけど、assetsツリーより前にvendorツリーを読み込む必要がある。

つまり追加する順番が大事↓


app⁩/assets⁩/⁨javascripts/application.js

// 中略

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree ../../../vendor/assets/javascripts/.
//= require_tree .

これでようやく処理が書ける。処理はこの直後に書けばいいっぽい。


app⁩/assets⁩/⁨javascripts/application.js

// 中略

$(document).ready(function() {
$('.jumbotron').ripples({ //波紋をつけたい要素の指定
resolution: 800, //波紋の広がりの速度(値が大きいほど遅くなる)
dropRadius: 30, //波紋の大きさ(値が大きいほどでかくなる)
perturbance: 0.002 //波紋による屈折量(値が大きいほどブレる)
});
});

な、なんとか動いたぞー。

参考にさせていただきました↓

【jQuery】リアルな波紋模様を再現する[jQuery Ripples]を使ってみる。

波紋を作るjQueryプラグイン「jQuery Ripples」

【Rails入門】5分でできるjQuery導入方法!初心者向けにまとめました


次回はホーム画面のE2Eテストへ

いよいよやばいところに突入。迫りくるMVCのMC、訳わからないRSpecの魔の手!

SAN値を守り続けることができるのか!

前回:#2 RSpec導入編

次回:#4 System spec導入編