CakePHP1.3のflashMessageをtwitter風にしてみる

CakePHP1.3のflashMessageをtwitter風にする方法をメモ。
1.2系の人は所々コードが違ってくるはずなのでお気を付けて。

そもそもflashMessageってなんぞや？

これ、正確に何て呼ぶのかわかりません。
ControllerでSessionComponentにセットした文字列をViewのSessionHelperでflash()すると表示されるメッセージ、です。
実際にコードを書くとわかるかも？

//コントローラー
$this->Session->setFlash('これ、これこれ！');

//ビュー
echo $this->Sesion->flash();

わかりますか？
もう、何て呼べばいいのかよくわからないので以下「アレ」と呼ぶことにします。

よくわからないので実際に表示してみる

上のコードを実行すると、こんな感じのアレが出力されます。

これ、これこれ！

もうお分かりですね？
そうです、consoleコマンドでbakeしたてのコントローラーとかだと、登録しました！とか登録できません！try again的なことを表示してるアレです。
アレをtwitter風に表示してみよう、というのが今回の趣旨です。

twitter風って？

twitterユーザーでなければ当然わかりませんが、よく訓練されたtwitterユーザーはアレに表示される素朴な日本語に故郷を思い出すものです。

必要なもの

twitter風の表示だけならCSSのみで可能ですが、フニョンと出てきてニョンと消えるようにするにはJavasciptでEffectしなければなりません。CakePHP1.2系の標準だとprototype.js+script.aclo.usのようですが、私個人的に大好きかつCakePHP1.3系で対応したjQueryを使います。
jQuery公式サイトからダウンロードしてください。
蛇足ですが、jQueryには多くのプラグインがあり、（少々古臭い表現ですが）web2.0なサイト作る際の強力な味方になります。特にjQuery UIは、モーダルダイアログやタブ、プログレスバーなど強力な機能が豊富にあるので、興味があったら使ってみてください。

実装してみる

実際、twitter風メッセージとはどういったものでしょう。
特徴としては、

• 画面の上の方から伸びてくる
• 半透明
• ボーダーが影を帯びててかっこいい
• 数秒後に上の方へ去っていく
• クリックするとすぐに去っていく

の5点を達成することを目標に実装していきます。

まずはCSS

flashMes…いや、アレが出力するhtmlのidは”flashMessage”でしたので、実際のCSSの表記は以下のようになります。

#flashMessage{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:1em;
	background:#fff;
	border:1px solid #ccc;
	-moz-box-shadow:0 0 8px rgba(204, 204, 204, 0.5);
	-webkit-box-shadow:0 0 8px rgba(204, 204, 204, 0.5);
	border-color:rgba(204, 204, 204, 0.75) !important;
	outline:medium none;
	color:#000;
	font-size:1.2em;
	font-weight:bold;
	z-index:9999;
	opacity:0.9;
	-moz-opacity:0.9;
	-khtml-opacity:0.9;
	filter:alpha(opacity=90);
	-ms-filter:"alpha(opacity=90)";
}

このCSSは、特徴２「半透明」と特徴３「ボーダーが影を帯びててかっこいい」を実現します。
このコードを、共通のcssファイル等に追加してください。

次にjQuery

ダウンロードしてきたjQuery(手元のファイル名はjquery-1.4.2.min.js)をapp/webroot/js以下に配置します。
次に、HtmlHelperでjQueryのファイルを読み込ませます。
おそらくアレは多くの画面で使用されると思いますので、layoutファイルのheadに記述するのがいいでしょう。

// app/views/layouts/default.ctpなどなど
echo $this->Html->javascript('jquery-1.4.2.min');

これで、jQueryを使用する準備が整いましたので、実際のコードを書いてみます。

$(function(){
    // アレ
    var element = $("#flashMessage");

    // アレを閉じる関数
    var close = function(){ element.slideUp(); };

    // アレをビヨーンと表示
    element.slideDown();
    // アレがクリックされたら閉じる
    element.click(close);
    // 5秒後に勝手に閉じる
    setTimeout(close, 5000);
});

このコードを、layoutファイルの一番下に記述するか、共通jsファイルに追加します。

アレが現れた！！

できたっぽい。

白ばっかで小ざっぱりとしていますが、一応動きます。
動かしてるのが今制作中のサイトのため公開できないのが残念です。

終わり

facebookやtwitterなど、今流行りのサイトはさり気ないながらもイケてる仕組みを色々取り入れています。
それらの仕組みは、より良いユーザーエクスペリエンスのために非常に効果的に思います。
今回は真似をしつつ、CSSによる透明化や影付けなどが勉強できたのでなかなか面白かったです。

なお、コード自体は数ヶ月ほど前に書いたものを思い出しながらこの記事を書いているので、実際には動かないコードかもしれません。
ツッコミ、お叱りお待ちしております。