baserCMSの「Banner（バナー管理）」プラグインのUIをadmin-third に対応化する

2021/09/16 web

以下の@ryuringさんの「baserCMSのプラグインを新管理画面 admin-third に対応する」Qiita記事の解説に倣ってBannerプラグインをadmin-third対応化してみました。

完成形は、以下のような感じ。

画像の説明

基本は、主にViewフォルダ内の各ファイルー各パーツに地道にadmin-third用のクラスを付けていく作業なのですが、ryuringさんの記事に加えて補足的に読んでいただく前提で、いくつか私がハマったところ、悩んだところを付け加えていきたいと思います。また、使い勝手をよくするために、上位画面の「一覧に戻る」ボタンを一部付け加えたりもちょこっとしています。

作業をすすめる上での前提条件

具体的な内容の前に、本作業を進めていく前提条件を整理しておきます。

まず、ryuringさんの記事は、「baserCMSのプラグインを新管理画面 admin-third に対応する」というタイトルですが、実際には、「admin-thirdに対応化する」です。つまり、admin-secondでは使えなくなります。admin-secondでも使用するのであれば、一部に管理画面の違いによる条件分岐を加える必要がありますが、運用上、admin-secondとadmin-thirdの管理画面を行ったり来たりするとか、もともとadmin-secondで使ってたプラングインなんだから、たまに気分でadmin-secondに戻してみたいとか、という人でもない限りadmin-secondに戻ることはない気がするので、きれいさっぱりと「admin-third対応化」と読み替えて爆進したいと思います。ちなみに、条件分岐を加えるのであれば、

<?php if ($this->BcBaser->siteConfig['admin_theme'] == 'admin-third'): ?>
 /* admin-third使用時の新たな構文 */
<?php else: ?>
 /* admin-second使用時のこれまでの構文 */
<?php endif ?>

などといった感じかと。

ときに、近頃リリースされるbaserCMSのプラグインで、管理画面テーマ区別したり、限定するような要件のアナウンスにお目にかかったことがありませんが、ほとんど、有無も言わせずadmin-third限定だったりします。

ハマった箇所の具体的な対応

それでは、本題に入ります。 ryuringさんの記事を引用しつつ、ハマったところをコメントしていきたいと思います。

まずは、これ。

新規作成ボタンを配置
admin-third では、タイトルの横に新規追加ボタンを配置します。テンプレート上の上部あたりに次の関数を実行します。

とありますが、テンプレートとは、どのファイルのこと？と実際ウロたえてしまいました。

対象ファイル：
/app/Plugin/Banner/View/BannerAreas/admin/index.php
/app/Plugin/Banner/View/BannerFiles/admin/index.php

<?php
/**
 * [BANNER] バナーエリア管理
 *
 * @copyright       Copyright 2014 - 2018, D-ZERO Co.,LTD.
 * @link            http://www.d-zero.co.jp/
 * @package         Banner
 * @license         MIT
 */
$this->BcBaser->js(array(
    'admin/libs/jquery.baser_ajax_data_list',
    'admin/libs/jquery.baser_ajax_sort_table',
    'admin/libs/baser_ajax_data_list_config'
));
$this->BcAdmin->addAdminMainBodyHeaderLinks([
    'url' => ['action' => 'add'],
    'title' => __d('baser', 'バナーエリア新規追加'),
]);
?>

<?php
/**
 * [BANNER] バナー管理
 *
 * @copyright       Copyright 2014 - 2018, D-ZERO Co.,LTD.
 * @link            http://www.d-zero.co.jp/
 * @package         Banner
 * @license         MIT
 */
$this->BcBaser->js(array(
    'admin/libs/jquery.baser_ajax_data_list',
    'admin/libs/jquery.baser_ajax_sort_table',
    'admin/libs/baser_ajax_data_list_config'
));
$this->BcAdmin->addAdminMainBodyHeaderLinks([
    'url' => ['action' => 'add', $bannerArea['BannerArea']['id']],
    'title' => __d('baser', '新規バナー追加'),
]);
?>

