※ 「あなたがRails触る人なら見ておきたい「体系的な」豆知識」からの派生記事です。
タイトルの件について超困っている方も見ているかもしれないので先に答えを言っておくと、add_flash_types
メソッド を使ってキーを許可してあげましょうという話です。
そもそもフラッシュメッセージとは
アプリケーションにログインしたとき、新規投稿の保存に成功/失敗したとき、不正なアクセスを行ってリダイレクトされた時等々、ページ上部に出てきてくれる気の利いたひとことメッセージのことである。
Railsではこいつのことをフラッシュメッセージと呼び、簡単に設定できる仕組みを提供してくれている。
なおフラッシュメッセージはリロードすると消えるため、まさに一時的なお知らせにハイパー便利。
フラッシュメッセージどう使うの
いろいろ人によって使い方にバリエーションがあるみたいだが、個人的には見た目のスッキリさと応用の効かせ安さ、ついでにBootstrapのalertを適用させたいといった理由からこんな記述で実装している。
送ったフラッシュメッセージをページ上部に表示する記述
%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タグの中でナビゲーションバー直下のいちばん上
この位置にコントローラーから送られてくるフラッシュメッセージを読み込む記述をする。
するとあら不思議、該当の処理が行われた際にページ上部にメッセージが表示されるのです。
ちょうど冒頭の画像みたいに。
フラッシュメッセージをコントローラーから送る記述
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 | |
info | |
warning | |
danger |
※フラッシュメッセージはredirect処理以外の場面でももちろん使えるが、今回の主題は「 redirect処理時にちゃんとフラッシュメッセージを表示させる(そして指定したキーを利用して簡単にBootstrapのスタイルをあてる)」 ことであるため今回はredirect_toのオプションとしてフラッシュを使う場合にのみ言及する。
さあリダイレクトさせてみよう
ここまででひと通りの記述はできたのでさっそく表示を確認してみる。
今回はコメントを投稿した際にフラッシュメッセージを表示させるケースを想定。
いざ!
…ん?
出てこない?
設定したはずのフラッシュメッセージが出てこない!?
コイツが抜けていたみたい
実はフラッシュメッセージには notice
と alert
の二種類のキーしか設定できない。
Bootstrap使えなくては面倒なので、他のキーを許可する記述をコントローラーに追加する。
フラッシュメッセージのキーを許可する記述
class ApplicationController < ActionController::Base
add_flash_types :success, :info, :warning, :danger
end
ApplicationController
にadd_flash_typesメソッド
を使用
これでようやくBootstrapに対応した success
info
warning
danger
4つのキーが使用できることに。
今の状態でもう一度表示を確認してみる。
いざ!
出た…!!
これで redirect_to
にオプションとしてフラッシュメッセージを付与するだけで簡単に 気の利いたひとことメッセージを表示することができる。