Rails6 で Material Design for Bootstrap を使おうとしたのですが、ネット上にある情報だけではうまく動かなかったので、使うまでの手順をまとめておきます。といっても、重要なのは JQuery を動くようにキッチリ設定することと、app/view/layouts/application.html.erb 等で、きちんと MaterialDesignForBootstrap を使うように script タグを書くだけです。
Rails6 アプリの準備
まずはいつもどおりに Rails6 アプリケーションを作成します。ただし、webpacker を前提にして、
turbolinks とか sprockets は使わないようにします。ほぼいつもの手順なので、細かいことは書きません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$ mkdir rails6.0_material_bootstrap $ cd rails6.0_material_bootstrap $ bundle init Writing new Gemfile to $HOME/rails6.0_material_bootstrap/Gemfile $ vi Gemfile - # gem "rails" + gem 'rails', '~> 6.0.0' $ bundle install --path vendor/bundle Fetching gem metadata from https://rubygems.org/............. Fetching gem metadata from https://rubygems.org/. Resolving dependencies.... Fetching rake 13.0.0 : <snip> : For more info see: https://github.com/svenfuchs/i18n/releases/tag/v1.1.0 |
turbolinks とか sprokets は使わない。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$ bundle exec rails new . --skip-turbolinks --skip-sprockets --skip-bundle force Gemfile run git init from "." Initialized empty Git repository in /home/takeda/Rails_6.0/rails6.0_material_bootstrap/.git/ : <snip> : rails webpacker:install Could not find gem 'sqlite3 (~> 1.4)' in any of the gem sources listed in your Gemfile. Run `bundle install` to install missing gems. $ bundle install : <snip> : Bundle complete! 15 Gemfile dependencies, 69 gems now installed. Bundled gems are installed into `./vendor/bundle` $ bundle exec rails webpacker:install RAILS_ENV=development environment is not defined in config/webpacker.yml, falling back to production environment create config/webpacker.yml Copying webpack core config : <snip> : ├─ yargs-parser@11.1.1 └─ yargs@12.0.5 Done in 4.76s. Webpacker successfully installed 🎉 🍰 |
ディレクトリ構成の変更
asset パイプラインは使わないので消してしまう。あと、app/javascript 配下に stylesheet とかがあるのも気持ち悪いので webpacker の設定変えて、app/frontend に変更してしまう。
|
1 2 3 4 5 6 |
$ rm -rf app/assets $ mv app/javascript/ app/frontend $ mkdir app/frontend/{javascripts,stylesheets,images} $ touch app/frontend/stylesheets/application.scss $ touch app/frontend/javascripts/application.js $ touch app/frontend/images/.keep |
webpacker の設定変更
config/webpacker.yml を変更。webpacker の source_path を変更する。ついでに css 読み込むのが遅くて画面がペコペコ動くのが嫌なので extract_css も true にしておく。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
$ vi config/webpacker.yml $ diff config/webpacker.yml.orig config/webpacker.yml 4c4 < source_path: app/javascript --- > source_path: app/frontend 20c20 < extract_css: false --- > extract_css: true $ vi app/frontend/packs/application.js $ diff app/frontend/packs/application.js.orig app/frontend/packs/application.js 9a10,12 > import '../javascripts/application'; > import '../stylesheets/application.scss'; > require.context('../images', true) # assets は作らない。 $ vi config/application.rb $ diff config/application.rb.orig config/application.rb 30a31,34 > > config.generators do |g| > g.assets false > end # アプリケーション設定を webpack 向けに変更 $ vi app/views/layouts/application.html.erb $ diff app/views/layouts/application.html.erb.orig app/views/layouts/application.html.erb 8c8 < <%= stylesheet_link_tag 'application', media: 'all' %> --- > <%= stylesheet_pack_tag 'application', media: 'all' %> |
サンプルページの作成
いつものように home#index を作って、default のページをこれに設定。んで、画面確認。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$ bundle exec rails g controller home index $ vi config/routes.rb $ diff config/routes.rb.orig config/routes.rb 2,3c2,5 < get 'home/index' < # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html --- > get 'home/index' > root to: 'home#index' > # For details on the DSL available within this file, > # see https://guides.rubyonrails.org/routing.html $ bundle exec rails s |
Material Design for Bootstrap の導入
パッケージのインストール
|
1 2 3 4 5 6 7 8 9 10 11 |
$ yarn add bootstrap bootstrap-material-design jquery popper.js yarn add v1.19.0 [1/4] Resolving packages... [2/4] Fetching packages... : <snip> : ├─ jquery@3.4.1 └─ popper.js@1.16.0 Done in 4.70s. |
もろもろ読み込み設定
|
1 2 3 |
$ echo "import 'bootstrap-material-design'" >> app/frontend/javascripts/application.js $ echo "@import '~bootstrap-material-design/scss/bootstrap-material-design';" \ >> app/frontend/stylesheets/application.scss |
ボタンのデザイン確認
home#index に Material Design なボタンを追加して確認してみる。
|
1 2 3 |
$ echo "<%= link_to \"テストボタン\", \"#\", class: \"btn btn-raised btn-primary\" %>" \ >> app/views/home/index.html.erb $ bundle exec rails s |
ここまででデザインの適用ができることは確認できた。
JQuery が動くように設定
じつはこのままでは Material な感じに画面をニュルニュルさせる Javascript が動かないので、JQuery が動くように設定します。
|
1 2 3 4 5 6 7 8 9 10 |
$ vi config/webpack/environment.js $ cat config/webpack/environment.js const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.plugins.append('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery', Popper: ['popper.js', 'default'] })) module.exports = environment |
Javascript が動くように設定
ここで色々失敗しました。ちゃんとドキュメント読んでドキュメント通りに設定しましょう。
app/view/layouts/application.html.erb で Material Design for Bootstrap の Javascript を動かすように設定
|
1 2 3 4 5 6 7 8 9 10 |
$ vi app/views/layouts/application.html.erb $ diff app/views/layouts/application.html.erb.orig app/views/layouts/application.html.erb 9a10 > <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script> 13c14,16 < <%= yield %> --- > <div class="container"> > <%= yield %> > </div> |
form の動作確認
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$ bundle exec rails g scaffold Memo title:string content:text $ bundle exec rails db:migrate $ vi app/views/memos/_form.html.erb $ diff app/views/memos/_form.html.erb.orig app/views/memos/_form.html.erb 14,16c14,16 < <div class="field"> < <%= form.label :title %> < <%= form.text_field :title %> --- > <div class="form-group"> > <%= form.label :title, class: "bmd-label-floating" %> > <%= form.text_field :title, class: "form-control" %> 19,21c19,21 < <div class="field"> < <%= form.label :content %> < <%= form.text_area :content %> --- > <div class="form-group"> > <%= form.label :content, class: "bmd-label-floating" %> > <%= form.text_area :content, class: "form-control" %> |
ここまでで form のラベルがピョコピョコ動くのが確認できました。