CakePHPにTwitter Bootstrapプラグインを導入する

Pocket
16 interests

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アプリの環境を作る

CakePHPにTwitter Bootstrapプラグインを導入する

Twitter BootstrapプラグインをGit Submoduleとして登録し、プラグインのロード設定をした後、ビルドします。
ちなみに、OS X Lion (10.7.5) には、初期状態では makeが入っていませんので、ない場合は、インストールしておいてください。

最後にレイアウトとヘルパーの設定を行います。CDNやMinifiedを使う場合は、適宜読み替えてください。

以上で、準備完了です。
使い方に関しては、READMEや、http://{webroot}/twitter_bootstrap を参考にしてください。
ソースコードは、 app/Plugin/TwitterBootstrap/View/TwitterBootstrap/index.ctpが参考になります。

— 追記
Twitter Bootstrapプラグインを使ったサンプルアプリケーションを公開しました。メインテーマは、Searchプラグインで、Twitter Bootstrapプラグインの使い方等を解説している訳ではありませんが参考までに。
Searchプラグインを使ってCakePHPに検索を実装する

Pocket
16 interests