【Rails】フラッシュメッセージの設定（bootstrap） #Ruby

設定内容

・共通のファイルを作成し、application.html.erbで読み込みが出来るようにする
・コントローラーにflash内容を記載

共通ファイル作成

views/shared配下に、_flash_message.html.erbを作成し、flash用の部分テンプレートを作る。

<% flash.each do |message_type, message| %>
　　<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>

flashはハッシュのようなものなのでeachメソッドを使うことができ、このmessage_typeとmessageという変数名は任意で決められる。

flashメッセージにbootstarpのデザインを当てる
bootstrapではflashメッセージ用に下記のようなスタイルが用意されている。
▶︎bootstarpの他のデザイン

<タグ class="alert alert-色の指定">

# 例
<p class="alert alert-primary">

application.html.erbで読み込みが出来るようにする

app/views/layouts/application.html.erbに以下の文を追加。

<body>
 <%= render 'shared/flash_message' %>
</body>

コントローラーにflash内容を記載

flashは、デフォルトでalertとnoticeの２種類のキーしか用意されていないため、application_controller.rbに設定を追加するとデフォルトのalertとnotice以外で、Bootstrapに用意されているスタイルのフラッシュを定義出来る。

application_controller.rb

add_flash_types :success, :info, :warning, :danger

redirect_toの時の書き方
redirect_toで、noticeとalertを使う時は非常に簡潔に記述することができる。

ーーコントローラー記入例：
if article.save
  redirect_to root_path, notice: "表示させたいメッセージ"
else
  ~ 略 ~
end

ーー他のキーの場合は下記のように記述：
if article.save
  redirect_to path, flash: {キー名: "表字させたいメッセージ"}
else
  ~ 略 ~
end

renderの時の書き方
flashの仲間にflash.nowがあり、
flash→次のアクションまでデータを保持する→redirect_toと一緒に使う
flash.now→次のアクションに移行した時点でデータが消える→renderと一緒に使う
という使い分けが必要。

flashメッセージはアクションが動いた時に表示され、次のアクションが動くと消去される仕組みになっている。renderメソッドを使うときはアクションを通さないでビューファイルをレンダリングするため、次のアクションが動いた後にflashメッセージが表示されてしまいます。
flashを使った場合、renderの場合は表示された後、最初のアクションが実行され、
flashメッセージは2回目のアクションが実行された時に削除されるため、2回flashメッセージが表示されてしまいます。

ーーコントローラー記入例：
if article.save
  redirect_to root_path, notice: "登録が完了しました"
else
  flash.now[:alert] = "名前を入力してください"
  render :new
end

flashメッセージに閉じるボタンを付けたい

flashメッセージは次のアクションが動くまで消えない。
なのでflashメッセージが表示されているページで手動でflashメッセージを閉じることができる機能をつけてみた。

ビューファイル
<div class="alert alert-danger">
  <%= alert %><button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

上のように記述するとbootstrapのjavascriptが実行され、×ボタンを押すとflashメッセージが削除される。「×」は特殊文字の×で指定。
※bootstrapを導入していないと使えない。

参考記事

【Rails】完全保存版！flashの使い方とbootstrapで表示する方法
 【Rails】flashについて(bootstrap対応)
【Rails】flashの使い方