scramble cadenza

技術ネタのガラクタ置き場

bootstrap-generators で bootstrap 導入後、一部の flash が使えなくなる現象

rails 小ネタ

イントロ

bootstrap 導入すると、flash がちゃんと動かなくなって戸惑うやつ。
decioferreira/bootstrap-generators で生成する flash 部分にミスがあるのが原因(多分)

具体的には flash[:alert] 時でも、緑枠の flash メッセージになってしまう現象。
ちゃんと考えると直せるんだけど、思い出すのが面倒なので残す。

環境

  • rails 4.2.1
  • sass-rails 5.0.3
  • bootstrap-sass 3.3.4
  • bootstrap-generators 3.3.1

各 gem の install 方法なども省略。 README.md の通りです。

bootstrap-generators について

意外とスター数が少ないので補足。

rails で twitter-bootstrap 導入しようとすると、有名なのは以下の２つ。

bootstrap-sass のほうが簡単に導入できるが、generator が付いていないので、view 等が手作りになってしまう。
一方で twitter-bootstrap-rails は導入が面倒だが、generator が便利で、一回インストールできてしまえば楽になってくる、という感じ。

正に一長一短な２つの gem なわけですが、実は boostrap の generator は gem になって切りだされていて、bootstrap-sass と合わせることで「install 簡単」と「generator」のイイトコロ取りをできるわけです。

その generator が decioferreira/bootstrap-generators です。

rails generate bootstrap:install

これで bootstrap のあの黒いヘッダー(やそれ以外も)が生成されます。
haml/slim/erb に対応している。

直し方

app/views/layouts/application.html.erb (bootstrap 導入後)

の class を作っている部分を直す。

<% flash.each do |name, msg| %>
-  <%= content_tag :div, :class => "alert alert-#{ name == :error ? "danger" : "success" } alert-dismissable", :role => "alert" do
+  <%= content_tag :div, :class => "alert alert-#{ name == "alert" ? "danger" : "success" } alert-dismissable", :role => "alert" do
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <%= msg %>
  <% end %>
<% end %>

後はいつもどおり flash[:alert] してあげればよい。

if @user_session.save
  redirect_to root_url, notice: "Login successful"
else
  redirect_to login_url, alert: 'Login failed.'
end

何も考えず redirect_to login_url, error: 'Login failed.' みたいにやっても効かないので注意。
(view で :error とあるから引っかかった。)

参考

おまけ

記述量を最小限にして直すと、上記のようになるけど、いやちゃんと考えたい、という場合には以下が参考になる。
以下の 3 つのうち、どれかを使えばひとまずは大丈夫そう。
(要は flash のキーが bootstrap のクラスに対応していればいいだけなので)