といった感じで冒頭のjs読み込み直後に配置してみました。

次に、

アクション欄を一番最後のカラムへ移動しアイコンを FontAwesome に変更
admin-third では、編集、削除等を配置するアクション欄は一番最後、のカラムに移動します。
また、アイコンを FontAwesome に変更する場合は次の手順を踏みます。

リンク対象を空文字に変更

bca-btn-icon クラスを付与

data-bca-btn-type にアイコンを特定する文字を指定

data-bca-btn-size に lg

data-bca-btn-type には、色々してできますが、次のようなものがあります。
th-list、edit、copy、edit、delete、publish、unpublish

<?php $this->BcBaser->link(
    $this->BcBaser->getImg('admin/icn_tool_manage.png', ['alt' => 'バナー管理', 'class' => 'btn']),
    ['controller' => 'banner_files', 'action' => 'index', $data['BannerArea']['id']], 
    ['title' => 'バナー管理']
) ?>
↓
<?php $this->BcBaser->link(
    '',
    ['controller' => 'banner_files', 'action' => 'index', $data['BannerArea']['id']],
    ['title' => 'バナー管理', 
        'class' => 'bca-btn-icon', 
        'data-bca-btn-type' => 'th-list', 
        'data-bca-btn-size' => 'lg'
]) ?>

ってところ。サンプルのリスト表示アクション用のアイコンに関するコードでは、クラス表記が'class' => 'btn'から'class' => 'bca-btn-icon'に差し替えられているので、copy delete publish unpublishも同様に全て差し替えてしまったところ、画面遷移もしないし、画像の説明のようなアラートメッセージの類も出なくなってしまいました。ウロウロと調べてみると差し替えてしまった旧表記のクラスが、baser_ajax_data_list_config.jsのスクリプト呼び出し用だった様で、改めて追記。無事に正しい動作になりました。

対象ファイル：
/app/Plugin/Banner/View/Elements/admin/banner_areas/index_row.php
/app/Plugin/Banner/View/Elements/admin/banner_files/index_row.php

該当する箇所を以下に抜粋しました。

    <td style="white-space: nowrap" class="row-tools bca-table-listup__tbody-td">
        <?php $this->BcBaser->link(
            '',
            ['controller' => 'banner_files', 'action' => 'index', $data['BannerArea']['id']],
            ['title' => 'バナー管理', 
            'class' => 'bca-btn-icon', 
            'data-bca-btn-type' => 'th-list', 
            'data-bca-btn-size' => 'lg'
        ]) ?>
        <?php $this->BcBaser->link(
            '',
            ['action' => 'edit', $data['BannerArea']['id']],
            ['title' => '編集', 
            'class' => 'bca-btn-icon', 
            'data-bca-btn-type' => 'edit', 
            'data-bca-btn-size' => 'lg'
        ]) ?>
        <?php $this->BcBaser->link(
            '',
            ['action' => 'ajax_copy', $data['BannerArea']['id']],
            ['title' => 'コピー', 
            'class' => 'btn-copy bca-btn-icon', 
            'data-bca-btn-type' => 'copy', 
            'data-bca-btn-size' => 'lg'
        ]) ?>
        <?php $this->BcBaser->link(
            '',
            ['action' => 'ajax_delete', $data['BannerArea']['id']],
            ['title' => '削除',
            'class' => 'btn-delete bca-btn-icon',
            'data-bca-btn-type' => 'delete', 
            'data-bca-btn-size' => 'lg'
        ]) ?>
    </td>

次に、

編集画面を admin-third に対応する
フォームのテーブルにクラスを付与
table タグに bca-form-table クラスを追加します。
<table cellpadding="0" cellspacing="0" class="form-table section">
↓
<table cellpadding="0" cellspacing="0" class="form-table section bca-form-table">
th タグに bca-form-table__labelクラスを追加します。
<th class="col-head"><?php echo $this->BcForm->label('BannerArea.name', '表示場所名') ?></th>
↓
<th class="col-head bca-form-table__label"><?php echo $this->BcForm->label('BannerArea.name', '表示場所名') ?></th>
td タグに bca-form-table__input クラスを追加します。
<td class="col-input">
↓
<td class="col-input bca-form-table__input">

