Rails6アプリにBootstrap4を導入してみた【初心者向け】

11495 ワード

Bootstrap Rails CSS CSS テキストリンク

この記事の対象者

Ruby on Rails6（以下、Rails6）を学び始めの方
Rails6でBootstrap4を使ってみたい方
プログラミング初心者(書いてる人も初心者です)
エンジニアを目指してポートフォリオ作成中で、サクッとイイ感じのCSSを当てたい方
Rails6にBootstrap4使いたいけど、記事によって記述が違うので、どの方法でインストールしようか迷ってる方

↑自分自身がこのような状態だったので、記事にしようと思いました。

（追記：注意事項 2020/12/25）
ローカル開発環境では下記の通りで適用できます。
しかし、herokuやAWSといった本番環境(production)だとBootstrapが反映できないため、恒久対応方法を確認中です。

暫定対応している方法は最後のほうに記載しました。

目標

Rails6でBootstrap4を使うスタートラインに立つ

そのためこの記事は、Rails6アプリにBootstrap4をインストールし、動作確認をするまでの手順を書いています。

そもそもBootstrapとはなんぞや？

Bootstrapとは、HTML・CSS・JavaScriptを利用したWebデザインフレームワーク。
レスポンシブルデザインでスマートフォンなどの端末表示にも対応。
なので、アプリの見た目をサクッと見栄えよくさせたいときにオススメ。
Bootstrap公式サイト

Bootstrap5のα版＝テスト版も出ているようです(2020年12月現在)
この記事は「Bootstrap4導入」の記事です。ご注意を。

Bootstrap4の導入方法について

Rails6にBootstrap4を導入する方法は、gemで導入する方法とwebpackerを利用する方法と複数ありますが、今回は後者の「webpackerを利用」することにしました。

導入前にググったところ、gem導入だとBootstrapのカスタマイズができない（？）とかの記事が散見されたり、自分で一回gem方式で導入して何だかしっくりこなかったので…

それぞれのメリット・デメリットは、時間があれば追ってみようと思います。

さて、作業してみましょう。

おっと、導入作業の前に…

yarnはインストールしてある前提で進めます（既にインストール済みの方多いと思いますが）
またBootstrap4を適用するRailsプロジェクト(アプリケーション)は、 rails new で作成しておいてください。

作業環境(参考)

参考までに、私の作業環境は下記の通りです。

MacOS Catalina 10.15.7
Ruby 2.6.5
Ruby on Rails 6.0.3.4

導入予定のBootstrap4関連一式(参考)

今回インストールするBootstrap4関連ファイルは下記の通り。
Bootstrap4と一緒に、関連ファイルのjQuery、popper.jsも導入します。
(2020年12月時点)

Bootstrap4.5.3
jQuery 3.5.1
popper.js 1.16.1

手順

インストールする。

ターミナルで yarn add bootstrap jquery popper.js を入力して実行。

上記コマンドでBootstrap4はもちろん、一緒にjQuery、popper.jsもインストールできました。
(厳密にバージョン指定したければ yarn add [email protected] [email protected] [email protected] のような書き方がいいかも)

application.jsにBootstrapを読み込む内容を記述。

以下のような感じで。

app/javascript/packs/application.js

# <省略>
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")

# 以下2行を追記
import 'bootstrap'  # <-追記
import 'bootstrap/scss/bootstrap.scss'  # <-追記

# <省略>

スタイルシートの拡張子を変更。

(追記:2020/12/23)この作業はSCSSではなく普通にCSS使う方は不要かも。

app/assets/stylesheets/application.css → application.scss のように拡張子を変更。
デフォルト記載の項目は全削除しました。

他のCSSファイルを読み込みたい場合は、application.scssに適宜追記してください。

app/assets/stylesheets/application.scss

@import "hogehoge.css";

※私はBootstrap用のReset.cssをimportしたりしました。
Reboot.css参考: Colissさんの記事

動作確認

導入できたら、動作確認します。
index.html.erb内に、Bootstrapのclassを適用した文言を書いてみます。
下記のような記述なら、実際に表示して文字が黄色・背景が青で表示されたら適用済み。
Bootstrapの導入作業は完了です。

index.html.erb

<!-- 文字色:黄色、背景色:青 -->
<p class="text-warning bg-primary">Bootstrapテスト</p>

本番環境でBootstrapが反映されない時の暫定対応

(追記: 2020/12/25)
本番環境(production。私の場合はAWS EC2利用でした)にデプロイしたところ、Bootstrapが反映されない自体に遭遇。
ブラウザの検証ツールで確認したところ、Bootstrap関連ファイルがうまく読み込めてないかもしれません。
（アセットパイプライン関連な何か？）

そこで力技ですが、本番環境のときだけ、外部ライブラリを参照して暫定対応することにしました。
Bootstrap公式のjsdelivrのタグを直接読み込むことにしました。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Fishing Archive</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all' %>

    <%#= ここからBootstrap本番反映の暫定措置。本番のときだけ反映する。 %>

    <% if Rails.env.production? %>
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <% end %>

    <%#= ここまでBootstrap本番反映の暫定措置 %>

    <%= javascript_pack_tag 'application' %>
  </head>

恒久対応策が分ったら追記します。

最後に

Bootstrapはちょっとしたデザインには便利ですね。いろいろ触って遊んでみようと思います！

なお初めてのQiita投稿ということで、マークダウン記法の練習も兼ねて書きました。
RailsもBootstrapも初心者なので、説明不足や誤りあれば指摘いただけると幸いです。

Author And Source

この問題について(Rails6アプリにBootstrap4を導入してみた【初心者向け】), 我々は、より多くの情報をここで見つけました https://qiita.com/tech_o_z/items/12a2a7a8debb6b83a5d3

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

CentOs Hyperledger Fabricを構築する簡単な手順

生気試験C++アルゴリズムでよく使われる関数を研究する