flashとは
とある動作を行った時、成功したのか、もしくは失敗したのか、相手に知らせ機能があると便利ですよね。
Railsでは、ログイン時に「ログインしました」と表示するなど、Viewで一時的なメッセージを表示するためにflashというハッシュ形式のオブジェクトが設定されています。
このflashを利用することで、次の画像上部に表示された「メッセージを投稿しました」のようにフラッシュメッセージを表示させることができます。
参考：flash - リファレンス - - Railsドキュメント
それでは、より詳しい使い方を見ていきましょう。
※Viewはhaml記法での説明となります
※deviseの準備が完了した後の手順となります
具体的な使用例
- flash.each do |key, value|
= content_tag(:div, value, class: "flash flash__#{key}")
deviseを導入した状態でflashオブジェクトを使用すると、deviseに関する通知（ログイン・ログアウトなど）が発生した時のみ、keyとvalueのハッシュを生成してくれます。
flashには標準で notice（動作成功時）とalert（動作失敗時）の2つのキーを生成してくれるため、両方に適用できるようにeachメソッドを使ってkeyとvalueを取り出しています。
また、content_tagはHTMLタグを生成することができ、第一引数にタグ、第二引数に内容、第三引数にオプション（ classなど）を設定します。
今回、表示したいのはvalueなので、第２引数にvalueを設定しています。
また、classにflashと**flash__#{key}**の2つを設定することで、keyがnoticeの時とalertの時でscssの表示を変えることができます。
SCSSの見本例
.flash {
color: $white;
text-align: center;
&__alert{
background-color: red;
}
&__notice {
background-color: $blue;
}
}
注意点としては、classがflash__#{key}のみだとflashクラスに記述した内容（この場合はcolorとtext-align）が反映されません。よって、class: "flash flash__#{key}"と2つのクラスを設定しましょう。
フラッシュメッセージの設置場所
!!!
%html
%head
省略
%body
= render 'layouts/flash'
= yield
最初の見本の画像のように、全ての要素の上に表示させるにはlayouts/application.hamlに記述すると良さそうです。
ただし、ここに記述すると修正時にややこしいので、私は部分テンプレート _flash.haml に切り出して、renderメソッドで呼び出すようにしました。
deviseの日本語化
devise.ja.ymlをconfig/localesに設置します。いくつか見本があるようなので、その一つを紹介します。
devise.ja.yml
さらに、これを読み込む設定をする必要があります。
module ChatSpace
class Application < Rails::Application
config.i18n.default_locale = :ja
end
end
以上でdeviseをフラッシュメッセージを表示することできます。
flashメッセージの編集
コントローラーでflashを設定することで、任意の動作の後にフラッシュメッセージを表示させることができます。
例えば、グループを作成成功時と失敗時にフラッシュメッセージを表示します。
def create
@group = Group.new(group_params)
if @group.save
redirect_to root_path, notice: "グループを作成しました"
else
flash.now[:alert] = "グループ名を入力してください"
render :new
end
end
前提として、groupモデルで validates :name, presence: true のようにバリデーションを記述しているため、nameがない場合は保存できないようになっています。
よって、@groupが「保存できた場合」と「保存できなかった場合」で条件分岐し、flashメッセージを表示するようにしました。
flash[:notice] = "表示したい内容" のように記述することで、flashオブジェクトのnoticeキーのバリューを設定できます。
flashとflash.nowの違いは下記をご確認ください。基本的にはflash.nowを使えば良さそうです。
最後に
筆者の知識不足による間違いがありましたら、ご指摘をいただけると助かります。