【Rails】flashについて(bootstrap対応)

はじめに

flashメッセージとは、Webサービスで何かの処理を行った際に、それがどのような処理になったかをユーザー側にメッセージとしてお知らせするためのものです。それでは、flashメッセージの実装方法について記していきます。

まず、使い方

コントローラー

flash[:notice] = "ログインに成功しました"
redirect_to root_path

このように使います。

表示させよう

sheard/_flash_message.html.erb

<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>

application.html.erb

<%= render sheard/flash_message %> #ここでflashパーシャルを読み込んでの表示をします。
<%= yield %>

これで表示できるのですが、色がないので、あまり映えません。フラッシュメッセージには notice と alert の二種類のキーしか設定できません。これだとデザインが地味です。そこで、bootstrap対応して色つけをしましょう。

bootstrap対応（gem bootstrap入れてある前提）

application_controller.rb

class ApplicationController < ActionController::Base
  add_flash_types :success, :info, :warning, :danger
end

キーの設定

これで準備OKです

それでは、実例を見ながら設定を見ましょう

実例

class UserSessionsController < ApplicationController
  def new;end

  def create
    @user = login(params[:email], params[:password])

    if @user
      redirect_back_or_to root_path
      flash[:notice] = "ログインしました"
    else
      flash[:danger] = "ログインに失敗しました"
      render :new
    end
  end

  def destroy
    logout
    redirect_to root_path, success: t('.success')
  end
end

ビューの設定

flashは汎用性が高いものなので、部分テンプレートとして使います。

# layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Kisohen2</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>


  <body>
    <% if logged_in? %>
      <%= render 'shared/header' %>
    <% else %>
      <%= render 'shared/before_login_header' %>
    <% end %>

# renderを使用し部分テンプレートを呼び出します。 

    <%= render 'shared/flash_message'  %>

    <%= yield %>
    <%= render 'shared/footer' %>
  </body>
</html>

このファイルで部分テンプレート_flash_message.html.erbを呼び出して、

<% flash.each do |key, value| %>
   <p class="alert alert-<%= key %>">
     <%= value %>
   </p>
<% end %>

ハッシュ形式のflashからキーを元にして値を取り出しています。このようにすれば、flashを表示することができます。

Bootstrapで用意されているスタイル

flashは、デフォルトでalertとnoticeの２種類のキーしか用意されていません。しかし、

application_controller.rbに以下の設定を追加すると、

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

デフォルトのalertとnotice以外で、Bootstrapに用意されているスタイルのフラッシュを定義できます。

bokuの学習記録