Laravel Backpackを使ってみた！ - カスタマイズ編

こんにちは、コバヤシです。
前回に引き続き、Laravel Backpackを触ってカスタマイズしていきたいと思います。
まずは英語表記になっている箇所の日本語化です。

前回の記事はこちら。 tech.arms-soft.co.jp

タイトルや見出しを変更する

タイトルや見出しが日本語ではなく「User」などと表示されているので、これを変更したいと思います。

変更するファイルは以下で行います。

Http/Controllers/Admin/UserCrudController.php

<?php
public function setup()
{
    CRUD::setModel(\App\Models\User::class);
    CRUD::setRoute(config('backpack.base.route_prefix') . '/user');
    CRUD::setEntityNameStrings('user', 'users');
    
    // 以下を追加
    $this->crud->setTitle('ユーザー管理');  // タイトル
    $this->crud->setHeading('ユーザー管理'); // 見出し
    $this->crud->setSubheading('新規作成', 'create'); // サブ見出し-新規作成の時
    $this->crud->setSubheading('編集', 'edit'); // サブ見出し-編集の時
}

これにより、Userコントローラー内のタイトルや見出しは変更されるようになりました。

サイドメニューを変更する

上記の変更では、サイドメニューはUserのままなので変更します。

resources/views/vendor/backpack/ui/inc/menu_items.blade.php

{{-- This file is used for menu items by any Backpack v6 theme --}}
<li class="nav-item"><a class="nav-link" href="{{ backpack_url('dashboard') }}"><i class="la la-home nav-icon"></i> {{ trans('backpack::base.dashboard') }}</a></li>

<x-backpack::menu-item title="Users" icon="la la-question" :link="backpack_url('user')" />
以下に変更
↓↓↓↓↓↓↓
<x-backpack::menu-item title="ユーザー管理" icon="la la-question" :link="backpack_url('user')" />

bladeファイルは直接記述されているため、これを変更します。
そのままtitleを書き換える形ですね。

一覧のパンくずを変更する

パンくずを変更するには、各アクション内で指定する必要があります。
一覧のパンくずを変更するためには、UserCrudControllerのsetupListOperationの変更を行います。

app/Http/Controllers/Admin/UserCrudController.php

<?php
protected function setupListOperation()
{
    // 以下を追加
    $this->data['breadcrumbs'] = [
                'ダッシュボード' => backpack_url('dashboard'),
                'ユーザー管理' => backpack_url('user'),
                '一覧' => false,
            ];
    
    CRUD::setFromDb(); // set columns from db columns.
}

一覧の項目名を変更する

上記までで一覧のカスタマイズは完了と言いたいところですが、一覧の項目名がテーブルのフィールド名になっているため、これを変更します。
UserCrudControllerのsetupListOperationの変更を行います。

app/Http/Controllers/Admin/UserCrudController.php

<?php
protected function setupListOperation()
{
    $this->data['breadcrumbs'] = [
                'ダッシュボード' => backpack_url('dashboard'),
                'ユーザー管理' => backpack_url('user'),
                '一覧' => false,
            ];
  
    // コメントアウト
    // CRUD::setFromDb(); // set columns from db columns.
  
    // 以下を追加
    $this->crud->addColumn([
        'name' => 'name',
        'type' => 'text',
        'label' => '名前',
                    ]);
    $this->crud->addColumn([
        'name' => 'email',
        'type' => 'text',
        'label' => 'メールアドレス',
        ]);

    $this->crud->addColumn([
        'name' => 'created_at',
        'type' => 'datetime',
        'label' => '作成日時',
        'format' => 'YYYY/MM/DD HH:mm:ss',
        ]);
}

$this->crud->addColumnを追加して、表示する項目を指定します。
指定する内容は以下となります。
name : DBのフィールド名
type : 値の形式
label : 項目の名前
format : 日付の場合の表示形式

ここまでの変更で以下のようになりました。

その他の画面を変更する

一覧に続き、新規作成画面など他の画面を変更していきます。

app/Http/Controllers/Admin/UserCrudController.php

<?php

protected function setupCreateOperation()
{
    $this->data['breadcrumbs'] = [
                'ダッシュボード' => backpack_url('dashboard'),
                'ユーザー管理' => backpack_url('user'),
                '新規作成' => false,
            ];
    
    CRUD::setValidation(UserRequest::class);

    // コメントアウト
    // CRUD::setFromDb(); // set fields from db columns.
  
    // 以下を追加
    $this->crud->addField([
        'name' => 'name',
        'type' => 'text',
        'label' => '名前',
         ]);

    $this->crud->addField([
        'name' => 'email',
        'type' => 'text',
        'label' => 'メールアドレス',
         ]);

    $this->crud->addField([
        'name' => 'password',
        'type' => 'password',
        'label' => 'パスワード',
         ]);
}
  
protected function setupUpdateOperation()
{
    // コメントアウト
    // $this->setupCreateOperation();

    // 以下を追加
    CRUD::setValidation(UserRequest::class);

    $this->data['breadcrumbs'] = [
                'ダッシュボード' => backpack_url('dashboard'),
                'ユーザー管理' => backpack_url('user'),
                '編集' => false,
            ];

    $this->crud->addField([
        'name' => 'name',
        'type' => 'text',
        'label' => '名前',
         ]);

    $this->crud->addField([
        'name' => 'email',
        'type' => 'text',
        'label' => 'メールアドレス',
         ]);

    $this->crud->addField([
        'name' => 'password',
        'type' => 'password',
        'label' => 'パスワード',
         ]);
}
  
// 表示画面は 以下を追加
protected function autoSetupShowOperation()
{
    $this->crud->addColumn([
        'name' => 'name',
        'type' => 'text',
        'label' => '名前',
                    ]);
    $this->crud->addColumn([
        'name' => 'email',
        'type' => 'text',
        'label' => 'メールアドレス',
                    ]);

    $this->crud->addColumn([
        'name' => 'created_at',
        'type' => 'datetime',
        'label' => '作成日時',
        'format' => 'YYYY/MM/DD HH:mm:ss',
                    ]);
    $this->crud->addColumn([
        'name' => 'updated_at',
        'type' => 'datetime',
        'label' => '更新日時',
        'format' => 'YYYY/MM/DD HH:mm:ss',
                    ]);
}

新規追加画面では、setupCreateOperationのアクションを
編集画面は、setupUpdateOperationのアクションを変更します。
一覧画面の項目追加は$this->crud->addColumnでしたが $this->crud->addFieldを使用します。

又、表示画面はautoSetupShowOperationのアクションを追加します。
こちらは$this->crud->addColumnを使用します。

表示の項目は$this->crud->addColumnを、入力項目は$this->crud->addFieldを使用するということですね。

Back to all xxxxxを変更する

編集画面や表示画面から一覧に戻るリンクが「Back to all users」となっているので、これを変更します。

「Back to all」は日本語ファイルに記述があるので、これを変更します。
今回は単純に「一覧に戻る」としたいので、以下のように修正します。

lang/vendor/backpack/ja/crud.php

'back_to_all'  => 'Back to all',
↓
'back_to_all'  => '一覧に戻る',

しかし、このままでは「一覧に戻る users」と表示されてしまうため、「users」部分を削除します。消すための設定は無いので直接以下のbladeファイルを編集して、

<span>{{ $crud->entity_name_plural }}</span>

という箇所を削除します。

resources/views/vendor/backpack/crud/create.blade.php
resources/views/vendor/backpack/crud/edit.blade.php
resources/views/vendor/backpack/crud/show.blade.php

これで、一通りの日本語化が完了したと思います。