読者です 読者をやめる 読者になる 読者になる

Furudateのブログ

プログラミングやネットワーク系の知識・技術がメインのブログ。技術メモ帳的な感じになるかと。岩手から発信していきます。

【PHP】CakePHP2の環境構築と初期設定

PHP 開発環境

こんばんは。

今更ですが、CakePHP2系列の環境構築と初期設定のやり方をまとめておきます。
ここではTwitterBootstrapの導入まで行います。
複数人で開発するときに環境構築のところで色々エラーが出て非常にめんどくさい思いを今したので・・・。

1. CakePHPのダウンロード

まずはダウンロードです。GitHubにあるのでCloneしてきます。

$ git clone git@github.com:cakephp/cakephp.git

2. .htaccessの設定

Cakeを開いてみて、無事開けたらこの設定は飛ばして次の手順に行ってOKです。
サーバによっては404エラーが出ると思うので、その場合は以下の.htaccessにRewriteBaseを追記します。

RewriteBase /~project/cake/

RewriteBase /~project/cake/app/

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個

俺流CakePHPセットアップ方法 - a long log

CakePHP 2.xにTwitterBootstrap Pluginを導入する - Qiita