[CakePHP] TwitterBootstrap3のインストールと利用方法

TwitterBootstrapは米国のTwitter社が開発しているフロントエンドツールで、これを使えば簡単に綺麗なWebサイトが構築できてしまいます。

この仕組みを使えばサイトをスピーディに公開することができます。スタートアップ時のスピードを上げることができるのが嬉しいところです。

Contents

1 TwitterBootstrapの特徴
- 1.1 簡単で綺麗なデザイン
- 1.2 レスポンシブ対応
2 CakePHPでTwitterBootstrapを使う流れ
3 TwitterBootstrapのダウンロードと設置
4 CakePHP用プラグインのダウンロードと設置
5 bootstrap.phpの設定
6 テンプレートのコピー
7 ヘルパーの設定

TwitterBootstrapの特徴

簡単で綺麗なデザイン

デザインパーツを使うだけで綺麗なフラットデザインができあがります。div や span などに決められたクラス名を指定すれば、美しいボタンやフォームができあがります。

レスポンシブ対応

デバイスの画面の幅に応じて自動的にレイアウトを調整してくれます。レスポンシブ対応の知識が少なくともなんとかなってしまいます。

CakePHPでTwitterBootstrapを使う流れ

まず、Twitter Bootstrap本体をダウンロードして公開フォルダに設置します。
次に、Twitter BootstrapをCakePHPで使うためのプラグインをダウロードしてCakePHPのAppに設置します。
プラグインの読み込みなどの設定をして完了となります。

TwitterBootstrapのダウンロードと設置

Bootstrapからファイルをダウンロードします。

ダウンロードしたファイルを公開フォルダにコピーします。

CakePHP用プラグインのダウンロードと設置

slywalker/TwitterBootstrapを開きプラグインをダウンロードします。

ダウロードした圧縮ファイルを解凍し「TwitterBootstrap」というフォルダ名に変更し、/App/Pluginにコピーします。

bootstrap.phpの設定

/app/Config/bootstrap.phpに下記を追記し、TwitterBootstrapのプラグインを読み込むようにします。

CakePlugin::load(array('TwitterBootstrap'));

1	CakePlugin::load(array('TwitterBootstrap'));

テンプレートのコピー

TwitterBootstrapプラグインの
app/Plugin/TwitterBootstrap/View/Layouts/default.ctpを
app/View/Layouts/bootstrap.ctpにコピーします。

これでデフォルトのテンプレートからBootstrapのテンプレートに変更されます。

ヘルパーの設定

app/AppController.phpを開いて、ヘルパーとレイアウト情報を記載します。

class AppController extends Controller {
public $helpers = array(
    'Session',
    'Html' => array('className' => 'TwitterBootstrap.BootstrapHtml'),
    'Form' => array('className' => 'TwitterBootstrap.BootstrapForm'),
    'Paginator' => array('className' => 'TwitterBootstrap.BootstrapPaginator')
);
public $layout = 'bootstrap';
}