はじめに
ユーザ新規登録時やログイン時にフラッシュメッセージが表示されるように実装していきましょう。今回はbootstrapを使用している前提の表示の仕方も見ていきます。
フラッシュメッセージとは?
何らかの処理後に表示させる簡易メッセージのことを言います。
フラッシュメッセージの使い方基本
flashはハッシュのような形式で記述します。
# コントローラ
flash[:キー名] = "表示したいメッセージ"任意のキー名をつけることができます。
# ビューファイル
<%= flash[:キー名] %>noticeとalert
キーは任意の名前を付けられますが、デフォルトオプションとして用意されているキーがnoticeとalertです。省略して書くことができます。
<%= notice %>
<%= alert %>noticeは通知、alertは警告にと使い分けると良いでしょう。
bootstrapのalertスタイル
また、bootstrapを導入している場合は、より多くのキーを使うことができます。現在公式では8色用意されているようです。今回はsuccess、info、warning、dangerの4色使っていく方法を見ていきます。
フラッシュメッセージにbootstrapのデザインを当てる
bootstrapで定義されているクラス属性を指定することで、上図のような見た目になります。
<タグ class="alert alert-色の指定">
<div class="alert alert-success">
<div class="alert alert-info">
<div class="alert alert-warning">
<div class="alert alert-danger">作業の流れ
- Bootstrapに用意されているスタイルのフラッシュを定義する
- コントローラにフラッシュメッセージを追記
- フラッシュメッセージの部分テンプレートを作成する
- フラッシュメッセージの表示をビューファイルに追加する
Bootstrapに用意されているスタイルのフラッシュを定義する
以下の設定を追加することで、デフォルトのalertとnotice以外で、Bootstrapに用意されているスタイルを定義できます。
add_flash_types :success, :info, :warning, :danger上記の設定を行うことで１行で書けるようになります。
# BEFORE1
flash[:success] = "hoge"
redirect_to login_path
# BEFORE2
redirect_to login_path, flash: { success: 'hoge' }
# AFTER
redirect_to login_path, success: 'hoge'コントローラにフラッシュメッセージを追記
ログイン時の処理にフラッシュメッセージを追記します。
class UserSessionsController < ApplicationController
def create
@user = login(params[:email], params[:password])
if @user
redirect_back_or_to root_path, success: t('.success')
else
flash.now[:danger] = t('.fail')
render :new
end
end
def destroy
logout
redirect_to root_path, success: t('.success')
end
end新規ユーザ登録時の処理にフラッシュメッセージを追記します。
class UsersController < ApplicationController
def create
@user = User.new(user_params)
if @user.save
redirect_to login_path, success: t('.success')
else
flash.now[:danger] = t('.fail')
render :new
end
end
endコードを紐解く
処理失敗時の書き方を見ます。
flash.now[:danger] = t('.fail')
render :newflashとflash.nowの違い
flashは次のアクションが動いた後のビューファイルにflashメッセージを表示する時(リダイレクトするとき)に使用します。つまりリダイレクトされて次のアクションが実行されてレンダリングされるビューファイルでメッセージを表示します。
flash.nowは現在のアクションで表示するビューファイルのみ有効なflashメッセージを表示させたい時（renderで表示させたい時）に使用します。つまり、処理失敗時などでrenderを使っているアクションに書くことで通常のflash と同じ要領でメッセージを表示することができます。
フラッシュメッセージの部分テンプレートを作成する
フラッシュメッセージは再利用する可能性を持たせたい為、パーシャル化しておきましょう。
<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>フラッシュメッセージの表示をビューファイルに追加する
レイアウトファイルに追加します。
<body>
<% if logged_in? %>
<%= render 'shared/header' %>
<% else %>
<%= render 'shared/before_login_header' %>
<% end %>
<%= render 'shared/flash_message' %>
<%= yield %>
<%= render 'shared/footer' %>
</body>終わりに
リダイレクトする時とレンダーする時で挙動が異なる点に注意しながら、flash、flash.nowを使い分けていきましょう。
参考記事
コメント