BLOG

2015年4月16日/ Bootstrap, CakePHP,

[CakePHP 3.x] TwitterBootstrapプラグインのインストール方法

こんにちは、最近入社したエンジニア(上本)にCakePHP教えてもらってる佐々木です。

 

生PHPは書いてましたが、CakePHPなどフレームワークは正直あまり使ってなかったのですが、Webサービスなどの開発を考えるとやはり開発効率はかなり高くなるのでそろそろ勉強せねばと思っていたところでした。
フレームワークの導入を検討している方がいればCakePHPをオススメします。

 

※ CakePHPのインストール手順の参考にどうぞ。
[PHP] CakePHPをCentOSにインストールする詳細手順まとめ

 

今回はCakePHPをインストールした後、プラグインを使ってデザイン周りをTwitter Bootstrapベースにする方法をご紹介します。

 

プラグインをインストールする理由

単純にCSSをTwitter Bootstrapベースにするのであれば default.ctp にCSSファイルを読み込ませばオッケーです。
しかし、CakePHPのFormLinkを利用しながらBootstrapベースのUIにするにはプラグインのインストールが必要となります。

 

今回使ったプラグイン

様々なプラグインがあると思いますが、CakePHPv3.x で利用できるプラグインを探したところ下記がよさそうだったのでご紹介します。

CakePHP 3, Bootstrap 3 Helpers

 

インストール手順

CakePHPv3.xからはインストールに composer を利用していると思いますが、プラグインもcomposerを利用します。

まず、./composer.json に下記を追加してください。

 

次にプロジェクトをインストールしたディレクトリに移動し、下記コマンドにてプラグインをインストールします。

 

次はプラグインの読み込みを実装します。
/config/bootstrap.php に下記を追加してください。

 

続いて、./src/Controller/AppController.php へヘルパーを宣言します。

 

最後は ./src/Template/Layout/default.ctp にCSS(Twitter Bootstrap)を読み込んで終わりです。

 

おわりに

いかがでしたでしょうか?

CakePHPをインストールまでできている方であえば簡単だったと思います。
サービス開発時はデザイン的なところで悩むより、まずはBootstrapでオシャレにベースを構築したいところですね!

参考にしてみてください。

 

Resent Posts

Category