エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

   

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を設定していく必要があります。
 
その点をご了承ください。
(いやいや、普通はそういうことは理解して使うものだと思いますが...)
 


 

1.composerを使い、bootstrap-uiをインストール

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

 
 

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

 

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

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

 
 
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行目のものに変更します。
 

 
この設定を記述することで、レイアウトファイルがデフォルトのものから、BootstrapUIの「/vendor/friendsofcake/bootstrap-ui/src/Template/Layout/default.ctp」に切り替わります。
 
 
01_CakePHP3にデザインテンプレートBootstrapを導入する方法・friendsofcake/bootstrap-ui使用
 
この時点で CakePHP3の画面にアクセスすると、CSSなどの設定ができていないため、上記のような表示が崩れた状態になります。(崩れた状態が正しい状態なので、順調に設定が進んでいるとも言えます。)
 
デフォルトのレイアウトファイルに戻したい場合は、下記の 5行目の記述を追記します。
 

 
 

3.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/
 
02_CakePHP3にデザインテンプレートBootstrapを導入する方法・friendsofcake/bootstrap-ui使用
 
03_CakePHP3にデザインテンプレートBootstrapを導入する方法・friendsofcake/bootstrap-ui使用
 
上記のサイトから「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.レイアウト調整用ビューを読み込む

 

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など)に、レイアウトを読み込む下記の記述を追記します。
 

 
テンプレートファイルへの記述場所はどこでも問題ありませんが、すべてのテンプレートに共通してファイルの先頭に記述すると分かりやすくなるでしょう。
 
ここまでで、プラグイン「friendsofcake/bootstrap-ui」と「Bootstrap」の基本的な設置は完了です。
 
 
04_CakePHP3にデザインテンプレートBootstrapを導入する方法・friendsofcake/bootstrap-ui使用
 
ここで 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行目の処理を追加します。
 

 
上記は、「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の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行目の記述を追加します。
 

 
上記の「$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 に記述する場合は下記のとおりです。
 

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

CakePHP3の関連記事

CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法
CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。
CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説
CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定
CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する
CakePHP3で環境変数を設定して本番環境と開発環境を分けて処理をする場合
CakePHP3でCookieを保存、呼び出し、削除の操作・CakePHP3.7対応
CakePHP3でアソシエーション先のカラムでデータをソートして取得したい
CakePHP3のdatetime型カラムの日時の扱い。秒まで正しく表示する方法
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 2.x 3.x

GoogleAdwords

GoogleAdwords

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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

  関連記事

MySQL、CakePHP 2.3で「tinyint(1)」の Boolean型の動作を再確認

MySQL+CakePHPの環境で「tinyint(1)」を利用する際の動作を検証。「tinyint(1)」の Boolean型について CakePHPでは自動処理が実施されていることを確認しました。

CakePHP3のアソシエーション機能を使い関連レコードをまとめて削除

CakePHP3でレコードを削除する際に関連するレコードをまとめて削除する機能の解説。フレームワークのメリットを存分に発揮し、コマンドを1行追加するだけで実装可能。

CakePHPで favicon.icoやapple-touch-icon-144-precomposed.pngが could not be foundのエラーが出るときの対処方法
CakePHPで favicon.icoやapple-touch-icon-144-precomposed.pngが could not be foundのエラーが出るときの対処方法

CakePHPで「CakeDC/Users」などルーティングを行うプラグインを利用するときに、favicon.icoやapple-touch-icon-144-precomposed.pngがNotFoundエラーになることがある。その対処方法の解説。

CakePHP3でDocumentRootやwebroot、imgフォルダのURLやドメイン、パスを取得
CakePHP3でDocumentRootやwebroot、imgフォルダのURLやドメイン、パスを取得

URLやドメイン、フォルダへのパスの取得は、ビューではUrlHelperを使い、コントローラーではRouterクラスを使います。第2引数の指定でURLを取得することも可能。

CakePHP3チュートリアルで日付と時刻のDateTimeでエラーが出たときの対処方法
CakePHP3チュートリアルで日付と時刻のDateTimeでエラーが出たときの対処方法

CakePHP3のブックマークチュートリアルには記載ミスもあり、そのまま動かない個所もある。CakePHP3では namespaceを使うようになったので、classを呼び出すときに¥を追加する必要が!

CakePHP 2.3 ID以外のカラムでアソシエーション(連携)をさせる場合の詳細ページの注意点

ID以外のカラムでアソシエーション(連携)させて詳細ページを表示させる際の考え方と注意点をサンプルソースを用いて解説しています。

CakePHP 2.3 ID以外のカラムでアソシエーション(連携)をさせる場合

ID以外のカラムでアソシエーション(連携)させるための考え方とサンプルソースを用いての説明を行っています。

CakePHP 2.3 連携先のテーブルの項目で条件抽出する場合

アソシエーション(連携)している先のテーブルの項目で条件抽出する際の考え方と注意点をサンプルソースを用いて説明しています。

CakePHPを学ぶ際にはオブジェクト指向を学ぼう

CakePHPはオブジェクト指向で書かれていますので、CakePHPを学ぶにはオブジェクト指向も学びましょう。

CakePHP 2.3で PDFを作成する方法を調査「mpdf」「TCPDF」「FPDF」

CakePHPで PDFを編集、出力するには「mpdf」「TCPDF」「FPDF」といったプラグインがあり、使い勝手を比較検討しました。TCPDFが一番良さそうでした。