flashメッセージの概要
Webサービスにおいて、自分が行なった操作により裏側でどういった処理が行われているかはユーザーは知る事ができません。
例えばユーザー登録を行うページにてきちんとアカウント情報を入力して登録ボタンを押したとしても、本当に”ユーザー登録が行われた”という情報がなければ、心配になると思います。
そこで何か処理を行なった時に、”正しく処理が行われましたよ”という情報を表示させるrailsの機能がflashメッセージになります。
具体的に
Webサービスにて何かの処理を行なった際に、それが正しく行われたかをユーザー側で確認できるよう、メッセージで表示させるための機能。
例えば、
・ユーザーの新規登録に成功しました
・ログインに成功しました
・コメント投稿に失敗しました
などのメッセージを表示させることでユーザーが状況を知る事ができます。
使い方（実装の仕方）
①まず、コントローラ側で行なっている処理に対してflashメッセージを追加します。
書き方の例は
flash[:notice] = "ユーザーの新規登録に成功しました"
flash[:success] = "ログインに成功しました"
flash[:danger] = "コメント投稿に失敗しました"
flashメッセージはハッシュであるので、keyとvalueを設定します。
上の一行目の例で言うと、:noticeがkeyで、"ユーザーの新規登録に成功しました"がvalueになります。
以下参照コード
class UsersController < ApplicationController
def create
@user = User.new(user_params)
if @user.save
redirect_to root_path, success: '登録ができました'
else
flash.now[:danger] = "登録に失敗しました"
render :new
end
end
private
def user_params
params.require(:user).permit(:name, :email, :password, :password_confirmation)
end
end
ここで出てきた
・flash.now
についてですが、「now」をつけた場合、移動した次のページのみメッセージが表示されるようになり、その次のページでは表示されない仕組みになります。
逆に「now」をつけない場合はずっとメッセージが残り続けます。
②ビュー側でこのメッセージを表示できるようにコードを書く。
<%= flash[:notice] %>
<%= flash[:success] %>
<%= flash[:danger] %>
メッセージを表示させる時間を指定する
メッセージを表示させる時間を指定するにはjQueryを使用すれば実現できます。
jQueryとは、javascriptのフレームワークのひとつで、javascriptを簡単に使えるようにしたものです。
このjQueryを使ってアラートメッセージが5秒で消えるような仕様を作成していきます。
①jQueryのgemを導入する
Gemfileに以下のgemを追加する
gem "jquery-rails"
gemを追記したら
$ bundle install
を行いましょう。
※gemを追記した際、サーバーを起動していた場合、一度サーバー再起動しないとgemは反映されません。
②jQueryを使う宣言をする
//= require jquery
これで、jqueryを使う準備ができました。
③適用させたいビューにjQueryのスクリプトを追記する
今回はapplication内で共通して使用したいため、application.html.erbに以下のコードを追記します。
<script>
$(function(){
$(".alert").fadeOut(5000);
});
</script>
5000と指定している部分は5秒の指定になります。1.5秒かけてアラートを消したい場合は1500と指定します。
これで完了です！
表示をさせたい時間や位置をいじって好みのflashメッセージを作り上げてみてください！
参考
・redirect_to使った時にBootstrap対応のフラッシュメッセージを表示させる