フラッシュメッセージ

フラッシュメッセージとは

ユーザーが、「サインアップ」「ログイン」「ログアウト」を行った直後にメッセージを出すことです。

flashオブジェクト

deviseを使用すると、ログイン時などに表示させるメッセージが「flashオブジェクト」に自動で格納されます。
flashオブジェクト内には、複数のメッセージがハッシュのように「キー」「バリュー」形式で保存されています。
【例】ファイルを_notificationsとします

app/views/layouts/__notifications.html.haml

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

each文を使うと、これらを1つずつ取り出すことができ、今回は「キー」を「CSS用のクラス名」に、「バリュー」を「表示するメッセージ本文」として使っています。

フラッシュメッセージの表示

【例】renderしてるとします

app/views/layouts/application.html.haml

!!!
%html
  %head
(中身)
  %body
    = render 'layouts/flashs'
    = yield

これだとまだ英文が出てきてします。

flash.scssを作成

【例】ファイルをcolors.scsとします

stylesheets/config/colors.scss

$white: #fff;
$side_blue_dark: #253141;
$side_blue_light: #2f3e51;
$light_blue: #38AEF0;
$light_gray: #999;
$black: #434a54;
$alert_orange: #F35500;

次に「通知用」のメッセージと「アラート用」メッセージを作成します。
【例】ファイルをflash.scssとします

stylesheets/modules/flash.scss

.notification {
  .notice {
    background-color: $light_blue;
    color: $white;
    text-align: center;
  }

  .alert {
    background-color: $alert_orange;
    color: $white;
    text-align: center;
  }
}

次にapplication.scssを編集し、作成しファイルが読み込まれるようにします。

app/assets/stylesheets/application.scss

@import "reset";
@import "config/colors";
(そのほかの@import)
@import "modules/flash";

colors.scssの読み込みの順番

Railsは上から順番に読み込むためcolors.scssは、reset.scssの直後で読み込むようにしましょう。
colors.scssには、他のscssで利用している色についての変数が定義されています。
そのため、色についての変数を利用するCSSの前に先に読み込めていないと、エラーになってしまいます。

日本語化

「config/locales」フォルダに、「devise.ja.yml」と「ja.yml」という名前のファイルを新規作成します。
devise.ja.yml
ja.yml
それぞれ中身を丸ごとコピーして貼り付けます。
日本語化のための設定をします。
【例】

config/application.rb

module ChatSpace
  class Application < Rails::Application
    (中身)
    config.i18n.default_locale = :ja
  end
end

これで日本語でフラッシュメッセージの表示がされます。