CakePHP3 BootstrapUIを使ってデザインをそれっぽくする

CapkePHP3でBootstrapを使うためのプラグインとして、[BootstrapUI](https://github.com/FriendsOfCake/bootstrap-ui)があります。
今回はこのプラグインを使って、bakeで自動生成される画面にBootstrapを適用してデザインをそれっぽくします。
適用する画面は以下の2画面です。
基本的にはCakePHP3のクイックスタートガイドに沿って作ったものですが、ユーザー名がemailではなくnameにしています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/115996/65f5e90e-2219-262a-4808-2e767a8129fc.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/115996/488b7ef4-e86e-dfd7-346e-e0e29ab38d5f.png)

# インストールと設定
BootstrapUIをcomposerを使ってインストールします。
`composer require friendsofcake/bootstrap-ui:dev-master`

インストール後、プラグイン内のcssとjsの参照をCDNのものに変更します。
せっかくなので、俺はこの最新版を選ぶぜ。

```vendor/friendsofcake/bootstrap-ui/src/Template/Layout/default.ctp
$this->prepend('css', $this->Html->css(['bootstrap/bootstrap']));
　↓
$this->prepend('css', $this->Html->css(['//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css']));

$this->prepend('script', $this->Html->script(['jquery/jquery', 'bootstrap/bootstrap']));
 ↓
$this->prepend('script', $this->Html->script(['//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js']));
```

# プロジェクトに適用
bootstrap.phpでBootstrapUIをロードします。
bootstrap.phpは全体の設定を行うファイルであり、デザインのBootstrapとは異なるので注意。
ファイルの一番最後とかでいいので、以下の読み込み処理を追加します。

```config/bootstrap.php
Plugin::load('BootstrapUI');
```

また、AppView.phpを以下のように書き換えます。

```View/AppView.php
<?php
namespace App\View;

use BootstrapUI\View\UIView;

class AppView extends UIView
{
    public function initialize()
    {
        parent::initialize();
    }
}
```
デフォルトではViewを継承しているのを、UIViewを継承し、initializeメソッドで親のinitializeメソッドを呼び出すようにします。

# 表示を見てみる
ここまでで、Bootstrapをプロジェクトに適用させることができたので、表示を確認してみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/115996/bf39bbb1-26ee-d35f-01a6-584fc1c3d130.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/115996/7be62b07-b3b7-5417-1844-2d167d18dc3c.png)


フォントとかはBootstrapっぽくなりましたが、特に一覧画面は崩れがひどいです。

# Layoutを適用して表示を直す
BootstrapUIには便利なレイアウトが同梱されています。
`vendor/friendsofcake/bootstrap-ui/src/Template/Layout/example`の中に以下の3種類のレイアウトがあります。

- signin.ctp：ログイン画面用
- dashboard.ctp：一覧画面とか用
- cover.ctp：用途不明(今回は使わない)

この3つを以下のパスに移動します。
`src/Template/Layout/TwitterBootstrap`
その後、ログイン画面と一覧画面のctpファイルに以下を追加します。

```login.ctp
<?= $this->extend('../Layout/TwitterBootstrap/signin'); ?>
```

```index.ctp
<?= $this->extend('../Layout/TwitterBootstrap/dashboard'); ?>
```

これで表示を見てみます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/115996/b1aea3d8-3816-1b29-893c-815cb3176152.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/115996/fbf7af3f-b15f-1980-9cd2-aaa3836a3bb3.png)

ログインはだいぶよくなりましたが、一覧画面はまだ崩れてるのでもう少しテコ入れします。

# 一覧画面の修正
## テーブルの表示を直す
テーブルの表示を直すためにはtableタグにBootstrapで定義されているtableクラスを追加します。

```index.ctp
<table cellpadding="0" cellspacing="0" class="table">
```

## サイドバーにActionsを移動する
Actionsのタグをappendでtb_sidebarに設定します。

```index.ctp
<?= $this->append('tb_sidebar'); ?>
<nav class="large-3 medium-4 columns" id="actions-sidebar">
    <ul class="side-nav">
        <li class="heading"><?= __('Actions') ?></li>
        <li><?= $this->Html->link(__('New User'), ['action' => 'add']) ?></li>
    </ul>
</nav>
<?= $this->end(); ?>
```

# 最終確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/115996/552d3fc9-df89-28da-8dda-e32dede22724.png)

だいぶよくなったのではないでしょうか。
BootstrapUIにはほかにも便利なヘルパーがあるので、それらも組み合わせていくとBootstrapを使った画面をCakePHPで簡単に作ることができます。
あと、誰かcover.ctpの使い道を知っていたら教えていただけると幸いです。

# 参考
[CakePHP3でtwitter bootstrapを使う（導入編）](http://qiita.com/milano/items/f244f9ac5514f0e6b213)
[BootstrapUI(README.md)](https://github.com/FriendsOfCake/bootstrap-ui)