8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】フラッシュメッセージの設定(bootstrap)

Posted at

##設定内容
・共通のファイルを作成し、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は、デフォルトでalertnoticeの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">&times;</button>
</div>

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

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

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?