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のメッセージ日本語化の設定（国際化と地域化の機能の使い方の解説）

CakePHP3の英語のメッセージを日本語化（多言語化）する手順を解説。オリジナルのメッセージを作成する方法やプログラムで文言を追加する場合の対応なども解説。

: CakePHP 2.3で PDFを作成する方法を調査「mpdf」「TCPDF」「FPDF」

CakePHPで PDFを編集、出力するには「mpdf」「TCPDF」「FPDF」といったプラグインがあり、使い勝手を比較検討しました。TCPDFが一番良さそうでした。

: CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法

CakePHP3でデフォルトのソート条件を設定しつつ画面上でユーザがソート条件を選択したときもソート処理を実行させる方法を解説。ソート条件はページネーションの処理として実装。

: CakePHP4で公開側と管理側のデザインテンプレートを分ける方法・setLayout()

CakePHP4でデフォルトのレイアウトファイル「default.php」は管理側に使用し、これとは別のデザインを公開側のページに設定したい、を実装する方法を解説。

: CakePHP4の定数定義ファイルを環境変数によって本番と開発を振り分ける方法解説

CakePHP4で開発環境と本番環境とで違う設定ファイルを読み込ませて環境ごとに定数を切り替える方法を解説。Apacheのhttpd.confに環境変数を設定しそれを読み込み判別する。

: CakePHP3のHtmlHelperのLink設定のまとめ。mailto、URL、Root／Homeのリンクなども

CakePHP3でHtmlHelperを使ってリンクの設定をする方法のまとめ。基本形からURLを指定、class、id、targetを指定、mailtoのリンク、画像をアンカーに、JavaScriptのダイアログなどの解説。

: CakePHP3にデザインテンプレートBootstrapを導入する方法・friendsofcake/bootstrap-ui使用

CakePHP3にプラグイン「friendsofcake/bootstrap-ui」、デザインテンプレート「Bootstrap」を設置する手順を解説。Bootstrapの簡単な使い方やデフォルトのデザインとの混在方法なども解説。

: CakePHP3でレコードを保存（追加、更新、Insert、Update）する複数の方法を紹介

CakePHP3でレコードを追加、更新（Insert、Update）する記述方法を解説。1件ずつ処理、全件をまとめて処理、条件に該当する複数件のレコードを処理方法をサンプルコードを用いて解説。