というところ。具体的にどのファイルのことだろうっていうのが、やっぱりなかなかわからなかったので念のため対象ファイルを記載してみました。

対象ファイル：
/app/Plugin/Banner/View/BannerAreas/admin/form.php
/app/Plugin/Banner/View/BannerFiles/admin/form.php

その他、ちんまい部分や追加した部分

文中に紛れたアイコンをFontAwesomeに変更。

たとえば、これ。画像の右肩にある「ヘルプ」をクリックして表示される部分。文中に紛れたアイコンをFontAwesomeに変更しました。画像の説明

<p>バナーエリアの管理が行えます。</p>
<ul>
    <li>新しいバナーエリアを登録するには、画面上の「バナーエリア新規追加」ボタンをクリックします。</li>
    <li>操作欄の <i class="bca-icon--th-list" data-bca-btn-size="md"></i> ボタンからは、指定エリアのバナーファイル管理画面へ移動できます。</li>
    <li>操作欄の <i class="bca-icon--edit" data-bca-btn-size="md"></i> ボタンからは、バナーエリア設定の編集画面へ移動できます。</li>
</ul>

こんな感じです。

対象ファイル：
/app/Plugin/Banner/View/Elements/admin/helps/banner_areas.php
/app/Plugin/Banner/View/Elements/admin/helps/banner_files.php
/app/Plugin/Banner/View/Elements/admin/helps/banner_files_form.php

バナーエリアやバナーの追加/編集画面から各一覧に戻るボタンを追加。

次に、バナーエリアやバナーの追加/編集画面から各一覧に戻るボタンを追加してみました。画像の説明

</table>
<div class="submit bca-actions">
    <div class="bca-actions__main">
        <?php $this->BcBaser->link('バナーエリア一覧に戻る',
            ['controller' => 'banner_areas', 'action' => 'index'],
            ['class' => 'bca-btn  bca-actions__item', 'data-bca-btn-type' => 'back-to-list']
        ) ?>
    </div>
    <div class="bca-actions__main">
        <?php
        echo $this->BcForm->button(__d('baser', '保存'),
            [
                'div' => false,
                'class' => 'button bca-btn bca-actions__item',
                'data-bca-btn-type' => 'save',
                'data-bca-btn-size' => 'lg',
                'data-bca-btn-width' => 'lg',
            ]);
            ?>
        </div>
    </div>
<?php echo $this->BcForm->end() ?>

画像の説明

<?php echo $this->BcFormTable->dispatchAfter() ?>

<div class="submit bca-actions">
<?php if($this->request->action == 'admin_add'): ?>
<div class="bca-actions__main">
        <?php $this->BcBaser->link('一覧に戻る',
            ['controller' => 'banner_files', 'action' => 'index', $bannerArea['BannerArea']['id']],
            ['class' => 'bca-btn  bca-actions__item', 'data-bca-btn-type' => 'back-to-list']
        ) ?>
        <?php
        echo $this->BcForm->button(__d('baser', '保存'),
            [
                'div' => false,
                'class' => 'button bca-btn bca-actions__item',
                'data-bca-btn-type' => 'save',
                'data-bca-btn-size' => 'lg',
                'data-bca-btn-width' => 'lg',
            ]);
        ?>
</div>
<?php else: ?>
<div class="bca-actions__main">
        <?php $this->BcBaser->link('一覧に戻る',
            ['controller' => 'banner_files', 'action' => 'index', $bannerArea['BannerArea']['id']],
            ['class' => 'bca-btn  bca-actions__item', 'data-bca-btn-type' => 'back-to-list']
        ) ?>
        <?php
        echo $this->BcForm->button(__d('baser', '保存'),
            [
                'div' => false,
                'class' => 'button bca-btn bca-actions__item',
                'data-bca-btn-type' => 'save',
                'data-bca-btn-size' => 'lg',
                'data-bca-btn-width' => 'lg',
            ]);
        ?>
