RailsにBootstrapを適用時モーダルウィンドウがうまく動いてくれなかった件
サインイン画面をモーダルウィンドウで実装していたんですが、モーダルウィンドウを呼びだしたら一瞬出てきてすぐ引っ込む、という挙動で大ハマりしたので記録。
View設定
まずサンプルとしてapplication.html.erb
の中身から見ていきます。
head
タグ内のstylesheet_link_tag
とjavascript_include_tag
に注目。
それぞれがapplication.css
とapplication.js
の設定ファイルを読み込む。
/app/viewa/layouts/application.html.erb <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sampleだよ</title> <!-- /app/assets/stylesheets/application.css の読み込み --> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <!-- /app/assets/javascripts/application.js の読み込み --> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> <!-- IE9未満時用の読み込み --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- 省略 --> </body> </html>
CSS設定
下記の様にコードを変更する事で/assets/stylesheets
内のbootstrap.min.js
を読み込むことができます。
=
の前に*
を付ければ設定を有効、消せば無効となります。
app/assets/stylesheets/application.css /* 追加 */ *= require bootstrap.min /* 初期設定は有効 => 他のCSSファイルも適用したいなら無効 */ = require_tree . *= require_self
Javascript設定
=
の前に//
を付ければ設定を有効、消せば無効となります。
app/assets/javascripts/application.js //= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap.min # 追加 = require_tree . //初期設定は有効 => 無効
require_tree .とは一体何か?
先ほどからcssやjsファイルで有効化したり無効化したりしているrequire_tree .
とは一体どういう意味を持つのでしょうか?
それはapp/assets/javascripts(stylesheets)/
配下にある全ファイルを読み込む という意味を持ちます。(勉強していたらSassの項目で出てきました)
これによって不具合が起こっていたみたいです。(内部的な動きはまだ理解できていませんが、おそらく全てのファイルを読み込むことで設定がバッティングしてるんじゃないかと推測されます。)
今回はCSSにBootstrap以外の設定を読み込ませていなかったので、require_tree .
を無効化しなくても大丈夫でしたが、別の設定も読み込ませたい場合は無効化する必要が出てくると思われます。
参考サイトを見る限りconfig/application.rb
にも記述をしないといけないみたですが、今の所よく分かっていないので今後も調査が必要です。