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 CakePHP4

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

Message コメントをキャンセル

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

: CakePHP4のCakeDC/Usersのログイン時のリダイレクトとユーザ権限管理の設定解説

CakeDC謹製UsersプラグインのCakePHP4版の紹介。ログイン認証後にリダイレクトする先の設定方法についての解説と実運用するために必要なコツを解説。便利な仕組みも仕様の理解があって初めてうまく使いこなせる。

: CakePHP3でQRコードを作成、表示するライブラリ「cakePHP-QR-Code-Helper」

CakePHPでQRコードを生成するライブラリ「cakePHP-QR-Code-Helper」の紹介。GDライブラリのインストールも必要ないHelperとして提供されているため、ファイルを設置すればすぐに使用可能。

: CakePHP3のアソシエーションでJOINのタイプのLEFT、INNERを切り替えながら使う方法

CakePHP3でテーブルのアソシエーションしたデータの取得をコントローラー側でINNERかLEFTを指定する方法を解説。TableファイルにINNERで指定していてもController側で変更ができる。

: CakePHP3のタイムゾーンを協定世界時UTCから日本標準時間JSTにずれを変更する方法

CakePHP3の標準設定のタイムゾーンは「UTC（協定世界時）」に設定されている。これを日本標準時に変更する方法（app.php、bootstrap.phpの変更方法）の解説。

: CakePHP3でアソシエーション先のカラムでデータをソートして取得したい

アソシエーション先のテーブルのカラムをキーにソートをしたデータを取得したい！ときの記述方法を解説。「orderAsc()」ではなく「contain()」の中にSort条件を記述する。

: CakePHP 2.3　ログイン、操作履歴、アクセスログ出力

CakePHPでログインや操作履歴などのアクセスログ出力処理を作成します。

: CakePHP2の検索Plugin CakeDC/Searchで重複を省くgroup by（distinct）の実装方法

CakePHP2の検索プラグイン「CakeDC/Search」で、重複レコードを省くgroup by、distinctを使う方法についての解説。設定する場所はpaginatorの条件とするので、find()関数と同じ。

: CakePHPで favicon.icoやapple-touch-icon-144-precomposed.pngが could not be foundのエラーが出るときの対処方法

CakePHPで「CakeDC/Users」などルーティングを行うプラグインを利用するときに、favicon.icoやapple-touch-icon-144-precomposed.pngがNotFoundエラーになることがある。その対処方法の解説。