flashを表示できるようにする

AdobeなFlashではなくて、ページをリダイレクトしたときにメッセージを伝達する仕組みがflash。
この辺が詳しい。

実は既に flash[:notice] = "You're logged in" とかいった設定がaccountコントローラ内で自動生成されています。
これを表示するようにしてみます。

どうせなら、全ページにLayoutを使って埋め込んでしまいましょう。ついでに、しばらく放っておくと消えるようにしておけば、全ページに埋め込んでもデザイン上邪魔にならないでしょう。

app/views/layouts/applications.rhtml に、以下を書き加えます。

<% if flash[:notice] %>
<div id="notice"><%= flash[:notice] %><% flash[:notice] = nil %></div>
<script>
var d_notice = document.getElementById('notice');
function setNoticeAlpha(a){
	if (a>0) {
		d_notice.style.opacity=a;
		setTimeout(function(){setNoticeAlpha(a-0.1)},100);
	} else
	 d_notice.style.display = "none";
}
setTimeout(function(){setNoticeAlpha(1.0)}, 2000)</script>
<% end %>

スタイルシートに以下を加え、適当な右上辺りの場所に固定しておきます。

#notice {
	position: absolute;
	right: 20px;
	top: 18px;
	width: 340px;
	margin: 0 auto;
	border: solid 2px #222;
	background-color: #fce;
	text-align: center;
	font-size: 14pt;
	line-height: 20pt;
	z-index: 999;
}

ログインしたときの画面。flash表示は2秒後に、徐々に消えていきます。