CakePHP3にデザインテンプレートBootstrapを導入する方法・friendsofcake/bootstrap-ui使用

2019/03/31

CakePHP3にプラグイン「friendsofcake/bootstrap-ui」を使って Bootstrapデザインを利用する方法を解説

　
CakePHP3のデザインをデフォルトのものから変えるために、プラグイン「friendsofcake/bootstrap-ui」を導入して Bootstrapデザインを使えるようにする手順を解説します。
　
　

CakePHP3で Bootstrapのテンプレートを導入する場合の注意点

　
この注意点は、私のように WordPressを長年使ってきた方に向けたものです。
　
この記事にあるように CakePHP3に Bootstrapを導入したからと言っても、インストールしただけでデザインが変わるわけではありません。
　
私は、長らく WordPressを使ってきましたので、デザインはデザインテンプレートを切り替えれば切り替わるもの、という感じのイメージを持ってしまっていました。
WordPressはその点も素晴らしく、デザインテーマを切り替えるだけで簡単に新しいデザインに切り替えることができるのです。
そのため、CakePHP3でも Bootstrapを導入すればデザインが切り替わる！なんてことを思っていたわけですが、CakePHP3では Bootstrapを導入するだけでは、Bootstrapのデザインに切り替わる！なんて事はありません。
　
この手順は、あくまでも Bootstrapによるデザイン機能を使えるようにするところまでで、デザインを変えるには、各ページの h1、h2、div、pタグなどにそれぞれ Bootstrapの classや idを設定していく必要があります。
　
その点をご了承ください。
（いやいや、普通はそういうことは理解して使うものだと思いますが．．．）
　

１．composerを使い、bootstrap-uiをインストール

　
下記コマンドを実行し、「bootstrap-ui」をインストールします。
　

$ composer require friendsofcake/bootstrap-ui
Using version ^1.4 for friendsofcake/bootstrap-ui
./composer.json has been updated
   :

$ composer require friendsofcake/bootstrap-ui

Using version ^1.4 for friendsofcake/bootstrap-ui

./composer.json has been updated

２．インストールした「bootstrap-ui」をロード

2-1．/config/bootstrap.php を編集

　
インストールした「bootstrap-ui」をロードするために、「/config/bootstrap.php」にその記述をします。
　

※CakePHP 3.6 以降の記述方法
\App\Application::addPlugin('BootstrapUI');

※CakePHP 3.5 以前の記述方法
Plugin::load('BootstrapUI');
// もしくは
\Cake\Core\Plugin::load('BootstrapUI');

※CakePHP 3.6 以降の記述方法

\App\Application::addPlugin('BootstrapUI');

※CakePHP 3.5 以前の記述方法

Plugin::load('BootstrapUI');

// もしくは

\Cake\Core\Plugin::load('BootstrapUI');

　
　
CakePHP 3.6以降で「CakePHP 3.5 以前の記述方法」を使用すると、下記のエラー（Deprecated）が表示されるようになります。
「『Plugin::load()』は非推奨になりますので、『Application::addPlugin()』を使ってください」という内容です。
　
Deprecated (16384): Plugin::load() is deprecated. Use Application::addPlugin() instead. This method will be removed in 4.0.0. - C:\xampp\htdocs\config\bootstrap.php, line: 205 You can disable deprecation warnings by setting Error.errorLevel to E_ALL & ~E_USER_DEPRECATED in your config/app.php. [CORE\src\Core\functions.php, line 311]
　
　

2-2．/src/View/AppView.php を編集

　
BootstrapUIのレイアウトファイルに切り替えるため、「/src/View/AppView.php」を編集します。
6行目、14行目を追加し、8行目を 9行目のものに変更します。
　

<?php
namespace App\View;

use Cake\View\View;
// 追加
use BootstrapUI\View\UIView;

//class AppView extends View
class AppView extends UIView    // 変更
{
    public function initialize()
    {
        // 追加
        parent::initialize();
    }
}

<?php

namespace App\View;

use Cake\View\View;

// 追加

use BootstrapUI\View\UIView;

//class AppView extends View

class AppView extends UIView // 変更

{

public function initialize()

{

// 追加

parent::initialize();

}

　
この設定を記述することで、レイアウトファイルがデフォルトのものから、BootstrapUIの「/vendor/friendsofcake/bootstrap-ui/src/Template/Layout/default.ctp」に切り替わります。
　
　

　
この時点で CakePHP3の画面にアクセスすると、CSSなどの設定ができていないため、上記のような表示が崩れた状態になります。（崩れた状態が正しい状態なので、順調に設定が進んでいるとも言えます。）
　
デフォルトのレイアウトファイルに戻したい場合は、下記の 5行目の記述を追記します。
　

