0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

フラッシュメッセージ

Posted at

##フラッシュメッセージとは
ユーザーが、「サインアップ」「ログイン」「ログアウト」を行った直後にメッセージを出すことです。
##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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?