Rails5のflashメッセージを一定時間後に消す方法【フェードアウト】

Rails5でflash[:notice]を使って、ページの上部にメッセージを表示できるようになったのはいいけど、ずっと出てるのはうっとうしい!という方に向けて書いた記事です。

これから紹介する方法を用いると、以下の動画のように一定時間後にflashメッセージがフェードアウトするようになります↓

 

Bootstrapでflashメッセージを表示したい方は、Shujiさんの記事を参考にした方がやりやすいと思います。

【Rails5】setTimeoutを使ってflash messageを自動的に非表示にする

この記事ではBootstrapを導入せずにflashメッセージを表示して、一定時間後にフェードアウトさせる方法を解説します。



環境

  • Ruby 2.6.0
  • Rails 5.2.2.1
  • jquery-rails 1.12.4

 

flashメッセージの表示方法

Progateで学んだやり方でflashメッセージを表示されられる方は、読み飛ばして構いません。

コントローラ

メッセージを表示させる記述は4、5行目です。

この場合、投稿が削除された後に/posts/indexに戻って「投稿を削除しました」というメッセージが表示されます。

メッセージを表示させるキーになるアクション(上の例でいう@post.destroy)の後にflash[:notice]を書き、redirect_toで指定したページで表示することができます。

 

ビュー

flashメッセージはいろいろな場面で共通で使っていくので、views/layouts/application.html.erbの<%= yield %>より上の部分に記述します。

headerタグの直後に書くと、ヘッダーの下にメッセージが表示されます。

コントローラとビューの記述は以上です。

 

flashメッセージを一定時間後にフェードアウトさせる方法

jQueryを使って、メッセージをフェードアウトさせます。

Gemfile

まずはGemfileの好きな場所に以下のコードを加えます。

group ~ endで囲われているところ以外だったらどこでも大丈夫です。

記述したらターミナルで$ bundle installを実行します。

 

application.js

次に、app/assets/javascripts/application.jsに以下のコードを加えます。

これでjQueryが使えるようになりました。

最後に以下のコードをapp/assets/javascripts/application.js(上のやつと同じ)に加えたら完成です。

これでflashメッセージを表示して、一定時間後にフェードアウトさせることができます。

「.time-limit」はapplicaton.html.erbのflashを囲うdivに付けたクラス名です。

divに付けたクラス名と同じであれば、どんなクラス名でも動きます。

右の数字の部分で表示する時間を決めることができます。

1000で1秒です。

 

おわり