初学者の備忘録

初学者の備忘録です。今回はフラッシュメッセージ編
（参考URL：https://pikawaka.com/rails/flash）

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

Webサービスにおいて、自分が行なった操作により裏側でどういった処理が行われているかはユーザーは知る事ができません。
何か処理を行なった時に、”正しく処理が行われましたよ”という情報を表示させるrailsの機能がflashメッセージになります。

基本

フラッシュメッセージの基本的な書き方です。

コントローラーファイル

flash[:キー名] = "表示させたいメッセージ"

何かの処理をした時にメッセージを表示させるので、処理した後のコードに追記します。

ビューファイル

<%= flash[:キー名] %>

例

例

if article.save
flash[:notice] = "登録が完了しました。"
redirect_to root_path
else

表示させたいViewに記述して表示させます。これでコントローラーで記述した表示させたいメッセージが表示されます。

キーには好きな名前をつけられますが、あらかじめnoticeとalertはオプションが用意されています。
このオプションを使用することによってViewの記述を下記のように省略することができます。

ビューファイル

# 通知メッセージ
<%= notice %>
# 警告メッセージ
<%= alert %>

基本的なフラッシュメッセージは以上になります。

部分テンプレート

フラッシュメッセージは複数のViewで使用します。ですがどのページでも同じ記述をするので部分テンプレート化することがおすすめです。
ここからは部分テンプレート化のコードになります。

上記の基本操作のビューファイル

ビューファイル

<%= notice %>
<%= alert %>

を部分テンプレートにしてもいいのですが、フラッシュメッセージはデザインも出来るので多様性を考えると下記のコードがおすすめです。

ビューファイル

<!--フラッシュメッセージの部分テンプレート-->
<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %> text-center"><%= message %></div>
<% end %>

flashはハッシュのようなものなのでeachメソッドを使うことができます。
上記のように書くと「flash[:キー名] = "メッセージ"」の部分の「キー名」をmessage_typeで、「メッセージ」をmessageで取得できます。
このmessage_typeとmessageという変数名は任意で決められます。

これで部分テンプレート化に成功しましたので、Viewファイルに部分テンプレート呼び出します。
フラッシュメッセージは様々なViewファイルで使用するのでapplication.html.erbで呼び出すのをおすすめします。

app/views/layouts/application.html.erb

：
：
<body>
    <!--フラッシュメッセージの部分テンプレート-->
    <%= render 'layouts/flash_messages' %>

    <%= yield %>
</body>
：
：

以上で部分テンプレート化終了です。

省略

基本的な記述は

コントローラー

# 例
if article.save
  flash[:notice] = "登録が完了しました。"
  redirect_to root_path
else
 ~ 略 ~
end

ですが、redirect_toを使用する場合１行で記述ができます。

コントローラー

# 例
if article.save
  redirect_to root_path, notice: "表示させたいメッセージ"
else
  ~ 略 ~
end

どちらも内容は一緒です。

デザイン

フラッシュメッセージはデフォルトでnoticeとalertはオプションがあると言いましたが、逆にいうとそれしかありません。
application_controller.rbに設定を追加するとデフォルトのalertとnotice以外で、Bootstrapに用意されているスタイルのフラッシュを定義出来る。

app/controllers/application_controller.rb


add_flash_types :secondary, :success, :danger, :warning, :info, :light, :dark

これによってキー名を変更することで対応したデザインになります。

【デザイン見本】
secondary

success

danger

warning

info

light

dark

デザイン２

フラッシュメッセージを一定時間経つと表示が自動で消える機能を実装してみました。
ViewファイルにJavaScriptで使用するclassを指定します。

部分テンプレートファイル


<!--フラッシュメッセージの部分テンプレート-->
<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %> text-center js-flash"><%= message %></div>
<% end %>

おまけ

class名はなんでもいいのですが、bootstrapで使用しているclassをそのまま利用するのはおすすめしません。できないわけではないのですが、bootstrapでデザインを変更しようとするとJavaScriptも機能しなくなるからです。
あとclassは今後bootstrap、CSS、JavaScriptと３種類くらい使用する可能性がありますので、JavaScriptのclassと一目でわかるclass名にしてあげた方が後々便利です。

次にJavaScriptを記述します。フラッシュメッセージは様々なviewで使用するのでapplication.jsで管理した方が便利です。

app/JavaScript/pack/application.js

：
：
// フラッシュメッセージ（一定時間で消す）
$(function(){  //メソッド定義
  $('.js-flash').fadeOut(5000);  //5秒かけて消えていく
});

表示を消したい時間などはご自由に設定可能です。

他にもフラッシュメッセージに消すボタンをつけるデザインもあるらしいのですが、私は実際に実装したことがないのでURLだけ残しておきます。
フラッシュメッセージに消すボタン

以上で終了になります。
フラッシュメッセージはまだまだいろいろできそうですが、現状ここまでできれば十分かなと思うのでここまでにしておきます。
お疲れ様でした。