baserCMSのプラグインを新管理画面 admin-third に対応する

## はじめに
baserCMS v4.2 より、新管理画面「admin-third」が利用できるようになりました。それに伴い、これまでのプラグインで、管理画面を作成していた場合、機能自体は動作しますが、デザイン崩れを引き起こしてしまいます。  
基本的には、新管理画面用のCSSクラスを各パーツに付与していけば、新しいデザインに対応できますので、プラグイン開発者の方は試してみてください。

## 一覧画面を admin-third に対応する

### 新規作成ボタンを配置

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

```
$this->BcAdmin->addAdminMainBodyHeaderLinks([
	'url' => ['action' => 'add', $bannerArea['BannerArea']['id']],
	'title' => __d('baser', '新規追加'),
]);
```

### 一覧のテーブルにクラスを付与

`table` タグに、`bca-table-listup` クラスを追加します。

```
<table cellpadding="0" cellspacing="0" class="list-table sort-table" id="ListTable">
↓
<table cellpadding="0" cellspacing="0" class="list-table sort-table bca-table-listup" id="ListTable">
```

`thead` タグに `bca-table-listup__thead` クラスを追加します。

```
<thead>
↓
<thead class="bca-table-listup__thead">
```

`th` タグに、`bca-table-listup__thead-th` クラスを追加します。

```
<th>
↓
<th class="bca-table-listup__thead-th">
```

`td` タグに `bca-table-listup__tbody-td` クラスを追加します。

```
<td>
↓
<td class="bca-table-listup__tbody-td">
```

### 並び替え機能のボタンのアイコンを FontAwesome に変更

- 昇順アイコンを `<i class="bca-icon--asc"></i>` に変更
- 降順アイコンを `<i class="bca-icon--desc"></i>` に変更
- クラス `bca-table-listup__a` を追加

```
<?php echo $this->Paginator->sort('name', [
		'asc' => $this->BcBaser->getImg('admin/blt_list_down.png', array('alt' => '昇順', 'title' => '昇順')).' 表示場所',
		'desc' => $this->BcBaser->getImg('admin/blt_list_up.png', array('alt' => '降順', 'title' => '降順')).' 表示場所'
	], ['escape' => false, 'class' => 'btn-direction']
) ?>
↓
<?php echo $this->Paginator->sort('name', [
		'asc' => '<i class="bca-icon--asc"></i>'.' 表示場所',
		'desc' => '<i class="bca-icon--desc"></i>'.' 表示場所'
	], ['escape' => false, 'class' => 'btn-direction bca-table-listup__a']
) ?>
```

### アクション欄を一番最後のカラムへ移動しアイコンを 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'
]) ?>
```

アクション欄の見出しの `th` を次のように指定します。

```
<th class="bca-table-listup__thead-th"><?php echo __d('baser', 'アクション') ?></th>
```



### 一列目に、レコード選択機能や、並べ替え機能のパーツを配置する

`th` について、一括選択や並べ替えがある場合は、次のタグを利用します。

```
// 一括選択
<?php echo $this->BcForm->input('ListTool.checkall', ['type' => 'checkbox', 'label' => __d('baser', '一括選択')]) ?>
// 並び替え
<?php $this->BcBaser->link('<i class="bca-btn-icon-text" data-bca-btn-type="draggable"></i>' . __d('baser', '並び替え'), ['sortmode' => 1, $this->request->params['pass'][0]]) ?>
// 並び替え（ノーマル）
<?php $this->BcBaser->link('<i class="bca-btn-icon-text" data-bca-btn-type="draggable"></i>' . __d('baser', 'ノーマル'), ['sortmode' => 0, $this->request->params['pass'][0]]) ?>
```

`td` について、レコード選択や並び替えがある場合は次のタグを利用します。

```
// チェックボックス
<?php echo $this->BcForm->input(
	'ListTool.batch_targets.' . $data['MailField']['id'], 
	['type' => 'checkbox', 
		'label'=> '<span class="bca-visually-hidden">' . __d('baser', 'チェックする') . '</span>', 
		'class' => 'batch-targets bca-checkbox__input', 
		'value' => $data['MailField']['id']
]) ?>
// 並べ替え用ドラッグボタン
<span class="sort-handle"><i class="bca-btn-icon-text" data-bca-btn-type="draggable"></i><?php echo __d('baser', 'ドラッグ可能') ?></span>
<?php echo $this->BcForm->hidden('Sort.id' . $data['MailField']['id'], ['class' => 'id', 'value' => $data['MailField']['id']]) ?>
```

### 一括処理のコントロールを追加

一括処理用のコントロールがある場合は、テーブルの上部に次のコードを配置します。

```
<div>
	<?php echo $this->BcForm->input(
		'ListTool.batch', 
		['type' => 'select', 
			'options' => ['publish' => __d('baser', '有効'), 'unpublish' => __d('baser', '無効'), 'del' => __d('baser', '削除')], 
			'empty' => __d('baser', '一括処理')
	]) ?>
	<?php echo $this->BcForm->button(
		__d('baser', '適用'), 
		['id' => 'BtnApplyBatch', 
			'disabled' => 'disabled', 
			'class' => 'bca-btn', 
			'data-bca-btn-size' => 'lg'
	]) ?>
