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

PHP Laravel PHPライブラリ

こんにちは、コバヤシです。
前回に引き続き、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

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

まとめ

設定で変更できない箇所や手を加える必要がある箇所は多いですが、慣れれば問題ないでしょう。 次回はバリデーションから登録までをカスタマイズしていきたいと思います。