概要

slywalkerさんがGithubで公開しているTwitterBootstrap PluginをCakePHP2.xに導入する

参考
https://github.com/slywalker/TwitterBootstrap

BootstrapのCSSファイルをダウンロードするのではなく、READMEに従ってLESSからコンパイルして利用してみる

前提

Linux環境へのインストールとする
Gitがインストール済みであること

必要なソフトのインストール

nvmをインストール

node.jsのバージョンが管理できると便利なので、今回はnvmを使用

git clone git://github.com/creationix/nvm.git ~/nvm
nvm/nvm.sh

node.jsをインストール

nvmでnode.jsをインストールする
現在、v0.10.6が最新だったのでこのバージョンをダウンロード

nvm install v0.10.6

同時に、npmがインストールされ使用可能になる

recessをインストール

npmでrecessをインストールする

npm install recess -g

uglify-jsをインストール

npmでuglify-jsをインストールする
ただし、最新版だとこの後の作業がうまく通らなかったので旧版を使用

npm install uglify-js@1 -g

参考
https://groups.google.com/forum/?fromgroups=#!topic/twitter-bootstrap/cFy3J0nhfwM

プラグインを配置する

ここからの作業は、README通り

参考
https://github.com/slywalker/TwitterBootstrap

プロジェクトがGitで管理されている場合

サブモジュールとして取り込んでみる

cd <your_project>/app
git submodule add git://github.com/slywalker/TwitterBootstrap.git Plugin/TwitterBootstrap
git submodule update --init --recursive

Gitで管理されていない/しない場合

クローンで取り込む

cd <your_project>/app/Plugin
git clone git://github.com/slywalker/TwitterBootstrap.git
cd Plugin/TwitterBootstrap
git submodule update --init

Bootstrapのビルド

この作業により、BootstrapのLESSがコンパイルされて、CSSが生成される
前の手順でインストールしたツール群はこの作業のために必要

cd <your_project>/app
Console/cake TwitterBootstrap.copy
Console/cake TwitterBootstrap.make

CakePHPの設定

bootstrap.phpの編集

場所は"app/Config/bootstrap.php"
以下の一行を追加する

CakePlugin::load('TwitterBootstrap');

AppController.phpの編集

場所は"app/Controller/AppController.php"
この変更により、全てのControllerにおいてプラグイン側のヘルパーを使用するようになる
一部のコントローラーのみで使用したい場合は、使用するコントローラーのみで以下の変更を加える

<?php
class AppController extends Controller {

    public $helpers = array(
        'Session',
        'Html' => array('className' => 'TwitterBootstrap.BootstrapHtml'),
        'Form' => array('className' => 'TwitterBootstrap.BootstrapForm'),
        'Paginator' => array('className' => 'TwitterBootstrap.BootstrapPaginator'),
    );

}

CakePHP 2.xにTwitterBootstrap Pluginを導入する

概要

前提