    public function initialize()
    {
        // 追加
        parent::initialize();
        $this->layout = 'default';
    }

public function initialize()

{

// 追加

parent::initialize();

$this->layout = 'default';

}

３．Bootstrap をインストール

　
BootstrapUIで使用する Bootstrapをインストールします。
　
「friendsofcake/bootstrap-ui」は、2019年03月時点では、まだ「Bootstrap 4.x」系には対応できていないようなので、「Bootstrap 3.x」系の「Bootstrap 3.4」をインストールします。
　
　

3-1．Bootstrap をダウンロード

　
https://getbootstrap.com/docs/3.4/
　

　

　
上記のサイトから「bootstrap-3.4.1-dist.zip」をダウンロードし、ダンロードしたファイルを展開（解凍）します。
　
展開したフォルダ「bootstrap-3.4.1-dist」の中に「css」「fonts」「js」フォルダがあることを確認してください。
　
　
「3.4.1」以外のバージョンをダウンロードする場合は、ヘッダメニューにあるプルダウンを切り替えてください。
　
　

「friendsofcake/bootstrap-ui」の「Bootstrap 4.x」系の対応状況

　
friendsofcake/bootstrap-uiオフィシャルサイト
https://packagist.org/packages/friendsofcake/bootstrap-ui
　
上記のオフィシャルサイトに、「Requirements：Bootstrap 3.x（必須条件：Bootstrap 3.x）」とあります。
また、「Use “develop” branch for Bootstrap 4!」とあります。
　
「master」ブランチは「Bootstrap 3.x」までしか対応していないので、「Bootstrap 4.x」を使う場合は「develop」ブランチから取得してください。
ということです。
　
「Bootstrap 4.x」系への対応は、まだ開発中の「develop」ブランチになるので、使う場合は自己責任で、ということになるのでしょう。
　
　

3-2．Bootstrapファイルを設置

　
前項で取得した Bootstrapのファイルを設置する下記フォルダを作成します。
　
/webroot/css/bootstrap/
/webroot/fonts/bootstrap/
/webroot/js/bootstrap/
　
フォルダを作成したら、前項で取得した css、fonts、jsのフォルダに入っていたファイルをすべて上記のフォルダにコピーします。
　
　

４．レイアウト調整用ビューを読み込む

4-1．レイアウトテンプレートを設置

　
レイアウトテンプレートビューを設置する下記フォルダを作成します。
/src/Template/Layout/TwitterBootstrap/
　
上記フォルダに、下記の 3ファイルをコピーします。
/vendor/friendsofcake/bootstrap-ui/src/Template/Layout/examples/cover.ctp
/vendor/friendsofcake/bootstrap-ui/src/Template/Layout/examples/dashboard.ctp
/vendor/friendsofcake/bootstrap-ui/src/Template/Layout/examples/signin.ctp
　
　

4-2．テンプレートファイルにレイアウトを指定

　
各テンプレートファイル（/src/Template/Topics/index.ctpなど）に、レイアウトを読み込む下記の記述を追記します。
　

<?php $this->extend('/Layout/TwitterBootstrap/dashboard'); ?>

1	<?php $this->extend('/Layout/TwitterBootstrap/dashboard'); ?>

　
テンプレートファイルへの記述場所はどこでも問題ありませんが、すべてのテンプレートに共通してファイルの先頭に記述すると分かりやすくなるでしょう。
　
ここまでで、プラグイン「friendsofcake/bootstrap-ui」と「Bootstrap」の基本的な設置は完了です。
　
　

　
ここで CakePHP3の画面にアクセスすると、上記のように、2-2の工程のときにアクセスしたよりは Bootstrapが当たったような気がする感じの画面になります。
　
ただ、この段階では Bootstrapの基本レイアウトに切り替わっただけですので、デザインが整った状態とは言えません。
　
　
このあとのデザインを整えていく作業は、CakePHP3に限らずの話で、Bootstrapのデザインを設定していく作業ですので、きれいに整った画面にしていくためには、class、idの設定を変更していく必要があります。
　
　

Bootstrapの基本的な使い方

　
例えば、下記の一覧ページのテンプレートがあったとします。
/src/Template/Tests/index.ctp
　
これに対して、20行目前後にある「<table>」タグに「class=”table table-hover”」を追加します。
　
これにより、下記のテーブルの「ホバー」という cssを当てることができます。
http://bootstrap3.cyberlab.info/css/tables-hover.html
　
　
その他の Bootstrap3のデザインサンプルや記述方法については下記のサイトなどが参考になるかと思います。
　
Bootstrap3 日本語リファレンス
http://bootstrap3.cyberlab.info/
　
　

Bootstrapとデフォルトのデザインを混在させたい場合の設定方法

　
公開側のページは Bootstrapのデザインを使用したいけども、管理画面は自分だけしか使わないので、CakePHP3のデフォルトの管理画面のデザインのままで使いたい！
という場合の対応方法について解説します。
　
管理画面に Bootstrapのデザインを設定していくのが面倒ですからねぇ．．．
　
　
先にも解説したように、デフォルトのテンプレートを使用したい場合は、「/src/View/AppView.php」の「public function initialize(){}」の中に「$this->layout = 'default';」を追記することで、CakePHP3のデフォルトのデザインに戻すことができます。
　
これを利用して、デフォルトのレイアウトを使用するコントローラー、アクションを指定します。
具体的には下記の 5～9行目の処理を追加します。
　

public function initialize()
{
	parent::initialize();

	if ($this->request->getParam("controller") == "Topics") {
		if (in_array($this->request->getParam("action"),["index","add","edit"]) ) {
			$this->layout = 'default';
		}
	}
}

public function initialize()

{

parent::initialize();

if ($this->request->getParam("controller") == "Topics") {

if (in_array($this->request->getParam("action"),["index","add","edit"]) ) {

$this->layout = 'default';

}

　
上記は、「Topics」というコントローラの中のアクションを指定して、デフォルトのレイアウトを使用する場合の一つのサンプルです。
　
「$this->request->getParam("controller") == "Topics"」でコントローラーを指定して、「in_array($this->request->getParam("action"),["index","add","edit"])」でアクションを指定しています。
　
アクションは、一つのコントローラーの中で複数のものを指定する場合が多いでしょうから、「in_array()」を使って複数指定できるようにしています。
　
　
また、「CakeDC/Users」のようなプラグインを使っている場合などは「$this->request->getParam("plugin")」を使うとプラグインの情報を取得できます。
　
　
また、「$this->layout = 'default'」は「$this->setLayout('default')」と記述することもできます。
おそらく、「$this->setLayout('default')」は CakePHP3.4で使えるようになった記述方法と思います。（Controller側では CakePHP3.4で使えるようになった記述方法のため。）
　
　

CakePHP3.4以降では「`$this->request->getParam("controller")`」を使う

　
現在アクセスしている処理のコントローラーの情報を取得する方法は「$this->request->getParam("controller")」ですが、これは CakePHP3.4以降の書き方です。
CakePHP 3.4より前のバージョンで使う場合は下記を参考にしてください。
　

// CakePHP3.4以降
$this->request->getParam("controller")

// CakePHP3.4より前の書き方
$this->request->controller

// CakePHP3.4以降

$this->request->getParam("controller")

// CakePHP3.4より前の書き方

$this->request->controller

　
　
また、同じ様に現在のアクセスページを確認をして処理を振り分ける機能として、ログイン認証を行っていなくても表示するページを指定する処理があります。
似たような処理ですので、下記も参考にしてください。こちらは、コントローラーに記述する処理になります。
CakePHP3のCakeDC/Users、Authでログインなしでもアクセスを許可する設定
　
　

「friendsofcake/bootstrap-ui」のデフォルトのレイアウトファイルを変更する手順

　
「friendsofcake/bootstrap-ui」を使って Bootstrapを設定した場合、レイアウトファイルは下記のものが利用されることになります。
/vendor/friendsofcake/bootstrap-ui/src/Template/Layout/default.ctp
　
このファイルを直接編集してもデザインの変更はできますが、このファイルはコアファイルのため、基本的にはこのファイルは触りません。
　
じゃぁどうするか、という手順を紹介します。
　
/vendor/friendsofcake/bootstrap-ui/src/Template/Layout/default.ctp
まず、上記のファイルを
　
/src/Template/Layout/bootstrap-ui-default.ctp
上記の場所にファイル名を変更してコピーして設置します。（ファイル名は別名でも OKです。）
　
続いて、/src/View/AppView.php に下記の 6行目の記述を追加します。
　

	public function initialize()
	{
		parent::initialize();

		// レイアウトとして読み込むファイルを指定する
		$this->layout = 'bootstrap-ui-default';

	}

public function initialize()

{

parent::initialize();

// レイアウトとして読み込むファイルを指定する

$this->layout = 'bootstrap-ui-default';

}

　
上記の「$this->layout = 'bootstrap-ui-default';」は、先にも書きましたが、「$this->setLayout('bootstrap-ui-default');」という記述方法でも OKです。
　
　
これで、「bootstrap-ui-default.ctp」がレイアウトファイルになりますので、このファイルを編集していきます。
　
　

レイアウトの指定は Controllerでもできる

　
前項では /src/View/AppView.php にレイアウトファイルの指定を記述する方法を解説しましたが、/src/Controller/AppController.php に記述することもできます。
　
/src/Controller/AppController.php に記述する場合は下記のとおりです。
　

// CakePHP3.4以降
$this->viewBuilder()->setLayout('bootstrap-ui-default');

// CakePHP3.4より前
$this->viewBuilder()->layout('bootstrap-ui-default');

// CakePHP3.1より前
$this->layout('bootstrap-ui-default');

// CakePHP3.4以降

$this->viewBuilder()->setLayout('bootstrap-ui-default');

// CakePHP3.4より前

$this->viewBuilder()->layout('bootstrap-ui-default');

// CakePHP3.1より前

$this->layout('bootstrap-ui-default');

　
このテンプレートの指定は、「beforeRender()」と「initialize()」のどちらに記述しても動作します。
ですが、「beforeRender()」に記述すると、部分的にテンプレートを変更したい場合があったとしても、メソッドで指定した処理が反映されないため、「initialize()」に記述するほうがいいようです。
　
　
プラグインで使用するテンプレートをコピーして使用する方法はいろいろあるようで、「CakeDC/Users」のテンプレートを編集するときの手順については下記に記事を書いています。
CakePHP3のCakeDC/Usersの画面、メール本文テンプレートのカスタマイズ方法解説
　
　

- CakePHP 3.x 4.x CakePHP3

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: CakePHP3のCakeDC/Usersでログインユーザの所有レコードのみ更新、削除する権限管理の設定方法

CakePHP3のユーザ管理、ログイン認証プラグイン「CakeDC/Users」の権限管理を行う方法やアクセスできるコントローラー、アクションを設定、所有権を持つレコードのみ更新できる設定方法を解説。

: CakePHP3のメッセージ日本語化の設定（国際化と地域化の機能の使い方の解説）

CakePHP3の英語のメッセージを日本語化（多言語化）する手順を解説。オリジナルのメッセージを作成する方法やプログラムで文言を追加する場合の対応なども解説。

: CakePHP3のアソシエーションでJOINのタイプのLEFT、INNERを切り替えながら使う方法

CakePHP3でテーブルのアソシエーションしたデータの取得をコントローラー側でINNERかLEFTを指定する方法を解説。TableファイルにINNERで指定していてもController側で変更ができる。

: CakePHP3のCakeDC/Users、Authでログインなしでもアクセスを許可する設定

CakePHP3の Authコンポーネントや CakeDC/Usersプラグインなどを利用したユーザ管理・認証システムにおいて、ログインしていなくても見ることができるページの設定方法を解説。

: CakePHP4のCakeDC/Usersの Usersへの接続、バリデーションのカスタマイズ方法解説

CakeDC謹製Usersプラグインの紹介。CakePHP4で使う場合のUsersのカスタマイズとして入力項目のバリデーションの変更を、プラグインのファイルは触らずオーバーライドにより実装する方法を解説する。

: CakePHP 2.3　Search Pluginで検索処理　その１設置方法

CakePHPの検索プラグイン Search Pluginの設置方法と基本的な検索処理の解説です。

: CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その１

CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその1で基本的な導入方法の解説で読みながら簡単に導入が可能。

: CakePHP4のCSS、JavaScript、画像のブラウザへのキャッシュをコントロールする

CakePHP4、CakePHP3でブラウザにキャッシュさせる設定の解説。CSS、JavaScript、画像をブラウザにキャッシュさせるのか、定期的にリロードする設定にするのかの設定が可能。

: CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。

CakePHP3でajaxを利用する処理の実装方法を解説。プルダウンを変更するとデータベースの値を取得し検索結果の内容を変更するというような処理を想定。CakePHP3.6以降の CSRF対策対応済。

: URL短縮サービス「TTTオンライン（https://ttt.onl）」公開

URL短縮サービス「TTTオンライン（https://ttt.onl）」を公開。メールやSNSでは使いにくい長いURLを短いURLに変換するサービス。QRコードも。Google URL Shortenerが2019年3月にサービス終了。

PREV: URL短縮サービス「TTTオンライン（https://ttt.onl）」公開
NEXT: CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法

購読する

日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

CakePHP3にデザインテンプレートBootstrapを導入する方法・friendsofcake/bootstrap-ui使用

CakePHP3にプラグイン「friendsofcake/bootstrap-ui」を使って Bootstrapデザインを利用する方法を解説

CakePHP3で Bootstrapのテンプレートを導入する場合の注意点

１．composerを使い、bootstrap-uiをインストール

２．インストールした「bootstrap-ui」をロード

2-1．/config/bootstrap.php を編集

2-2．/src/View/AppView.php を編集

３．Bootstrap をインストール

3-1．Bootstrap をダウンロード

「friendsofcake/bootstrap-ui」の「Bootstrap 4.x」系の対応状況

3-2．Bootstrapファイルを設置

４．レイアウト調整用ビューを読み込む

4-1．レイアウトテンプレートを設置

4-2．テンプレートファイルにレイアウトを指定

Bootstrapの基本的な使い方

Bootstrapとデフォルトのデザインを混在させたい場合の設定方法

CakePHP3.4以降では「`$this->request->getParam("controller")`」を使う

「friendsofcake/bootstrap-ui」のデフォルトのレイアウトファイルを変更する手順

レイアウトの指定は Controllerでもできる

CakePHP3の関連記事

GoogleAdwords

GoogleAdwords

Message コメントをキャンセル

関連記事

CakePHP3のCakeDC/Usersでログインユーザの所有レコードのみ更新、削除する権限管理の設定方法

CakePHP3のメッセージ日本語化の設定（国際化と地域化の機能の使い方の解説）

CakePHP3のアソシエーションでJOINのタイプのLEFT、INNERを切り替えながら使う方法

CakePHP3のCakeDC/Users、Authでログインなしでもアクセスを許可する設定

CakePHP4のCakeDC/Usersの Usersへの接続、バリデーションのカスタマイズ方法解説

CakePHP 2.3　Search Pluginで検索処理　その１設置方法

CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その１

CakePHP4のCSS、JavaScript、画像のブラウザへのキャッシュをコントロールする

CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。

URL短縮サービス「TTTオンライン（https://ttt.onl）」公開

WordPress投稿にPHPを記述するショートコードの使い方add_shortcode

コピーコンテンツ対策.htaccessで直リンク禁止しリダイレクトで対応

評価点投票プラグイン10個を比較！WordPressで口コミサイトを構築

BackWPupでバックアップ・リストア（復元）の具体的手順

コンパクトキーボード・KEK-EA9AU・FKB1420の魅力

CakePHP3にデザインテンプレートBootstrapを導入する方法・friendsofcake/bootstrap-ui使用

CakePHP3にプラグイン「friendsofcake/bootstrap-ui」を使って Bootstrapデザインを利用する方法を解説

CakePHP3で Bootstrapのテンプレートを導入する場合の注意点

１．composerを使い、bootstrap-uiをインストール

２．インストールした「bootstrap-ui」をロード

2-1．/config/bootstrap.php を編集

2-2．/src/View/AppView.php を編集

３．Bootstrap をインストール

3-1．Bootstrap をダウンロード

「friendsofcake/bootstrap-ui」の「Bootstrap 4.x」系の対応状況

3-2．Bootstrapファイルを設置

４．レイアウト調整用ビューを読み込む

4-1．レイアウトテンプレートを設置

4-2．テンプレートファイルにレイアウトを指定

Bootstrapの基本的な使い方

Bootstrapとデフォルトのデザインを混在させたい場合の設定方法

CakePHP3.4以降では「$this->request->getParam("controller")」を使う

「friendsofcake/bootstrap-ui」のデフォルトのレイアウトファイルを変更する手順

レイアウトの指定は Controllerでもできる

CakePHP3の関連記事

GoogleAdwords

GoogleAdwords

Message コメントをキャンセル

関連記事

CakePHP3.4以降では「`$this->request->getParam("controller")`」を使う