Rails6 で Material Design for Bootstrap を使う

投稿者: | 2019年10月30日

Rails6 で Material Design for Bootstrap を使おうとしたのですが、ネット上にある情報だけではうまく動かなかったので、使うまでの手順をまとめておきます。といっても、重要なのは JQuery を動くようにキッチリ設定することと、app/view/layouts/application.html.erb 等で、きちんと MaterialDesignForBootstrap を使うように script タグを書くだけです。

Rails6 アプリの準備

まずはいつもどおりに Rails6 アプリケーションを作成します。ただし、webpacker を前提にして、
turbolinks とか sprockets は使わないようにします。ほぼいつもの手順なので、細かいことは書きません。

turbolinks とか sprokets は使わない。

ディレクトリ構成の変更

asset パイプラインは使わないので消してしまう。あと、app/javascript 配下に stylesheet とかがあるのも気持ち悪いので webpacker の設定変えて、app/frontend に変更してしまう。

webpacker の設定変更

config/webpacker.yml を変更。webpacker の source_path を変更する。ついでに css 読み込むのが遅くて画面がペコペコ動くのが嫌なので extract_css も true にしておく。

サンプルページの作成

いつものように home#index を作って、default のページをこれに設定。んで、画面確認。

Material Design for Bootstrap の導入

パッケージのインストール

もろもろ読み込み設定

 

ボタンのデザイン確認

home#index に Material Design なボタンを追加して確認してみる。

ここまででデザインの適用ができることは確認できた。

JQuery が動くように設定

じつはこのままでは Material な感じに画面をニュルニュルさせる Javascript が動かないので、JQuery が動くように設定します。

Javascript が動くように設定

ここで色々失敗しました。ちゃんとドキュメント読んでドキュメント通りに設定しましょう。

app/view/layouts/application.html.erb で Material Design for Bootstrap の Javascript を動かすように設定

form の動作確認

ここまでで  form のラベルがピョコピョコ動くのが確認できました。

 

 

 

 

 

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です