CakePHP4のフラッシュメッセージの表示場所、デザインを変更する方法を解説

2024/01/20

CakePHP4の画面上部に表示されるフラッシュメッセージのデザインを改変する方法

　
下記の画像の箇所に表示されるエラーなどのメッセージを、「フラッシュ（Flash）メッセージ」と呼びます。
このフラッシュメッセージを表示させる場所や、デザインを変更する方法について解説します。
　

　
　

CakePHPのフラッシュメッセージ表示の概要

　
フラッシュメッセージは、Controller内に記述した
$this->Flash->error(__('The ***** could not be saved. Please, try again.'));
の処理で実行されたものが表示されます。
　
　
表示する側の処理は、レイアウト「/templates/layout/default.php」に記述されている
$this->Flash->render();
の場所に表示されます。
　
さらに、メッセージが表示される HTML部分として読み込まれるテンプレートファイルが
「/templates/element/flash/******.php」
になります。
　
　
この記事は、CakePHP4向けの記事として書いています。
　
ですが、CakePHP3でも基本的な処理は同じです。
ただ、CakePHP3のテンプレートが置いてあるフォルダの場所、および、拡張子が下記のように異なっています。その点を読み替えてください。
「/src/Template/Element/Flash/******.ctp」
　
　
また、フラッシュに関する CookBookは下記になります。
CakePHP3　フラッシュ
リクエストとレスポンスオブジェクト
https://book.cakephp.org/3/ja/controllers/components/flash.html
　
CakePHP4　フラッシュ（FlashComponent）
リクエストとレスポンスオブジェクト
https://book.cakephp.org/4/ja/controllers/components/flash.html
　
CakePHP4　フラッシュ（FlashHelper）
リクエストとレスポンスオブジェクト
https://book.cakephp.org/4/ja/views/helpers/flash.html
　
　

フラッシュメッセージは Controller内で`$this->Flash->***();`で記述

　
フラッシュメッセージの処理は、下記を Controller内に記述するところから始まります。　

// 基本形
$this->Flash->******("メッセージ");

1 2	// 基本形 $this->Flash->******("メッセージ");

　
上記が基本形です。
「******」の部分は、表示させるテンプレートのファイル名と対になるエレメント名を指定します。
　
デフォルトでは下記などが登録されています。
　

// 成功メッセージ
$this->Flash->success("成功メッセージ");

// エラーメッセージ
$this->Flash->error("エラーメッセージ");

// デフォルトメッセージ
$this->Flash->set("デフォルトメッセージ");

// 成功メッセージ

$this->Flash->success("成功メッセージ");

// エラーメッセージ

$this->Flash->error("エラーメッセージ");

// デフォルトメッセージ

$this->Flash->set("デフォルトメッセージ");

フラッシュメッセージは「default.php」内の`$this->Flash->render();`で受け取る

　
Controllerで記述した「$this->Flash->***();」の処理は、デフォルトでは、レイアウトファイル
　「/templates/layout/default.php」
に記述されている
　「$this->Flash->render()」
の場所に表示されます。
　
「$this->Flash->render()」の記述は、レイアウトファイルだけではなく、それ以外のテンプレートファイル「/templates/Topics/add.php」などに記述することもできます。
　
「$this->Flash->render()」の記述が、
　レイアウトファイル「default.php」
　テンプレートファイル「add.php」
のいずれにも記述がある場合、テンプレートファイルの方が優先されます。
　
また、一つのファイルの中に 2ヶ所に記述がある場合は最初に記述されている処理の方が優先されます。
　
　

詳細な HTML部分のテンプレートファイル「/templates/element/flash/*****.php」

　
Controller内に記述した
$this->Flash->******("メッセージ");
の処理に対応して最終的に表示されるテンプレートファイルは
　
「/templates/element/flash」フォルダ内にある「*****.php」になります。
　
$this->Flash->error("メッセージ");の場合は、対応するテンプレートファイルは「error.php」になります。
　
　
また、メソッド名、テンプレートファイルはそれぞれ対応するように記述されていれば、自由に名称を付けることができます。
　
例えば、
$this->Flash->errorPublics("メッセージ");の場合は、対応するテンプレートファイルは「success_publics.php」になります。
　
メソッドの記述はキャメルケース形式で、ファイル名はアンダースコアで区切る形式で記述します。
（メソッドもアンダースコアで区切る形式でも動作はしますが、規約上はキャメル形式で記述する必要があります。）
　
　

フラッシュメッセージのテンプレートファイルの CSSの変更

　
例えば、使用するテンプレートファイルが「error.php」の場合は、下記の記述の場所にメッセージが編集されます。
　

<div class="message error" onclick="this.classList.add('hidden');"><?= $message ?></div>

1	<div class="message error" onclick="this.classList.add('hidden');"><?= $message ?></div>

　
処理される CSSは Classで指定されている「message error」になります。
　
オリジナルの CSSを割り当てたいときは、テンプレートファイルを開いて、divタグの Classを指定することで対応が可能です。
　
　

- CakePHP 3.x 4.x 5.x CakePHP4

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: CakePHP3で静的ページの作成は webrootか pagesを使う。トップページを参考に解説

CakePHP3で静的なページを設置する場合の方法（webrootとpagesとを活用する方法）を解説。pagesの解説はデフォルトのトップページがどう表示されているかを参考に解説。ルーティングの機能も。

: CakePHP4、5のnewEmptyEntityで作成したオブジェクトは空なのか、確認してみた

CakePHPでレコードを新規登録をする際にnewEmptyEntity()を使って空のEntityを作成するが、これのempty、is_nullなどのでの判定結果がtrueかfalseか確認してみた。

: CakePHP 2.3　Search Pluginで検索処理　その３入力エリア一つで複数の項目を同時に検索する方法

CakePHPの検索プラグイン Search Pluginの検索処理の中で入力エリア一つで複数の項目を同時に検索する方法を解説。

: CakePHP3にWYSIWYGエディタのCKEditor4を設置、カスタマイズ方法を解説

WYSIWYGエディタであるCKEditor4をCDNを利用して簡単にCakePHP3に導入する方法とカスタマイズする方法を解説。CakePHP3にはページごとの振り分けを行うブロック化を利用する。

: cakephp3 カスタムバリデーションを簡易的に実装する方法

CakePHP3の独自のバリデーションをテーブルクラス内に簡単に記述する方法を解説。他のテーブルクラスでは使えないが、記述する量は少なく実装できるため、他で使わない処理を書くのには便利。

: CakePHP5でヘルパーから他のヘルパーを読み込む方法・CakePHP4からの変更点

CakePHP5のヘルパーで他のヘルパーを読み込む方法を解説。公式の日本語CookbookはCakePHP4のソースのままで間違っているため注意が必要。CakePHP4からの移行の際も同じ点に注意が必要。