Cakephpのsessionでワンタイムメッセージを表示したい

Cakephpではセッション回りも柔軟に利用できるようになっています。最もシンプルなワンタイムメッセージの表示例としては以下の例があげられます。

$this->Session->setFlash('コメントを受け付けました');

コントローラ側で上の方法でフラッシュメッセージをセットした上でview側で以下のようにして表示します。

<?php $session->flash(); ?>

Cakephpを利用すれば上記のような簡単な方法でワンタイムメッセージを表示できます。ユーザーからコメントを投稿してもらった後にメッセージを表示したいときに利用できます。

かっこよくバルーンを表示したい

上のやり方でメッセージを表示することは可能ですが、一般的にはjqueryやcssでメッセージ回りを装飾するのが普通のようで、

バルーンメッセージ
チップ

と呼ばれています。

本エントリーでは、オライリー社から出版されている

ステートフルJavaScript MVCアーキテクチャに基づくWebアプリケーションの状態管理

という書籍のサンプルプログラムに収録されている

growl

というコードを利用してバルーンメッセージを装飾してみようと思います。その中でCakephpのsession関数をどのように利用するのか書いてみたいと思います。

利用方法

ダウンロード

オライリーの公式ページからサンプルプログラムをダウンロードして展開し、その中の

assets\appA\growl.html

をCakephpで利用します。growl.htmlをブラウザで開くとボタンが表示されバルーンの状態を確認できます。

controller側でやること

Cakephpのコントローラ側では、Session関数を利用してkey:value形式のデータを保存します。

以下の処理を、コメントフォームから投稿した後の処理に書いておく。

$this->Session->write('conglatulation', 'おめでとうございます！コメントが投稿されました！');
$this->redirect('/post/'.$id);

上のコードにより、conglatulationというkeyで「おめでとうございます！コメントが投稿されました！」というvalueのデータが保存され、後のリダイレクト処理で転送されるページで保存済みのワンタイムメッセージが表示されるという仕組みです。

view側ではgrowlのcssとjsコードを呼び出す

view側で、growlのcssとjavascriptを記述しておく必要があるが、毎回growl関連の処理が必要になるわけではなく、コメントなどのユーザーからの投稿があった場合のみ必要になる処理なので、以下のようにして、Cakephpのsession関数を利用してcssとjsの呼び出しを制御することにした。

<?php if( $session->read('conglatulation') ): ?>

//ここにgrowlのcssとjsを記述する

<?php echo $session->destroy(); ?>
<?php endif; ?>

conglatulationのセッションデータが存在する場合のみgrowlのcssとjsを読み込む設定が上の例。

一点補足したいのが、以下の記述

echo $session->destroy();

上の処理は保存されているセッション値を削除する処理で、上の例だとconglatulationのセッションデータを削除するようにしてある。この記述がないとCakephpでグローバルに設定されているセッションのタイムアウト値の分だけconglatulationが有効となり、毎回growlのcssとjsが呼び出されることになる。その結果、毎回ワンタイムメッセージが表示されてしまう現象になることが想定される。

一度表示したら即削除する場合には、最後に上のコードでセッション値を削除しないといけない。

growl.htmlのview側での利用例

cssとjsを除いた完成系は以下のような感じになる。

<?php if( $session->read('conglatulation') ): ?>

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>

//growl.htmlからcssとjsをコピーする
  
    <script type="text/javascript" charset="utf-8">
	$(window).load(function() {
	    $.growl('<?php echo $session->read('conglatulation'); ?>');
	});
    </script>
  
<?php echo $session->destroy(); ?>
<?php endif; ?>

まずjquryuiを読み込む記述を追加してgrowlが機能するようにしてある。試した環境では、jquery本体をシステム全体で読み込んであるので、ここでは読み込んでいないが、必要な場合にはjquery本体の読み込み処理も必要になる。

その後に、growl.htmlのcssとjsを記述する。この部分はcssとjsを外部ファイル化して読みだしてもよいかもしれない。

次にgrowlを実行する部分を記述してある。

$(window).load(function() {
    $.growl('<?php echo $session->read('conglatulation'); ?>');
});

growlの実行関数に対して、CakephpのSession関数で呼び出した、conglatulationのワンタイムメッセージを引数に渡している。

これらの処理によりgrowlで装飾されたワンタイムメッセージがコメント投稿からリダイレクトされた場合だけ表示される。