何をしたか
Railsの課題を実施しています。装飾に関しては、Material Design for Bootstrapを使用することになっていたのですが、WebpackerではないJS系のライブラリの導入が久しぶりで...。
だいぶ忘れていたので手順をメモします。
なお、実行環境は以下の通りです。
- Rails 5.2.3
- Ruby 2.6.4
Material Design for Bootstrapとは？
Material Design for Bootstrap（以下、MDB）は、Googleのマテリアルデザインに準拠した、Bootstrapのフレームワークです。
Githubの公式レポジトリに、色々便利なリンクがありました
導入
MDBは5.0系からは、jQueryを前提としたものではなくなっています。先にもあげたこちらのダウンロードリンクからは、さまざまなJSフレームワークに対応したものが入手可能です。
今回は、MDBの4.1.1を利用するので、jQueryの導入から始めます。
jQuery
Rails5.1からは、RailsにjQueryはデフォルトで入っていないので、別途導入する必要があります。
Gemfileに以下のように記載し、、、
gem 'jquery-rails'
bundle installします。
application.jsには以下のように追記しましょう。(require turbolinksは取ってしまっています)
//= require jquery # 追記
//= require rails-ujs # 追記
//= require activestorage
//= require_tree .
MDB本体の導入
MDB本体はnpmでダウンロードします。gemもあるのですが、うまく動かない、とのことでカリキュラムではnpmが推奨されていました。サイトを見る限り、少し古そうですね。。。
$ npm install bootstrap-material-design@4.1.1
必要なファイル類の読み込み
すみません、ここからはお手本コードの写経であまり深く整理できていないのですが、MDBを動かすために必要なcssファイルを読み込みます。
@import 'bootstrap-material-design/dist/css/bootstrap-material-design';
ここまでで、自分の環境ではCSSと基本的なJSに関するMDBは動作しました。
おそらく、tooltipなど特定のものに関しては、依存するライブラリpopper.jsなども必要になるはずとは思います＾＾。
まだ、使用する場面はアプリ内にはないので、できたら追記しようかとは思いますが、ここまでで一旦記事はリリースしようと思います。
なにか過不足などありましたら、ご指摘いただければ嬉しいです。