- 導入時の環境について
- 導入手順
- 動作確認用のページを作成する
- mini_racerについて
- 動作確認後Bootstrapを拡張したデザインテンプレートを導入するには?
- JQueryベースのBootstrapを使用し続ける場合
- 他の選択肢はないのか?
導入時の環境について
導入時の環境
導入時の環境は以下の通り。
前提条件としてNode.jsをインストールしていないこと
これは重要な点ですが、Node.jsをインストールしていないことが前提条件になります。
もし、すでにNode.jsを導入済みの場合で、アンインストールできない場合は、導入していないマシンを選択する等を行ってください。
導入手順
emfileに追記しインストール
まずはGemfile
にBootstrapを追加します。
# Bootstrap5 gem "bootstrap", "~> 5.2.0" # please switch to Node.js (V8) or mini_racer (V8)が出た場合 gem "mini_racer", "~> 0.6.2"
思い切って最新版を入れちゃいましょう。
mini_racerについては、後ほど説明します。
さらに、
bundle install
でインストールします。
importmapのインストール
binディレクトリにimportmapがない場合は、下記コマンドを実行します。
bundle exec rails importmap:install
bin/importmap
およびconfig/importmap.rb
が作成されます。
さらに、以下のコマンドを実行します。
bin/importmap pin bootstrap
Javascriptファイルの変更
app/javascript/application.js
に下記を追記します。
import 'bootstrap'
cssをscssに変更
まず、app/assets/stylesheets/application.css
の名前をaplication.scss
に変更します。
その、app/assets/stylesheets/application.scss
の中身を(すでにカスタマイズしていない場合)全て消して、以下を追記します。
@import "bootstrap";
設定は以上となります。
動作確認用のページを作成する
どこに何を作成するか?
動作確認については、Bootstrap+Javascriptですと、プルダウンメニューの例が良いと思います。<
メニューバー等が用意されていない場合は、下記参考サイトのビューを適当に移植してみてください。
プルダウンメニュー(dropdown)が動作していれば、Javascript含め、問題なくインストールされています。
mini_racerについて
Node.jsまたはmini_racerが導入されていないと、Railsがエラーを吐き出す
もし、Node.jsまたはmini_racerが導入されていないと、Railsがエラーを表示します。
please switch to Node.js (V8) or mini_racer (V8)
V8エンジンが必要だというエラーメッセージですが、どうやら、動作確認をNode.jsとmini_racerで行っているようです。
ここが、mini_racerをインストールする理由になっています。
環境によってインストールできるバージョンが違う(っぽい)
私の環境(Intel Mac)だけかもしれませんが、最新版のmini_racerでは動作しませんでした。
ですので、意図的にバージョンを下げています。
動作確認後Bootstrapを拡張したデザインテンプレートを導入するには?
CDNがあれば、importmapのpinを変更する
config/importmap.rb
のpin以降のURLを変更します。
# config/importmap.rb pin "bootstrap", to: "CDNのURL"
あるいは、Javascriptファイルをダウンロードして、サーバー内のパスを指定しても良いかと思います。
importmapはJavascriptのみ、CSSはどうするか?
ダウンロードし、app/assets/stylesheets
ディレクトリに起きます。
さらに、app/assets/stylesheets/application.scss
を変更します。
(下記はbootstrap.min.cssの場合。)
#@import "bootstrap"; @import 'bootstrap.min';
JQueryベースのBootstrapを使用し続ける場合
無理にBootstrapのバージョンを上げずに、別途JQueryをいれてしまったほうが良い
動作が安定しているのであれば、クライアントからデザイン変更等のリクエストがない限り、無理に変える必要は無いのでは?と思います。
以下に、Rails7での導入例を説明いたします。
まず、下記のコマンドを実行します。
bin/importmap pin jquery
config/importmap.rb
を確認し、挿入されていない場合は、追記してください。
# config/importmap.rb pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js"
上記のJQueryのが新しすぎるのであれば、適当に変更したほうが良いかと思います。
さらに、app/javascript/application.js
の中を確認し、下記の行がない場合は、追記してください。
// app/javascript/application.js import jquery from "jquery" window.$ = jquery
他の選択肢はないのか?
CDNあるいはダウンロードしたファイルでBootstrapを導入したほうが楽?
調べたところ、CDNを直接app/views/layout/application.html.erb
に書く手法もあるようですね。
gem経由で受けられる恩恵もあるかと思いますので、kaminari用のbootstrapが動作するかは確認したほうが良いかもしれません。
こちらでも、プルダウンメニューが動作するのであれば、mini_racerの出番はないかもしれませんね。<
Node.jsレスあるいはJavascriptレスのCSSを採用したほうが楽?
Node.jsレスあるいはJavascriptレスのCSSを採用するという手法もあります。
TailwindCSSですとか、Yahoo!が開発したPure.cssもそうだったと思います。