【PHP】CakePHP2の環境構築と初期設定
こんばんは。
今更ですが、CakePHP2系列の環境構築と初期設定のやり方をまとめておきます。
ここではTwitterBootstrapの導入まで行います。
複数人で開発するときに環境構築のところで色々エラーが出て非常にめんどくさい思いを今したので・・・。
1. CakePHPのダウンロード
まずはダウンロードです。GitHubにあるのでCloneしてきます。
$ git clone git@github.com:cakephp/cakephp.git
2. .htaccessの設定
Cakeを開いてみて、無事開けたらこの設定は飛ばして次の手順に行ってOKです。
サーバによっては404エラーが出ると思うので、その場合は以下の.htaccessにRewriteBaseを追記します。
- cake/.htaccess
RewriteBase /~project/cake/
- cake/app/.htaccess
RewriteBase /~project/cake/app/
- cake/app/webroot/.htaccess
RewriteBase /~project/cake/app/webroot/
3. Security.saltとSecurity.cipherSeedの値を設定
次からは基本的にCakePHPのTOPページのエラーを直していくようになります。
上から順に、まずはSecurity.saltとSecurity.cipherSeedの設定です。
これは簡単で、app/Config/core.phpのSecurity.saltとSecurity.cipherSeedの値をランダムな値に変えるだけです。
ちなみにここの部分については私はこちらのサイトの方が作ったプログラム(Security.saltとSecurity.cipherSeedのセットのところ)を使わせてもらっています。
非常に便利です。ありがとうございます!
4. tmpフォルダに書き込み権限を与える
次はapp/tmpフォルダに書き込み権限を与えましょう。
$ chmod -R 777 app/tmp
5. database.phpの設定
次にdatabase.phpの設定です。
自分の環境に合わせて設定します。ここは省略します。
また、これはbakeでも出来るので後回しでもOKです。
6. DebugKitの導入
DebugKitを導入します。
まずはダウンロードして/plugins/にDebugKitにリネームして入れます。(cloneしても良いと思います。)
$ git submodule add https://github.com/cakephp/debug_kit.git app/Plugin/DebugKit
次に/app/Config/bootstrap.phpにプラグインのロードを記述します。
CakePlugin::load(array('DebugKit'));
次にAppController.phpでコンポーネントを読み込みます。
<?php class AppController extends Controller { public $components = array('DebugKit.Toolbar'); // この行を追加 } ?>
次にLayouts/default.phpに記述されたsql_dumpエレメントの出力を削除します。
<?php echo $this->element('sql_dump'); ?>
以上のことを行い、右上にアイコンが出現したらOKです。
7. TwitterBootstrapの導入(追記:現在は下記の8番の方法でやるようにしています)
以上でCakePHPのTOP画面のエラーは全て消えたと思います。
続いてTwitter Bootstrapを導入します。
導入手順は以下の通りです。
本体をダウンロードし、css, img, jsファイルをwebrootに移動
Bootstrapからダウンロードします。 wgetとかでやるのが早いと思います。
TwitterBootstrapプラグインをTwitterBootstrapにリネームしてapp/Pluginに配置
Cakeのルートに移動して以下のコマンドを実行
$ git clone git://github.com/slywalker/TwitterBootstrap.git app/Plugin/TwitterBootstrap
bootstrap.phpにプラグインの読み込み記述
app/Config/bootstrap.phpに以下の記述を追記します。
上記でDebugKitの読み込み記述をしたときにarrayでやったので、そこに追記する形で。
CakePlugin::load(array('DebugKit', 'TwitterBootstrap'));
default.ctpファイルをbootstrap.ctpにリネームして配置
app/Plugin/TwitterBootstrap/View/Layouts/default.ctpを app/View/Layouts/bootstrap.ctpとしてコピー。
$ cp app/Plugin/TwitterBootstrap/View/Layouts/default.ctp app/View/Layouts/bootstrap.ctp
このbootstrap.ctpはbake用です。bakeでControllerやViewを生成する際、選べるようになります。
ここまでの作業を終えると、http://host/project/twitter_bootstrapにアクセスするとbootstrapのテンプレートが表示されると思います。
AppControllerにヘルパーを追加
次にbakeではなくデフォルトでTwitterBootstrapにする場合についても設定しておきます。
bakeでやる場合はいらないかもですが一応書いておきましょう。
Appcontrollerに以下の記述を追記。
<?php public $helpers = array( 'Session', 'Html' => array('className' => 'TwitterBootstrap.BootstrapHtml'), 'Form' => array('className' => 'TwitterBootstrap.BootstrapForm'), 'Paginator' => array('className' => 'TwitterBootstrap.BootstrapPaginator'), ); ?>
次にレイアウトファイルでcssとjsを読み込むようにします。
Layouts/default.ctpに以下の記述を追記。
echo $this->Html->css('bootstrap.min'); // echo $this->fetch('meta');の直前 echo $this->Html->css('bootstrap-responsive.min'); // 同上 echo $this->Html->script('bootstrap.min'); // echo $this->fetch('script');?>の上に配置
8. TwitterBootstrapの導入(追記分)
7番では本体をダウンロードして、TwitterBootstrapプラグインをCloneしてきましたが、ここでは本体をダウンロードすることなくLESSからコンパイルし、かつTwitterBootstrapプラグインをサブモジュール化したいと思います。
ほとんどプラグインのREADMEに書いてあるまんまでしたけど…
個人的にはこっちのやり方のほうがスマートな感じがするので好きです。
プラグインをサブモジュールとしてインストール
READMEに書いてある通りですが、まずは自分のプロジェクトにサブモジュールとしてインストールします。
$ cd /project $ git submodule add git://github.com/slywalker/TwitterBootstrap.git app/Plugin/TwitterBootstrap $ git submodule update --init --recursive
submoduleに対して update と init を同時に行い、またrecursiveによって再帰的にupdateをしています。
bootstrap.phpにプラグインの読み込み記述
ここは7番と同じ。
app/Config/bootstrap.phpに以下の記述を追記します。
CakePlugin::load(array('DebugKit', 'TwitterBootstrap'));
default.ctpファイルをbootstrap.ctpにリネームして配置
ここも7番と同じ。bake用にレイアウトファイルを移動します。
$ cp app/Plugin/TwitterBootstrap/View/Layouts/default.ctp app/View/Layouts/bootstrap.ctp
ちなみにbakeを使わない場合はAppControllerにヘルパーを追記し、レイアウトファイルにCSSなどを読み込ませますが、7番とまったく同じやり方なので割愛します。
recessとuglifyjsをインストール
次にbootstrapプラグインのLESSをコンパイルするために必要な recess と uglifyjs をインストールします。
両者をインストールするには node(npm) が必要なので、まずはその環境を整えます。
nvmとnodeのインストール
ここではnvmを使ってnodeをインストールしたいと思います。
nvmとnodeのインストール方法は過去に書いたこちらの記事を参照で。
npmでrecessとuglyfyjsをインストール
nodeがインストールできたら、npmを使ってrecessとuglyfyjsをインストールします。
$ npm install recess -g $ npm install uglify-js@1 -g
-g でカレントディレクトリではなくユーザホームにインストールしています。
また、uglifyjsは最新版だとエラーが出るので過去バージョンを使用しています。
bootstrapのビルド
ここでbootstrapをビルドし、CSSやjsを生成します。
$ cd /project $ app/Console/cake TwitterBootstrap.copy $ app/Console/cake TwitterBootstrap.make
これでエラーが出なければOKです。
webrootのcssやjsを見てみるとbootstrap用のファイルが生成されていると思います。
あとはbakeする際にbootstrapを指定すれば適用されると思います。
以上で全ての手順が終了です。 あとはCake bake allとかで色々作ってください。 お疲れ様です。
参考にさせていただいたサイト
[PHP]CakePHPのインストール〜DebugKitの導入&HelloWorldまで | offsidenowの日常を綴ったブログ
CakePHP DebugKit の導入手順 - Qiita
CakePHPでTwitterBootstrapがはまった話~即戦力になるためのPHPシステム開発の教科書P33より – エコテキブログ
CakePHPのエラー by rice_american's blog
CakePHPのTwitter Bootstrapプラグイン インストール方法 | 三日坊主も300個