##設定内容
・共通のファイルを作成し、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
の2種類のキーしか用意されていないため、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">×</button>
</div>
上のように記述するとbootstrapのjavascriptが実行され、×ボタンを押すとflashメッセージが削除される。「×」は特殊文字の×で指定。
※bootstrapを導入していないと使えない。
##参考記事
【Rails】 完全保存版!flashの使い方とbootstrapで表示する方法
【Rails】flashについて(bootstrap対応)
【Rails】flashの使い方