13
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

#概要
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'),
    );

}
13
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?