</div>
<div class="bca-actions__sub">
            <?php $this->BcBaser->link(__d('baser', '削除'), ['action' => 'delete', $bannerArea['BannerArea']['id'], $this->BcForm->value('BannerFile.id')],
            [
                'class' => 'submit-token button bca-btn bca-actions__item',
                'data-bca-btn-type' => 'delete',
                'data-bca-btn-size' => 'sm'
            ],
            sprintf('No：%s を本当に削除してもいいですか？', $this->BcForm->value('BannerFile.id')),
            false); ?>
    </div>
<?php endif ?>
</div>
<?php echo $this->BcForm->end() ?>

こんな感じです。

バナーの追加/編集画面の公開状態欄を修正。

次に、バナーの追加/編集画面の公開状態欄を「公開状態」と「公開期間」に分割し、admin-third用のクラスの適用してみました。

修正前↓ 画像の説明

修正後↓ 画像の説明

修正前↓

    <tr>
        <th class="col-head bca-form-table__label">
            <?php echo $this->BcForm->label('BannerFile.status', '公開状態') ?>
        </th>
        <td class="col-input bca-form-table__input">
            <?php echo $this->BcForm->input('BannerFile.status', array(
                    'type'      => 'radio',
                    'options'   => $statuses,
                    'legend'    => false,
                    'separator' => '&nbsp;&nbsp;')) ?>
            <?php echo $this->BcForm->error('BannerFile.status') ?>
            <?php echo $this->BcForm->dateTimePicker('BannerFile.publish_begin', array('size' => 12, 'maxlength' => 10), true) ?>
            &nbsp;〜&nbsp;
            <?php echo $this->BcForm->dateTimePicker('BannerFile.publish_end', array('size' => 12, 'maxlength' => 10),true) ?>
            <?php echo $this->BcForm->error('BannerFile.publish_begin') ?>
            <?php echo $this->BcForm->error('BannerFile.publish_end') ?>
        </td>
    </tr>

修正後↓

    <tr>
        <th class="col-head bca-form-table__label">
            <?php echo $this->BcForm->label('BannerFile.status', __d('baser', '公開状態')) ?>
        </th>
        <td class="col-input bca-form-table__input">
            <?php echo $this->BcForm->input('BannerFile.status', array(
                    'type'      => 'radio',
                    'options'   => $statuses,
                    'legend'    => false,
                    'separator' => '&nbsp;&nbsp;')) ?>
            <?php echo $this->BcForm->error('BannerFile.status') ?>
        </td>
    </tr>
    <tr>
        <th class="col-head bca-form-table__label">
            <?php echo $this->BcForm->label('BannerFile.status', __d('baser', '公開期間')) ?>
        </th>
        <td class="col-input bca-form-table__input">
            <?php echo $this->BcForm->input('BannerFile.publish_begin', [
                    'type' => 'dateTimePicker',
                    'size' => 12,
                    'maxlength' => 10,
                    'dateLabel' => ['text' => '開始日付'],
                    'timeLabel' => ['text' => '開始時間']
                ]) ?>
            &nbsp;〜&nbsp;
            <?php echo $this->BcForm->input('BannerFile.publish_end', [
                    'type' => 'dateTimePicker',
                    'size' => 12,
                    'maxlength' => 10,
                    'dateLabel' => ['text' => '終了日付'],
                    'timeLabel' => ['text' => '終了時間']
                ]) ?>
            <?php echo $this->BcForm->error('BannerFile.publish_begin') ?>
            <?php echo $this->BcForm->error('BannerFile.publish_end') ?>
        </td>
    </tr>

最後に

単に表示をadmin-thirdに合わせて気持ちよくなろうというのが目的で初めてみましたが、やってみると、baserCMSプラグインの構造やらもそれなりに理解できて有意義だったように思います。