CakePHP3でTwitter bootstrapを利用する場合、多く利用されている物としてはHolt59/cakephp3-bootstrap-helpersやFriendsOfCake/bootstrap-uiなどのBootstrap Helpersがある。
Contents
Bower経由でBootstrapをインストール
npmのインストール
CentOSの場合
1 | sudo yum install -y npm |
ubuntuの場合
1 2 3 | sudo apt install nodejs sudo apt install npm sudo ln -s /usr/bin/nodejs /usr/bin/node |
bowerのインストール
1 | sudo npm install -g bower |
Bootstrapのインストール
1 2 3 4 5 6 7 8 9 10 11 12 | bower install bootstrap mkdir -p webroot/css/bootstrap webroot/js/bootstrap webroot/js/jquery webroot/css/fonts cp bower_components/bootstrap/dist/css/* webroot/css/bootstrap/. cp bower_components/bootstrap/dist/js/* webroot/js/bootstrap/. cp bower_components/jquery/dist/* webroot/js/jquery/. cp bower_components/bootstrap/dist/fonts/* webroot/css/fonts/. echo /bower_components >> .gitignore git add .gitignore \ bower.json \ webroot/css/bootstrap \ webroot/js/bootstrap \ webroot/js/jquery |
プラグインのインストール
Holt59/cakephp3-bootstrap-helpers あるいは FriendsOfCake/bootstrap-ui のどちらかのプラグインを使用する。
Holt59/cakephp3-bootstrap-helpers
インストール
composerでインストールする。
1 | composer require holt59/cakephp3-bootstrap-helpers:dev-master |
必要なファイルが vendor/holt59/cakephp3-bootstrap-helpers/ 配下にセットされる。
bootstrap.phpでロード
関係ない話だが、ここではbootstrapの意味が２つある。
一つはTwitter bootstrapでTwitter社が開発、提供しているcss/Javascriptの事であり、デザイナーでなくともデザインがある程度簡単に作れる。
もう一つの意味は、bootstrap.phpでも使われているbootstrapであり、元々はブーツのストラップを引っ張り上げる動作を、「自分で自分自身を引っ張り上げているようだ」と比喩された。
コンピュータの起動時には色々な処理が自動的に実行されるが、プログラムは（コマンドを入力するなどしないと）勝手には実行されない。
では、起動時のプログラムを実行するプログラムはどうするのか？という話が、
（他の力を借りずに自分自身で立ち上げる様が）上記の「自分自身を引っ張り上げる」様と同じであり、こう呼ばれるようになった。
まぁ、単に「ブート」と呼ばれる事の方が多いと思う。
1 | Plugin::load('Bootstrap'); |
Helperに読み込ませる
1 2 3 4 5 6 7 8 9 10 11 12 13 | class AppController extends Controller { public $helpers = [ 'Form' => ['className' => 'Bootstrap.Form'], 'Html' => ['className' => 'Bootstrap.Html'], 'Modal' => ['className' => 'Bootstrap.Modal'], 'Navbar' => ['className' => 'Bootstrap.Navbar'], 'Paginator' => ['className' => 'Bootstrap.Paginator'], 'Panel' => ['className' => 'Bootstrap.Panel'], ]; /** * Initialization hook method. |
FriendsOfCake/bootstrap-ui
インストール
composerでインストールする。
1 | composer require friendsofcake/bootstrap-ui |
bootstrap.phpでロード
1 | Plugin::load('BootstrapUI'); |
またはコマンドラインで
1 | bin/cake plugin load BootstrapUI |
としても良い。
AppViewのセットアップ
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 32 33 34 35 36 37 38 39 40 41 | <?php /** * CakePHP(tm) : Rapid Development Framework (http://cakephp.org) * Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org) * * Licensed under The MIT License * Redistributions of files must retain the above copyright notice. * * @copyright Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org) * @link http://cakephp.org CakePHP(tm) Project * @since 3.0.0 * @license http://www.opensource.org/licenses/mit-license.php MIT License */ namespace App\View; use BootstrapUI\View\UIView; /** * Application View * * Your application’s default view class * * @link http://book.cakephp.org/3.0/en/views.html#the-app-view */ class AppView extends UIView { public $layout = 'BootstrapUI.default'; /** * Initialization hook method. * * Use this method to add common initialization code like loading helpers. * * e.g. `$this->loadHelper('Html');` * * @return void */ public function initialize() { parent::initialize(); } } |
テンプレートの修正
標準で読み込んでいるcssとJavaScriptを無効化し、bowerで取得したファイルを読み込むよう修正する。
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <head> <?= $this->Html->charset() ?> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> <?= $cakeDescription ?>: <?= $this->fetch('title') ?> </title> <?= $this->Html->meta('icon') ?> echo $this->Html->css('path/to/bootstrap.css'); echo $this->Html->script(['path/to/jquery.js', 'path/to/bootstrap.js']); <!-- <?= $this->Html->css('base.css') ?> <?= $this->Html->css('cake.css') ?> --> <?= $this->fetch('meta') ?> <?= $this->fetch('css') ?> <?= $this->fetch('script') ?> </head> |