【Rails6】Bootstrapテンプレートを適用してみた
はじめに
Rails6でポートフォリオサイトを開発しています。
デザインをどうしようかなと考えているときに、
Bootstrapテンプレートを使用すれば簡単におしゃれなサイトを作れると見かけました。
そんなこんなでBootstrapテンプレート適用します。
Bootstrapテンプレート
まずBootstrapを簡単に説明すると、
容易にサイトのデザインを整えてくれる
フロントエンドのフレームワークです。
cssとかいじらなくても、少ない知識で良さげなデザインにできるんですね。
さらにBootstrapテンプレートでは
Bootstrapを使用してほぼ完成されたデザインが提供されているということですね。
自分のサイト用に修正は必要ですが、デザインを考える手間を考えるとめっちゃ便利。
そもそも自分で考えてもおしゃれにできませんし。。。
Bootstrapについては下記のサイトなんかも参考にすると良いかもしれません。
Bootstrapテンプレート適用の手順
テンプレートをダウンロードしてファイルを開けば、
完成されたWEBページを確認することができます！
が、今回はRails6に合わせて適用することが目的ですので、
Railsのルールに合わせるっていうところが結構手間でした。
あとフォントと一部のjsはエラーのままで修正することができませんでした。。。
しかし、デザインはなんとか適用できたのでそれまでの手順を残しておきます。
Bootstrapテンプレートのダウンロード
今回はめちゃんこおしゃれな下記のテンプレートを使用します。
画像の赤枠のところからダウンロードできます。
ファイルはこんな感じになってます。
cssフォルダを配置
ダウンロードした css フォルダを丸々 app/assets/stylesheets/ 配下にコピペします。
下記のフォルダ構成になります。
app/assets/stylesheets/css
jsフォルダを配置
次にjs フォルダを丸々 app/javascript/ 配下にコピペします。
jsはRails6以前のフォルダ構成と違っているので設置場所に注意しないといけないです。
下記のフォルダ構成になります。
app/javascript/js
imgフォルダを配置
imgフォルダを public/ 配下にコピペします。
下記のフォルダ構成になります。
public/img
fontawesomeのインストール
fontawesomeを使用するため、gemのインストールを行います。
Gemfileに下記を記述して、
gem 'font-awesome-rails'
bundleでインストールします。
$bundle install
使用ファイルの設定
cssとjsフォルダのファイルとfontawesomeは使用するための設定が必要なようです。
下記の記述を追記してください。
↓見づらいですが、ドラッグすると見えます。。
app/assets/stylesheets/application.scss
@import "css/bootstrap.min"; @import 'css/mdb.min'; @import 'css/style.min'; @import "font-awesome";
app/javascript/packs/application.js
require("js/jquery-3.4.1.min")
require("js/popper.min")
require("js/bootstrap.min")
require("js/mdb.min")
あとは...
作業の記録を残していなかったので曖昧ですが、
headタグのcssの読み込みやbodyタグの最後の方にあるscriptタグの中身で
使用しないものを消すとエラーも消えていたとはずです。
これで一部を除いてOK
一応デザインは完成しました！ 動画等を変えて少し修正しました。
一部エラーが残っています。
chromeの開発者ツール（F12キー）で確認できます。
(警告の部分は改修しているうちに出てきた模様)
参考にした記事
https://coliss.com/articles/build-websites/operation/work/material-design-for-bootstrap4.html
終わりに
作業記録を逐一残しとくの大事。
