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 コメントをキャンセル

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

: CakePHP 2.3で saveの便利な使い方・サンプルソース付き

CakePHPのレコードを保存、更新する際に使う Saveを詳細解説します。

: CakePHP3でPHPExcelを使ってエクセルファイルを生成、出力する方法

CakePHP3でPHPExcelを利用してエクセルを編集、出力するサンプルソース＋解説。PHPExcelのインストール方法の解説からファイル保存とダウンロードの方法なども解説。

: CakePHP3のユーザ管理・ログイン認証プラグインCakeDC/Usersのインストール解説・3.6以降対応

CakePHP3のユーザ管理プラグイン Usersは、ユーザ登録、メール認証、ログイン認証、ユーザ管理、権限管理、reCAPTCHAなど会員制のサイトを簡単に実現可能。その導入方法、カスタマイズ方法を解説。

: CakePHP 2.3 コマンドラインからPHPのシェル実行の方法解説

CakePHP 2.3でコマンドラインから CakePHPで記述した処理を実行する方法を解説します。

: CakePHP3のInsert On Duplicate Key Update（upsert）構文を解説・バルク処理も

CakePHP3で Insert … On Duplicate Key Update構文（upsert）を実行する方法を解説。バルク処理の方法も用意されているため大量処理の場合も対応可能。

: CakePHP3でassociatedを使って関連データをまとめて保存する方法（hasOne、hasMany、belongsTo）

CakePHP3で関連データをまとめて保存する方法。hasOne、hasMany、belongsTo等の関連データはassociatedを追加することでまとめて保存することができます。

: CakePHP4のフラッシュメッセージの表示場所、デザインを変更する方法を解説

CakePHP4のエラーメッセージ、完了メッセージなどを表示するフラッシュ処理の解説。Controller、レイアウトファイル、テンプレートファイルでそれぞれ処理を指定する。

: CakePHPのFlashエラーは出るが入力項目ごとのメッセージが出ないエラーの原因

Bakeして自動生成した入力フォーム処理を元に少し処理を追加したら、入力エラーがあってもエラーメッセージが表示されなくなった。原因はリダイレクトの処理にあった。

: CakePHPで同一テーブル内の値を比較する条件でレコードを取得する方法

CakePHPの同一テーブルにある項目の値を比較し条件に合致するレコードを取得する方法を解説。［”項目名”=>”値”]ではなく[”項目名 = 項目名”］と書くところがポイント。

: CakePHP3でデータを保存する save()で発生するエラーを確認する方法を解説

CakePHP3でデータ保存処理のログを取得する方法。save()では true、falseの戻り値しか取得できないが、saveOrFail()と try…catch文を使いエラーログ、エンティティを取得し、不具合の解析を行う。

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

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 コメントをキャンセル

関連記事

CakePHP 2.3で saveの便利な使い方・サンプルソース付き

CakePHP3でPHPExcelを使ってエクセルファイルを生成、出力する方法

CakePHP3のユーザ管理・ログイン認証プラグインCakeDC/Usersのインストール解説・3.6以降対応

CakePHP 2.3 コマンドラインからPHPのシェル実行の方法解説

CakePHP3のInsert On Duplicate Key Update（upsert）構文を解説・バルク処理も

CakePHP3でassociatedを使って関連データをまとめて保存する方法（hasOne、hasMany、belongsTo）

CakePHP4のフラッシュメッセージの表示場所、デザインを変更する方法を解説

CakePHPのFlashエラーは出るが入力項目ごとのメッセージが出ないエラーの原因

CakePHPで同一テーブル内の値を比較する条件でレコードを取得する方法

CakePHP3でデータを保存する save()で発生するエラーを確認する方法を解説

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")`」を使う