前のパートに戻る 完了して次のパートへ  

  2-3 bootstrapとfont-awesome-sassの導入

Bootstrapの導入


今回のパートではBootstrapを導入します。

Bootstrapはもっとも有名なCSSのフレームワークで、CSSを細かく指定せずにサイトをある程度形にできます。レスポンシブルにも対応してくれる便利なツールです。Bootstrapを導入するとWebアプリケーションを効率よく開発できます。

(今回のBootstrap4のgemの公式ドキュメントのこちらを https://github.com/twbs/bootstrap-rubygem 参考にしてます)

Bootstrapについて詳しく勉強したい方は以下動画をご覧ください。

Bootstrap 4入門

この章で学べること


- Bootstrapの導入方法
- Gemのインストール
- font-awesome-sassの導入方法

学習キーワード


- Bootstrap
- scss
- font-awesome-sass

gemをインストール


Deviseの設定をした時もまずはgemをインストールしたようにBootstrapに関してもまずはgemをインストールします。

下記のコードをGemfileに追加します。バージョンは4.1.3に指定しています。

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

Gemfileを編集した時は、gemfile.lockを更新するために、bundle install をすることによって追加したgemを反映させます。Gemfileは必要なgemリストでGemfile.lockには実際にインストールしたgemリストが入っております。

$ bundle install

これでgemを追加できました。

app/assets/stylesheets/内にapplication.scss を作成する

次に、app/assets/stylesheets/内にapplication.scssというファイルを作成します。

(app/assets/stylesheets/内にあるapplication.cssというファイルは削除します)

作成したら、そのファイル内で下記のコードを追加します。下記のコードはbootstrapをimportする(使えるようにする)という指示です。 application.scssファイルを以下のように編集してください。

app
└── assets
    └── stylesheets
        └── application.scss

app/assets/javascripts/application.jsにコードを追加する


app/assets/javascripts/application.jsに以下のコードを追加します。

下記はjquery3とpopperとbootstrap-sprocketsを使えるようにするという指示です。 それぞれBootstrapを使うために必要なライブラリです。 読み込みの順番も関係があるので下記の順で読み込みましょう。 cssの場合はimportで読み込みましたが、jsの場合はrequireを使って読み込みます。

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

の3つを追加します。

このときの注意点として、すでにかかれている以下の記述が一番下になるように追記してください。

//= require require_tree .

理由としては、 require_tree . で読み込むものはjquery3などのコードが先に読み込まれている必要があるからです。

app/assets/javascripts/application.jsに以下のコードを追加してください。

app
└── assets
    └── javascripts
        └── application.js

以上でBootstrapの導入は終了です。

Bootstrapが導入されたかの確認


実際にBootstrapが機能するか確認します。

Bootstrapの公式ドキュメントを参考にフラッシュメッセージへBootstrapのクラスを当てます。

app/views/layouts/application.html.erbを以下のように編集してください。

app
└── views
    └── layouts
        └── application.html.erb

コードを追加したら、まずローカルサーバーを再起動してください。 先ほどBootstrapのGemを追加しましたが、サーバーを一度再起動したないと追加したGemが反映されないからです。 再起動したら、実際にhttp://localhost:3000/users/sign_inへアクセスしてください。 フォームに何も入力せずにログインしようとすると、下記の画像のように赤いスタイルが表示されていたらうまく動作しています。

68747470733a2f2f70726f636573732e66732e746561636861626c6563646e2e636f6d2f41444e75704d6e577952376b435752766d37364c617a2f726573697a653d77696474683a313030302f68747470733a2f2f7777772e66696c657069636b65722e696f2f6170692f66696c652f6c3336747573486d.png

font-awesome-sassの導入


font-awesome-sassを導入することで、Font-AwesomeというアイコンをWebフォントとcssで提供します。

公式ドキュメントはこちらです。

https://github.com/FortAwesome/font-awesome-sass

font-awesome-sassのインストール


font-awesome-sassを導入するには、Gemfileに以下のコードを追加します。

次にbundle installを行います。

$ bundle install

次にapp/assets/stylesheets/application.scssに以下のコードを追加します。

app
└── assets
    └── stylesheets
        └── application.scss

以上でfont-awesome-sassの導入は終了です。

議論
51 質問
このコースの評価は?