deviseを使わずflashメッセージを実装する方法

1,やりたいこと

ログイン成功時やメッセージを投稿した際に、ページ上部にフラッシュメッセージを表示できるようにしたいと思います。

2,flashとは?

ある動作が実行された時、画面にその動作が成功したか失敗したかを知らせてくれる機能です。

Railsにおけるflashはハッシュオブジェクトとして設定されています。

3,まずはviewを作成

flashメッセージを表示するために、まずはviewを作成しましょう。

flashメッセージのコードを記述する際は、部分テンプレートを利用することが望ましいです。

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

今回はhtmlではなくhamlで記述してみました。

flashはハッシュ型のオブジェクトなので、keyとvalueをそれぞれ出力させる必要があります。

keyは2種類存在し、実行が成功したときはnoticeで失敗したときはalertが入ります。

class名にkeyを代入することで、成功時と失敗時のフラッシュメッセージを作成することができます。

コードを記述したら、application.html.hamlにrenderで導入しましょう。

%body
    = render 'layouts/notifications'
    = yield

4,コントローラを実装する

viewが完成したら、次はコントローラを実装します。

グループが作成されたとき、「グループを作成しました」とメッセージが表示されるように設定します。

@group = Group.new(group_params)
    
    if @group.save
      redirect_to group_messages_path(@group), notice: "グループを作成しました"

noticeに"グループを作成しました"という文字列が代入されているので、@groupがsaveされて、リダイレクトしたときにメッセージが表示されるようになります。

こんな感じで。

5,フラッシュメッセージを日本語表記に設定する

フラッシュメッセージはデフォルトで英語表記になっています。

日本語でメッセージが表示されるように設定しましょう。

config/application.rb

class Application < Rails::Application
    config.i18n.default_locale = :ja 
end

以上の記述でメッセージが日本語表記になります。

6,noticeとalertで別々のスタイルを適用しよう

動作が成功したときと、失敗したときでメッセージのスタイルが異なる方が分かりやすいでしょう。

なので、flashのスタイルも編集します。

stylesheets/_flash.scss

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

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

成功したときのクラス名はnotice、失敗したときのクラス名はalertなので、この記述でスタイルが適用されます。

*補足:deviseを使えばより簡単にフラッシュメッセージを実装できる。

ユーザーの新規登録、ログイン・ログアウト時に限りdeviseのgem
を使えば簡単いフラッシュメッセージを実装することができます。

以下の記事を参考に

deviseを利用したフラッシュメッセージの表示方法