</div>
```

### 検索機能にクラスを追加

- 検索条件を入力するコントロールを囲む `p` タグに、 `bca-search__input-list` クラスを追加します。
- 検索条件を入力するコントロールを囲む `span` タグに、 `bbca-search__input-item` クラスを追加します。
- `label` タグに、 `bca-search__input-item-label` を追加します。

```
<p class="bca-search__input-list">
	<span class="bca-search__input-item">
		<?php echo $this->BcForm->label('BannerArea.name', '表示場所', ['class' => 'bca-search__input-item-label']) ?>&nbsp;
		<?php echo $this->BcForm->input('BannerArea.name', ['type' => 'text', 'size' => '30']) ?>
	</span>
</p>
```

- 検索ボタンを囲む `div` タグに `bca-search__btns` クラスを追加します。
- 各ボタンを `bca-search__btns-item` を追加した `div` タグで囲います。
- 各ボタンに `bca-btn` クラスを追加します。
- 各ボタンについて、 `data-bca-btn-type` 属性で、ボタンのタイプを指定します。

`data-bca-btn-type` は、以下のようなものがあります。

`search`、`clear`

```
<div class="button bca-search__btns">
	<div class="bca-search__btns-item">
		<?php $this->BcBaser->link(
			__d('baser', '検索'), 
			"javascript:void(0)", 
			['id' => 'BtnSearchSubmit', 
				'class' => 'bca-btn', 
				'data-bca-btn-type' => 'search'
		]) ?>
	</div>
	<div class="bca-search__btns-item">
		<?php $this->BcBaser->link(
			__d('baser', 'クリア'), 
			"javascript:void(0)", 
			['id' => 'BtnSearchClear', 
				'class' => 'bca-btn', 
				'data-bca-btn-type' => 'clear'
		]) ?>
	</div>
</div>
```


## 編集画面を 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">
```

### 保存ボタンにクラスを付与

- 保存ボタンを囲う `div` タグに、`bca-actions` クラスを追加
- 保存ボタンに、 `bca-btn`、`bca-actions__item` クラスを追加
- 保存ボタンに、 `data-bca-btn-type` 属性として、 `save` を追加
- 保存ボタンに、 `data-bca-btn-size` 属性として、 `lg` を追加
- 保存ボタンに、 `data-bca-btn-width` 属性として、 `lg` を追加

```
<div class="submit">
<?php echo $this->BcForm->submit('保　存', array('div' => false, 'class' => 'btn-red button')) ?>
</div>
↓
<div class="submit bca-actions">
<?php echo $this->BcForm->submit('保　存', array('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>
```
### 削除ボタンにクラスを付与

- 削除ボタンを `bca-actions__sub` クラスを追加した `div` タグで囲う
- 削除ボタンに、 `bca-btn`、`bca-actions__item` クラスを追加
- 削除ボタンに、 `data-bca-btn-type` 属性として、 `delete` を追加
- 削除ボタンに、 `data-bca-btn-size` 属性として、 `sm` を追加
- 削除ボタンに、 `data-bca-btn-color` 属性として、 `danger` を追加

```
<?php $this->BcBaser->link('削　除',
	['action' => 'delete', $bannerArea['BannerArea']['id'], $this->BcForm->value('BannerFile.id')],
	['class'=>'button', 
		'id' => 'BtnDelete'],
	sprintf('%s を本当に削除してもいいですか？', $this->BcForm->value('BannerFile.id')),
	false
) ?>
↓
<div class="bca-actions__sub">
	 <?php $this->BcBaser->link('削　除',
		['action' => 'delete', $bannerArea['BannerArea']['id'], $this->BcForm->value('BannerFile.id')],
		['class' => 'button bca-btn bca-actions__itemn', 
			'data-bca-btn-type' => 'delete',
			'data-bca-btn-size' => 'sm', 
			'data-bca-btn-color' => 'danger', 
			'id' => 'BtnDelete'],
		sprintf('%s を本当に削除してもいいですか？', $this->BcForm->value('BannerFile.id')),
		false
	) ?>
</div>
```

### ヘルプアイコンを FontAwesome に変更

これは一括置換でいけそう

```
<?php echo $this->BcBaser->img('admin/icn_help.png', array('id' => 'helpDescription', 'class' => 'btn help', 'alt' => 'ヘルプ')) ?>
↓
<i class="bca-icon--question-circle btn help bca-help"></i>
```

## まとめ

正直、けっこうメンドイですが、 `admin-third` に対応すると、デザインが刷新できて気持ちがいいです。
また、 `admin-third` テーマは、これまで大量に読み込んでいた、CSS や Javascript もほとんど圧縮されていますので、表示速度も向上します。ぜひ、チャレンジしてみてください。