読者です 読者をやめる 読者になる 読者になる

Labyrinth of Wisdom

-This is My Archive-


RailsにBootstrapを適用時モーダルウィンドウがうまく動いてくれなかった件

Rails(4.25)で作成したアプリにBootstrap3を適用して開発を進めていました。
サインイン画面をモーダルウィンドウで実装していたんですが、モーダルウィンドウを呼びだしたら一瞬出てきてすぐ引っ込む、という挙動で大ハマりしたので記録。


View設定

まずサンプルとしてapplication.html.erbの中身から見ていきます。
headタグ内のstylesheet_link_tagjavascript_include_tagに注目。
それぞれがapplication.cssapplication.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にも記述をしないといけないみたですが、今の所よく分かっていないので今後も調査が必要です。