2
4

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 5 years have passed since last update.

[Rails]flashメッセージの使用方法について

Last updated at Posted at 2019-09-19

#はじめに
今回動画の投稿、編集、削除をした際、flashメッセージを使用してこのように表示したかった為、その方法について。

afd1686477df0fbf6098e00cc05da9ba.gif

##使用方法について
先ずはビューファイルにflashメッセージを表示させる記述を追加します。今回はHamlを使用しています。必要なら= render partial: "パス名"を使用して部分テンプレート化もしましょう。

_flash.html.haml
.notification
  - flash.each do |key, value|
    = content_tag :div, value, class: key
application.html.haml
%body
 .header.container
  = render partial: "shared/flash"

次に表示させる文字をnotice:を使用してコントローラーに記述します。今回は動画投稿完了時に表示させる文字を例にします。

videos_controller.rb
def create
    @video = Video.create(name: video_params[:name], image: video_params[:image], text: video_params[:text], user_id: current_user.id)
    if @video.save
      redirect_to root_path, notice: '動画の投稿に成功しました!'
    else
      flash.now[:notice] = '動画の投稿に失敗しました.....'
      render :new
    end
  end

この記述をする事で動画投稿成功時は動画の投稿に成功しました!と動画投稿失敗時は動画の投稿に失敗しました.....と表示させる事が出来ます。
notice:(flash)flash.nowの違いはリダイレクトさせるか、renderを使用するかです。

####投稿成功時
b0161f297c083cec8fe41af688ea987f.gif
####投稿失敗時
0f1e434dcde87cfd708021537d88f87e.gif

あとは時間差で表示が消えるようにjQueryを使用して、JSファイルに記述します。

flash.js
$(function(){
  setTimeout("$('.notice, .alert').fadeOut('slow')", 800);
  });

setTimeoutを使用し、一定時間後に特定の処理を出来るようにしてます。
fadeOutはアニメーションの指定に使用し、slowなどのアクション、800(ミリ単位)などの時間を指定する事で好きに表現出来ます。
あとはcssにレイアウトを記述すればOKです。

####例

style.scss
// フラッシュメッセージのデザイン
.notification {
  background-color: black;
  color: white;
  font-size: 3rem;
  font-family: "SoukouMincho";
}

##まとめ
このようにフラッシュメッセージで表現させれば無駄なページを用意する必要がなくなるので便利だと思います。
以下の記事も参考にして下さい。
https://qiita.com/dice9494/items/2a0e92aba58a516e42e9
https://pg-happy.jp/rails-flash-message.html

2
4
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
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?