Zenn
🍞

【Laravel】トースト通知ライブラリのToastrをBladeコンポーネントと自作Helperで使いやすくする【Toastr】

2022/11/23に公開
Laravel
PHP
#
blade
#
Laravel-AdminLTE
#
toastr
tech

はじめに

トースト通知が簡単に実装できるライブラリ「Toast」をLaravelで使いやすくするよう、Bladeコンポーネントと自作のHelperを作成します。
Laravel-AdminLTEでの実装例となります。

環境

  • Windows11(WSL2)
  • PHP 8.1.x
  • Node.JS 16.18.x
  • Laravel 9.40.x
  • Composer 2.x
  • npm 9.1.x
  • Laravel-AdminLTE 3.8.4

色々インストール・初期設定

Laravel

$ curl -s https://laravel.build/laravel-toastr | bash

Laravel Sail

公式リファレンス

$ cd laravel-toastr
$ ./vendor/bin/sail up -d

http://localhost/ を開くとお馴染みのLaravelのHomeが表示されるはずです

Laravel Breeze , Laravel-AdminLTE

アプリケーションコンテナ内に入り、BreezeとLaravel-AdminLTEをインストールします
Laravel Breeze 公式リファレンス
Laravel-AdminLTE 公式Wiki

$ sail shell
# migrate
$ php artisan migrate
# Breeze
$ composer require laravel/breeze --dev
$ php artisan breeze:install
$ php artisan migrate
$ npm install
# Laravel-AdminLTE
$ composer require jeroennoten/laravel-adminlte
$ php artisan adminlte:install

登録・ログインのViewをAdminLTE仕様に変更

http://localhost/login/ を開くとLaravel Breezeのデフォルトログイン画面が表示されます。

今回はLaravel-AdminLTEを使用するので、ログイン・登録周りの見た目を変更します。
※以下のコマンドを行うとBreezeでインストールしたbladeファイルが上書きされることに注意してください

$ php artisan adminlte:install --only=auth_views
# The authentication views already exists. Want to replace the views? (yes/no) [no]:
# 認証のViewはすでに存在しますが、置換しますか？と聞かれるので、yesと入力します
 > yes

# Authentication views installed successfully.

再度 http://localhost/login/ を開くとAdminLTE仕様にViewが変化していることが確認できます。

DashboardをAdminLTE仕様に変更

アカウントを作成しログインすると、 http://localhost/dashboard/ へ遷移しますが、まだBreeze仕様のままです。

Laravel-AdminLTEのWikiの通りにbladeファイルを編集します。

resource/views/dashboard.blade.php
- <x-app-layout>
-     <x-slot name="header">
-         <h2 class="font-semibold text-xl text-gray-800 leading-tight">
-             {{ __('Dashboard') }}
-         </h2>
-     </x-slot>
- 
-     <div class="py-12">
-         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-             <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
-                 <div class="p-6 text-gray-900">
-                     You're logged in!
-                 </div>
-             </div>
-         </div>
-     </div>
- </x-app-layout>
+ @extends('adminlte::page')
+ 
+ @section('title', 'Dashboard')
+ 
+ @section('content_header')
+     <h1>Dashboard</h1>
+ @stop
+ 
+ @section('content')
+     <p>Welcome to this beautiful admin panel.</p>
+ @stop
+ 
+ @section('css')
+     <link rel="stylesheet" href="/css/admin_custom.css">
+ @stop
+ 
+ @section('js')
+     <script> console.log('Hi!'); </script>
+ @stop

ページを更新すると以下のようになります。

本題

ここから本記事のタイトルであるToastr用のコンポーネント、Helperを作成していきます。

Helperクラスの作成

Toastr用にセッションのフラッシュメソッドで、セッションにKey,Valueを登録するだけなので、
シンプルです。

appの下にHelperディレクトリを作成して、Toastr.phpファイルを作成します。
ディレクトリ・ファイル名は任意のもので大丈夫です。

app/Helpers/Toastr.php
<?php

declare(strict_types=1);

namespace App\Helpers;

class Toastr
{
    /**
     * Toastr success
     *
     * @param string $message
     * @return void
     */
    public static function success(string $message)
    {
        return session()->flash('toastr_success', $message);
    }

