CakePHPにTwitter Bootstrapプラグインを導入する
CakePHPに@slywalkerさんのTwitterBootstrapプラグインを導入する方法をメモしておきます。
ここでは、Twitter BootstrapプラグインをGit Submoduleとして登録し、用意されたコマンドを利用してビルドする方法を示しています。必ずしも、この方法をとる必要はありません。次の状態になれば良いので、手作業での配置でも問題ありません。
- CakePHPのPluginディレクトリ以下にTwitter Bootstrapプラグインが配置されている
- WEBROOT_DIRにTwitter Bootstrap関連ファイルが配置されている（CDNを利用する場合は、その限りではない）
- css/bootstrap.css
- css/bootstrap-responsive.css
- img/glyphicons-halflings.png
- img/glyphicons-halflings-white.png
- js/bootstrap.js
ただし、繰り返し利用することがあるのであれば、環境を作っておいた方が楽だと思います。
参考リンク：GitHub – slywalker/TwitterBootstrap
環境
今回インストールした環境は以下の通りです。UnixライクなOSであれば、同様の手順で問題ないと思います。
| ソフトウェア | バージョン |
|---|---|
| MacOS | 10.7.5 |
nvmとNode.jsをインストールし、LESS, JSHint, RECESS, UglifyJSをインストールする
Twitter Bootstrapをコンパイルするには、NodeとNodeモジュール（LESS, JSHint, RECESS, UglifyJS）が必要になります。まずは、その環境を整えましょう。Twitter Bootstrap Extendでも、詳しく解説されています。
Node, nvm, npm の解説やインストールに関しては、以下の記事にまとめておりますので、詳しくはそちらをご覧ください。ここでは手順のみを示します。
nvmとNode.jsとWebSocket.IOをインストールしてWebSocketアプリの環境を作る
1 2 3 4 5 6 7 8 9 10 11 12 | # nvmをclone git clone git://github.com/creationix/nvm.git ~/nvm # nvmを実行 . ~/nvm/nvm.sh # 特に何も表示されません # nvmでnodeをインストール nvm install v0.8.14 # npmでLESS, JSHint, RECESS, UglifyJSをインストール npm install -g less jshint recess uglify-js |
CakePHPにTwitter Bootstrapプラグインを導入する
Twitter BootstrapプラグインをGit Submoduleとして登録し、プラグインのロード設定をした後、ビルドします。
ちなみに、OS X Lion (10.7.5) には、初期状態では makeが入っていませんので、ない場合は、インストールしておいてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | cd your_work_dir # CakePHPをclone git clone git://github.com/cakephp/cakephp.git # Git 初期化 cd cakephp rm -rf .git git init # TwitterBootstrapプラグインをサブモジュールとして登録 git submodule add git://github.com/slywalker/TwitterBootstrap app/Plugin/TwitterBootstrap git submodule update --init --recursive # TwitterBootstrapプラグインのロード設定 # CakePlugin::load() に TwitterBootstrap を追加、もしくは CakePlugin::loadAll() vi app/Config/bootstrap.php # Twitter Bootstrap関連ファイルをビルド（要Node） # WEBROOT_DIRにファイルが生成される app/Console/cake TwitterBootstrap.copy app/Console/cake TwitterBootstrap.make |
最後にレイアウトとヘルパーの設定を行います。CDNやMinifiedを使う場合は、適宜読み替えてください。
1 2 3 4 5 6 7 | // 〜省略 <?php echo $this->Html->css('bootstrap'); echo $this->Html->css('bootstrap-responsive'); echo $this->Html->script('bootstrap'); ?> // 〜省略 |
34 35 36 37 38 39 40 41 42 43 | class AppController extends Controller { public $helpers = array( 'Session', 'Html' => array('className' => 'TwitterBootstrap.BootstrapHtml'), 'Form' => array('className' => 'TwitterBootstrap.BootstrapForm'), 'Paginator' => array('className' => 'TwitterBootstrap.BootstrapPaginator'), ); } |
以上で、準備完了です。
使い方に関しては、READMEや、http://{webroot}/twitter_bootstrap を参考にしてください。
ソースコードは、 app/Plugin/TwitterBootstrap/View/TwitterBootstrap/index.ctpが参考になります。
— 追記
Twitter Bootstrapプラグインを使ったサンプルアプリケーションを公開しました。メインテーマは、Searchプラグインで、Twitter Bootstrapプラグインの使い方等を解説している訳ではありませんが参考までに。
Searchプラグインを使ってCakePHPに検索を実装する
