#はじめに
今回動画の投稿、編集、削除をした際、flashメッセージを使用してこのように表示したかった為、その方法について。
##使用方法について
先ずはビューファイルにflashメッセージを表示させる記述を追加します。今回はHamlを使用しています。必要なら= render partial: "パス名"
を使用して部分テンプレート化もしましょう。
.notification
- flash.each do |key, value|
= content_tag :div, value, class: key
%body
.header.container
= render partial: "shared/flash"
次に表示させる文字をnotice:
を使用してコントローラーに記述します。今回は動画投稿完了時に表示させる文字を例にします。
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を使用するかです。
あとは時間差で表示が消えるようにjQueryを使用して、JSファイルに記述します。
$(function(){
setTimeout("$('.notice, .alert').fadeOut('slow')", 800);
});
setTimeout
を使用し、一定時間後に特定の処理を出来るようにしてます。
fadeOutはアニメーションの指定に使用し、slow
などのアクション、800(ミリ単位)
などの時間を指定する事で好きに表現出来ます。
あとはcssにレイアウトを記述すればOKです。
####例
// フラッシュメッセージのデザイン
.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