    /**
     * Toastr info
     *
     * @param string $message
     * @return void
     */
    public static function info(string $message)
    {
        return session()->flash('toastr_info', $message);
    }

    /**
     * Toastr warning
     *
     * @param string $message
     * @return void
     */
    public static function warning(string $message)
    {
        return session()->flash('toastr_warning', $message);
    }

    /**
     * Toastr error
     *
     * @param string $message
     * @return void
     */
    public static function error(string $message)
    {
        return session()->flash('toastr_error', $message);
    }
}

alias登録

config/app.phpのaliasに作成したToastrクラスを登録します。

config/app.php
'aliases' => Facade::defaultAliases()->merge([
+       'Toastr' => App\Helpers\Toastr::class,
    ])->toArray(),

Componentの作成

resources/views/componets下にファイルを作成します。
トースターのオプションはデフォルト値を設定していますが、属性値を付与することで使用する場所に応じて変更できるようにしています。

<x-toastr></x-toastr>
や
<x-toastr timeOut="5000"></x-toastr>
といった形で呼び出すことができます。

resources/views/components/toastr.blade.php
<script>
    toastr.options = {
        "progressBar": {{ $progressBar ?? "true" }},
        "timeOut": {{ $timeOut ?? "3000" }},
        "closeButton": {{ $closeButton ?? "false" }},
        "positionClass": "{{ $positionClass ?? 'toast-top-right' }}"
    }
</script>
@if (session('toastr_success'))
    <script>
        toastr.success('{{ session('toastr_success') }}');
    </script>
@endif
@if (session('toastr_info'))
    <script>
        toastr.info('{{ session('toastr_info') }}');
    </script>
@endif
@if (session('toastr_warning'))
    <script>
        toastr.warning('{{ session('toastr_warning') }}');
    </script>
@endif
@if (session('toastr_error'))
    <script>
        toastr.error('{{ session('toastr_error') }}');
    </script>
@endif

動作確認

Toastrの有効化

Laravel-AdminLTEではconfigファイルでプラグインの読み込みを自由に設定できます。
pluginsにToastrを追加します。
確認なのでCDNを読み込むようにします。

config/adminlte.php
'plugins' => [
...
...
+        'Toastr' => [
+            'active' => true,
+            'files' => [
+                [
+                    'type' => 'css',
+                    'asset' => false,
+                    'location' => '//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css',
+                ],
+                [
+                    'type' => 'js',
+                    'asset' => false,
+                    'location' => '//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js',
+                ],
+            ],
+        ],
],

コントローラー

$ php artisan make:controller SampleController --invokable

コントローラーでフラッシュデータを登録し、ダッシュボードにリダイレクトするだけの処理を書きます。

app/Http/Controllers/SampleController.php
<?php

namespace App\Http\Controllers;

use Toastr;
use Illuminate\Http\Request;

class SampleController extends Controller
{
    /**
     * Handle the incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function __invoke(Request $request)
    {
        Toastr::success('成功しました！');
        return redirect(route('dashboard'));
    }
}

ルーティング

routes/web.php
...
...
Route::middleware('auth')->group(function () {
    Route::get('/sample', \App\Http\Controllers\ProfileController::class)->name('sample');
});
...
...

Blade

dashboardのbladeファイルの@section('js')内にtoastrコンポーネントを追記します。

resources/views/dashboard.blade.php
@section('js')
+   <x-toastr></x-toastr>
@stop

ページ確認

http://localhost/sample/ にアクセスするとページ右上にToastrが出現します。

errorメッセージ

successではなくerrorにする場合はControllerの記述を変えます。
また、Toastrの表示時間も短くするためx-toastrに属性値を追加します。

app/Http/Controllers/SampleController.php
- Toastr::success('成功しました！');
+ Toastr::error('失敗しました！');
resources/views/dashboard.blade.php
- <x-toastr></x-toastr>
+ <x-toastr timeOut="500"></x-toastr>

すると以下のように変わり、Toastrが消えるまでの時間も短くなります。

さいごに

共通化できてすっきりとしましたが、複数人で開発する場合は事前に共有が必要だと感じました。
使い方が間違っているなどありましたら、お知らせいただけると幸いです。

Discussion