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でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数

CakePHP3で特定フォルダのパスの定数を解説。root、DocumentRoot、app、config、webroot、tests、tmp、cache、vendor、コア、コアの srcが設定済み。realpath()関数を使うと柔軟なパス指定が可能。

: CakePHP3のCakeDC/UsersのUserHelperでログアウトやreCAPTCHAをカスタマイズ

CakeDC謹製Usersプラグインの紹介。UserHelperを利用し、ログアウトのリンクや権限があるときのみ表示されるリンク、プロフィールページへのリンク、reCAPTCHAの設置方法などを解説。

: getParam('action')で取得するアクション名は別関数に移動しても不変

CakePHP4系、5系では「getParam()」で処理中のアクション名を取得できる。そのアクションから別関数を呼び出してた関数でアクション名を調べたが同一の名称だった。

: CakePHP3で「SQLSTATE[23000]: Integrity constraint violation」「SQLSTATE[42S22]: Column not found」などのエラーが出たときの確認するポイント

CakePHP3の開発で発生する「SQLSTATE[23000]: Integrity constraint violation」「SQLSTATE[42S22]: Column not found」のエラーには特有の原因もあるため、その説明と対処方法の解説。

: CakePHP3でComposerでインストールできないプラグイン、外部ライブラリを vendorに入れて手動で読み込む方法

CakePHP3にComposerからインストールできないプラグインやライブラリなどを利用する方法、vendorにファイルを設置し、composer.jsonを更新し、それを呼び出す方法を詳細に解説。

: CakePHP3、CakePHP4のキャッシュをクリアする方法「bin/cake cache clear_all」を使う

CakePHP3、CakePHP4では処理を高速化する手法の一つとしてキャッシュを利用している。しかし、その情報は元の情報を更新しても反映されない場合がある。そんなときはキャッシュを削除する必要がある。