Edited at

redirect_to使った時にBootstrap対応のフラッシュメッセージを表示させる

More than 3 years have passed since last update.

あなたがRails触る人なら見ておきたい「体系的な」豆知識」からの派生記事です。

タイトルの件について超困っている方も見ているかもしれないので先に答えを言っておくと、add_flash_typesメソッド を使ってキーを許可してあげましょうという話です。


そもそもフラッシュメッセージとは

qiita1.png

アプリケーションにログインしたとき、新規投稿の保存に成功/失敗したとき、不正なアクセスを行ってリダイレクトされた時等々、ページ上部に出てきてくれる気の利いたひとことメッセージのことである。

Railsではこいつのことをフラッシュメッセージと呼び、簡単に設定できる仕組みを提供してくれている。

なおフラッシュメッセージはリロードすると消えるため、まさに一時的なお知らせにハイパー便利。


フラッシュメッセージどう使うの

いろいろ人によって使い方にバリエーションがあるみたいだが、個人的には見た目のスッキリさと応用の効かせ安さ、ついでにBootstrapのalertを適用させたいといった理由からこんな記述で実装している。


送ったフラッシュメッセージをページ上部に表示する記述


layouts/application.html.haml

  %body

= render "layouts/header"
- flash.each do |key, value|
- key = "info" if key == "notice"
- key = "danger" if key == "alert"
= content_tag :div, value, class: "alert alert-#{key}"
= yield
= render "layouts/footer"


  • Bodyタグの中でナビゲーションバー直下のいちばん上

この位置にコントローラーから送られてくるフラッシュメッセージを読み込む記述をする。

するとあら不思議、該当の処理が行われた際にページ上部にメッセージが表示されるのです。

ちょうど冒頭の画像みたいに。


フラッシュメッセージをコントローラーから送る記述


controllers/flash_samples_controller.rb

def create

review = current_user.reviews.new(review_params)
if review.save
redirect_to books_url, success: "Successfully created your prototype."
else
redirect_to root_url, warning: "Unfortunately failed to create."
end
end


  • redirect_to [パス名], [指定のキー]: "メッセージ"

こんな感じで使うことが多い。

蛇足だが、saveメソッドは正常にデータの保存が完了するとインスタンスの存在が担保されtrueを、そうでない場合はfalseを返すためよくif文の条件に指定する。

なお指定できるキーは、Bootstrapのalertのスタイル使う場合だと以下の4種類。

キー名
見た目

success
success.png

info
info.png

warning
warning.png

danger
danger.png

※フラッシュメッセージはredirect処理以外の場面でももちろん使えるが、今回の主題は「 redirect処理時にちゃんとフラッシュメッセージを表示させる(そして指定したキーを利用して簡単にBootstrapのスタイルをあてる)」 ことであるため今回はredirect_toのオプションとしてフラッシュを使う場合にのみ言及する。


さあリダイレクトさせてみよう

ここまででひと通りの記述はできたのでさっそく表示を確認してみる。

今回はコメントを投稿した際にフラッシュメッセージを表示させるケースを想定。

いざ!

sketch2.png

…ん?

出てこない?

設定したはずのフラッシュメッセージが出てこない!?


コイツが抜けていたみたい

実はフラッシュメッセージには noticealert の二種類のキーしか設定できない。

Bootstrap使えなくては面倒なので、他のキーを許可する記述をコントローラーに追加する。


フラッシュメッセージのキーを許可する記述


application_controller.rb

class ApplicationController < ActionController::Base

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


  • ApplicationControlleradd_flash_typesメソッド を使用

これでようやくBootstrapに対応した success info warning danger 4つのキーが使用できることに。

今の状態でもう一度表示を確認してみる。

いざ!

qiita3.png

出た…!!

これで redirect_to にオプションとしてフラッシュメッセージを付与するだけで簡単に 気の利いたひとことメッセージを表示することができる。