【Laravel+Breeze】フラッシュメッセージのキャンセルボタンと自動消去の書き方
Laravel9.x系。フラッシュメッセージの表示にキャンセルボタンを設置して，なおかつ一定時間が経過したら自動で消えるようにしたい。
コントローラーからフラッシュメッセージを送る
例えばテーブルの情報を更新したときにフラッシュメッセージを表示するなら，コントローラーからsession()を使ってフラッシュメッセージを送る。
public function update(Request $request, $id)
{
・・・->update(・・・)
//フラッシュメッセージを送る
session()->flash('flashmessage','情報を更新しました。');
return redirect()->route(・・・);
}レイアウトの編集
Breezeは views/layouts/app.blade.php がレイアウトのファイルになるので，これにフラッシュメッセージを表示する部分を追加する。今回はスライドしながら消えるアニメーションをやりたかったのだけど，これを実現するには jquery を使うのが今のところ一番ラクにいけるっぽい。
jqueryをインストールするのが面倒なのでインストールしないで使ってみる。まず，こちらから Download the compressed, production jQuery 3.6.0 をクリックして圧縮版のファイルをダウンロードする。そして，ダウンロードしたファイルを public/js に置く。
<head>
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script> <--追加
</head>
<body>
<script src="{{ asset('js/function.js') }}"></script> <--追加
</body>これで jquery が使えるようになる。また，body の最後でアニメーションを実行するための JavaScript のファイルを読み込んでおくのを忘れずに。
<!-- フラッシュメッセージ -->
@if (session('flashmessage'))
<div id="flash-message" class="flex justify-between items-center p-3 bg-blue-500 opacity-90 shadow">
<p class="text-white">{{ session('flashmessage') }}</p>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" id="flash-message-cancel" class="text-white bi bi-x-circle cursor-pointer" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
</div>
@endifフラッシュメッセージを表示したい部分に上のコードを張り付ける。TailwindCSS を使っているので，デザインについてはお好みで。
{{ session('flashmessage') }} がフラッシュメッセージを表示している部分になる。
また，キャンセルボタンは BootStrap Icons から SVG コードをコピペしている。
ここでフラッシュメッセージを表示するブロックに id="flash-message"，キャンセルボタンに id="flash-message-cancel" を設定していることを確認。
JavsScriptのコード
//フラッシュメッセージのキャンセルボタン
$('#flash-message-cancel').on('click', () => {
$('#flash-message').slideUp()
});
//フラッシュメッセージの自動消去
window.setTimeout(() => {
$('#flash-message').slideUp()
}, 7000);フラッシュメッセージの消去は jquery の slideUp() を用いている。
on('click', ・・・でフラッシュメッセージのブロックをクリックしたときにスライドしながら消えるようにしている。また，setTimeout() を用いて一定時間が経過するとスライドしながら消える。
SNSでシェア