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 コメントをキャンセル

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

: CakePHP 2.3 主キー（ID）以外のキーで更新方法 updateAll

主キー（ID）以外のカラムをキーとして更新する方法、updateAllの使い方をサンプルを用いて解説します。

: CakePHP4、5でSELECT telephone as tel FROM usersの様にasでカラムに別名を付ける方法

CakePHP4、CakePHP5でクリエビルダーを利用してテーブルからレコードを取得する際、asを使用してカラムの別名で値を取得したい場合の対応方法を解説。また、別名にはハイフンやアスタリスクなど使用できない文字がある点も解説。

: CakePHP3のfriendsofcake/searchでツリーカテゴリーの子階層も含めて検索する方法

CakePHP3のツリービヘイビアを使ったツリーカテゴリーの子階層も含めての検索を検索プラグイン「friendsofcake/search」を使って実現する方法を解説しました。

: CakePHP 2.3で確認画面付きのお問い合わせフォームの作り方

CakePHPで確認画面付きのお問い合わせフォーム、メールフォームの作り方をサンプルを提示しながら解説。

: CakePHP4のユーザ管理・ログイン認証プラグインCakeDC/Usersのインストール解説

CakePHP4のユーザ管理プラグイン Usersは、ユーザ登録、メール認証、ログイン認証、ユーザ管理、権限管理、reCAPTCHAなど会員制のサイトを簡単に実現可能。その導入方法、カスタマイズ方法を解説。

: CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その２

CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその2でバリデーションなどの実用的なカスタマイズ方法を解説。