CakePHP3 の フロント側に Bootstrapを適用する

フロントの html / CSS をマークアップする際、プリセット済の bootstrap を利用することがあります。そこで、CakePHP3 の bootstrap プラグインを利用して、標準の関数を使用したまま bootstrap ベースの Html を書き出す方法を記述します。

Bootstrap UI のインストール

以下 Url からプラグインをインストールしたいのですが、 Read Me に composer の詳しい情報が書いていないので、直接 Packagist から参照します。

Bootstrap UIプラグイン
Packagist の該当ページ

2016年7月28日現在でバージョンが 0.5.0 なので、これ以降のバージョンを利用するように composer.json を修正しました。この時点で記載さている内容は以下の通りです。

"require": {
    "php": ">=5.5.9",
    "cakephp/cakephp": "~3.2",
    "mobiledetect/mobiledetectlib": "2.*",
    "cakephp/migrations": "~1.0",
    "cakephp/plugin-installer": "*",
    "josegonzalez/cakephp-environments": "3.0.0",
    "friendsofcake/bootstrap-ui": "~0.5"
},

修正が完了したら、composer update してプラグインをインストールします。 Plugin を自動的に読み込む処理はこちらを参考にしてください。 すでに Plugin::loadAll(); が記述してあれば、インストールが完了したら自動的にプラグインが読み込まれます。

cd path/to/dir-of-composer.json
php composer.phar update

Bootstrap UI の利用

src/View/AppView.php を編集して、プラグインを適用します。公式マニュアルには AppView クラスの拡張元を UIView に指定することで単純利用する方法が書いてありますが、これを行ったところ後々レイアウトファイルを変更したい時に不可能なことがわかったので、以下のように読み込みしました。これで CakePHP の標準関数を利用すると bootstrap ベースのタグが書き出されます。

// src/View/AppView.php を以下のように編集
public function initialize()
{
    parent::initialize();

    $this->loadHelper('Html', ['className' => 'BootstrapUI.Html']);
    $this->loadHelper('Form', ['className' => 'BootstrapUI.Form']);
    $this->loadHelper('Flash', ['className' => 'BootstrapUI.Flash']);
    $this->loadHelper('Paginator', ['className' => 'BootstrapUI.Paginator']);
}

bower の環境構築

フロントエンド用のパッケージマネージャー、bower を利用して bootstrap 本体のインストールを行います。パッケージ管理は非常に重要なので、将来のためにこのタイミングで環境構築を行います。以下のツールが必要だったのでまずはそれらを仮想環境にインストールします。

# 仮想環境にて実行
//仮想環境に入る
vagrant ssh

//npm のインストール
sudo yum install npm

//仮想環境なので何も気にせずグローバルに設定
sudo npm install -g bower

bowerの設定と bootstrap のインストール

無事インストールされたら app/webroot 直下に .bowerrc ファイルを作成して、bower でインストールするディレクトリを指定します。私は assets ディレクトリ配下に配置したかったので、以下のようにしました。

# app/webroot/.bowerrc の内容
{
    "directory": "assets"
}

保存が終わったら bower.json を作成します。bower init コマンドを実行すると色々聞かれて bower.json が作成されます。私は全て enter を押してファイルを作成しました。作成されたら、bower コマンドを利用して bootstrap 本体をインストールします。–save オプションは bower.json の dependencies に全てのエンドポイントを加えるらしく、また、マニュアルにいつも付与した方がいいと記載されていたので、マニュアルに従ってオプション付きでインストールコマンドを実行します。

bower の公式マニュアル インストールコマンドの解説

全て作成された json ファイルの内容は以下の通りです。

bower install bootstrap --save

# app/webroot/bower.json の内容
{
  "name": "webroot",
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "assets",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "^3.3.6"
  }
}

これで bootstrap が本体サイトに配置されました。今は保存されたことを確認するのみで、本体サイトに読み込む処理はのちほど行います。

bootstrap のテーマのインストール

github で bootstrap theme を探し、以下のものが使いやすいライセンスだったので利用することにしました。下記コマンドを実行してファイルがダウンロードされたことと、json ファイルが更新されたことを確認します。

bootstrap のテーマ

bower install bootstrap-theme-white-plum --save

{
  "dependencies": {
    "bootstrap": "^3.3.6",
    "bootstrap-theme-white-plum": "^0.3.0"
  }
}

bootstrap 本体、bootstrap のテーマの読み込み

レイアウトファイルに以下を記述してサイトに読み込みます。

# app/src/Template/Layout/default.ctp の内容

<?= $this->Html->css([
    '/assets/bootstrap/dist/css/bootstrap.min',
    '/assets/bootstrap-theme-white-plum/dist/css/bootstrap.min',
]); ?>

<?= $this->Html->script([
    '/assets/jquery/dist/jquery.min',
    '/assets/bootstrap/dist/js/bootstrap.min',
]); ?>

<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>

これで本体サイトに bootstrap と bootstrap のテーマが読み込まれました。

本番環境に反映

本番サーバにログインし、上記「bower の環境構築」で記述したコマンドを本番環境にも適用します。コマンドを実行したところ、Amazon linux 環境下で「パッケージ nodejs は利用できません。」とエラーが表示されました。これは、リポジトリが指定されていない場合に表示されるようで、以下のようにリポジトリを指定したら無事インストールできました。

sudo yum install --enablerepo=epel npm

bower の環境が準備できたら、本番環境下、bower.json ファイルのある場所で install コマンドを実行してファイルを配置します。

# app/webroot/bower.json に json ファイルがある
cd app/webroot
bower install

bootstrap 本体のバージョンについて聞かれたので、最新版を入れるように回答してファイルを配置しました。

Unable to find a suitable version for bootstrap, please choose one by typing one of the numbers below:
    1) bootstrap#3.0.0 which resolved to 3.0.0 and is required by bootstrap-theme-white-plum#0.3.0
    2) bootstrap#^3.3.6 which resolved to 3.3.7 and is required by webroot

Prefix the choice with ! to persist it to bower.json

? Answer 2
bower bootstrap-theme-white-plum#^0.3.0          install bootstrap-theme-white-plum#0.3.0
bower bootstrap#^3.3.6                           install bootstrap#3.3.7
bower jquery#>= 1.9.0                            install jquery#3.1.0

終わりに

何か不明点があれば、サイト TOP のお問い合わせよりご質問ください。また、より CakePHP3 について詳しく知りたい方は定期的に Meetup イベントを開催しているので、お気軽にご参加ください。

CakePHP Meetup Tokyo のコミュニティページ

Enjoy!!