deviseを利用したフラッシュメッセージ

hamlを使った記述

サインインやログアウトをした際に、画面上部に”ログインしました。”　”ログアウトしました。”のようなメッセージを表示できるようにする。
deviseを使用すると、ログイン時などに表示させるメッセージが「flashオブジェクト」に自動で格納されます。

flashオブジェクト内には、複数のメッセージがハッシュのように「キー」「バリュー」形式で保存されています。

①メッセージ用のviewを用意

フラッシュメッセージ用のビューファイル_notifications.html.hamlをviews/layoutsに配置し、application.html.hamlのbody内でrenderで読み込む。

_notifications.html.haml

.Notification
  - flash.each do |key, value|
    = content_tag :div, value, class: key

application.html.haml

%body
    = render 'layouts/notifications'
    = yield

②フラッシュメッセージのスタイリングを行う

flashはデフォルトで"notice（動作成功時）"と"alert（失敗時）"の２つのキーを作成する。
それぞれにスタイルを当てていく

stylesheets/modules/_flash.scss

.Notification {
  .notice {
    background-color: #38AEF0;
    color: #fff;
    text-align: center;
  }

  .alert {
    background-color: #F35500;
    color: #fff;
    text-align: center;
  }
}

最後にapplication.scssを編集して、作成した設定ファイルが読み込む

app/assets/stylesheets/application.scss

@import "modules/flash";

③メッセージの日本語化

まず、日本語化用のファイルを作成します
「config/locales」フォルダに、「devise.ja.yml」および「ja.yml」という名前のファイルを新規作成します。

下記のサイトに記述内容が掲載されているので、それぞれ中身を丸ごとコピーして貼り付け、保存しましょう。
devise.ja.yml
ja.yml

次に、application.rbを編集して、言語設定を変更しましょう。

config/application.rb

  class Application < Rails::Application
    #〜省略〜
    config.i18n.default_locale = :ja
  end
end