CakePHP2.4とBoostCakeプラグインでBootstrap3を試してみる【1/2】

さてと、久々にWeb開発とかしてみるわけね。うん。

なんで開発者なのに、Web開発が久々かというと、それはかなり私的な話で恐縮なんだけどさ、ずっとここ1年以上、開発じゃなくて管理部にいたんだよね。要するに人事異動ってやつで。

つまり1年ほど、メンテナンスはしてたけど、ほっとんど開発してなかったわけ。ちょっと振り返ってみると、自分の開発レベルもガッタガタに落ちてしまって、もうシオシオのパーよ。とほほだね。

周りのみんながいろいろやってるのを見てるとさ、『VagrantとChefでサクっと環境作る』とか、『Bootstrapはbowerでインスコ！』とか、俺からしたらみんないつの間に宇宙人になったの？って感じ。

正直言うと、人事異動で半年くらい経ってからさ、周りの開発仲間から随分と引き離された感が否めないんだよね。

ぶっちゃけ、開発仲間が多くいる俺のFacebook、すごく距離が遠く感じる自分をいとも容易に発見できてしまったりして、自分探しなんか俺にはまるで必要ねぇ！みたいなぁ～。

というわけで、しばらく一人でしょんぼりしてたけど、生来物事をネガティブに捉えることが出来ない質なので、取り敢えずなーんも考えずに、手を動かすことにしたんだよ。うほほ。

俺の（いくつあるのかわからん）座右の銘に『考えると動けないし動くと考えられない。どうせなら今すぐ動いて後から考えろ！』というのがある。割りと数年前（2006年くらい）に気づいた事。

取り敢えず笑顔で行ってみよう。

■CakePHP入れようぜ！

さて、早速CakePHPをGitでクローンしてこようと思うんだけど、ふと思った。
クローンすると『.git』フォルダが作られるじゃん？俺は俺のリポジトリで管理したいんだけど、みんなどうしてるの？と。

もしかしたらGitのコマンドで、落としてきたところとは別に、自分がこれから管理するリポジトリの情報とか追加できるのかな？って思いながら勝手に手が動いて『.git』フォルダを削除したYO！！

わからんことで悩んでもしょうがない。あとで調べたり、ヒトに聞いてみたりする予定。

SVN（Subversion）だったら全フォルダ内の『.svn』フォルダを削除するとか、クソ面倒くさそうでGitで助かったよ。

で、CakePHPだけど、プロジェクト名を『cake_badass』とすると、こんな階層にしておきたい。

cake_badass
┣log
┗htdocs

『log』にはApacheのログを入れておきたい。そして『htdocs』内にCakePHPのベースがまるごと入る感じね。
本当はCakePHPのコアだけ別の場所にして、シンボリックリンクとかはって、作ったアプリを別バージョンのCakePHPで動かせたりするとオモロイんだけど、オモロイだけで実用的じゃないから無視だ。
わからんことで悩んでもしょうがない。

$ mkdir -p cake_badass/log
$ cd cake_badass
$ git clone https://github.com/cakephp/cakephp.git htdocs
$ rm -Rf htdocs/.git

ついでに自分のリポジトリにしておこう。

$ cd htdocs
$ git init
$ git add -A
$ git commit -m 'My first bad ass'

これで上記階層が完成！！！

次にお腹壊しそうなくらい便利なプラグインを入れるんだ。
入れるプラグインはこんな感じ。

簡単に説明すると、こんな感じよ。

DebugKit	各種デバッグ情報がツールバーとして表示されるからすごい！
Search	ページネーションと検索のURLがぶつかり合わないからすごい！
Migrations	データベースの変更を仲間と共有できるからすごい！
BoostCake	Bootstrap3のCakePHP版だからすごい！

それぞれサブモジュールとして入れておこう。
現状だと『,gitignore』でpluginsフォルダが無視されているので、『.gitignore』を開いて『/plugins』のある行を削除しておこう。

$ vi .gitignore

俺は『app』内じゃなくてCakePHP直下の『plugins』フォルダに入れてるよ。『app』を複製しても使えるようにね。

$ git submodule add https://github.com/cakephp/debug_kit.git plugins/DebugKit
$ git submodule add https://github.com/CakeDC/search.git plugins/Search
$ git submodule add https://github.com/CakeDC/migrations.git plugins/Migrations
$ git submodule add https://github.com/slywalker/cakephp-plugin-boost_cake.git plugins/BoostCake

これでプラグインのインストールはOKだ。次はプラグイン読み込み設定をしよう。

$ vi app/Config/bootstrap.php

以下をどこかに追記だ。どこかってのは、ソースコードに『CakePlugin::load()』とか書いてある所のことだね。うん。

CakePlugin::load('DebugKit');
CakePlugin::load('Search');
CakePlugin::load('Migrations');
CakePlugin::load('BoostCake');

さて、次は全コントローラで共通の設定を行おう。

app/Controller/AppController.phpを開いて、こんな感じにしておけばいいんじゃないかな。

class AppController extends Controller {
  public $components = array(
    'Session',
    'Cookie',
    'DebugKit.Toolbar',
    'Auth' => array(
      'flash' => array(
        'element' => 'alert',
        'key' => 'auth',
        'params' => array(
          'plugin' => 'BoostCake',
          'class' => 'alert-error'
        ),
      ),
    ),
  );

  public $helpers = array(
    'Session',
    'Html' => array('className' => 'BoostCake.BoostCakeHtml'),
    'Form' => array('className' => 'BoostCake.BoostCakeForm'),
    'Paginator' => array('className' => 'BoostCake.BoostCakePaginator'),
  );
　・
　・
　・

あと上記の記述を見るとわかると思うけど、Authコンポーネントを使ってるので、ログインしてないとUsersController.phpが必至になるんだよ。
だからついでにapp/Controller/UsersController.phpも作っておこうじゃないか。

class UsersController extends AppController {

  public $name = 'Users';

  /**
   *  ログイン
   */
  public function login() {
  }

  /**
   *  ログアウト
   */
  public function logout() {
    $this->Session->delete('login');
    $this->redirect($this->Auth->logout());
  }
}

こんな感じでOKよ。
ついでにビューファイルのapp/View/Users/login.ctpも作ってしまおう。
とりあえず今は

$ mkdir app/View/Users
$ touch app/View/Users/login.ctp

で空のフィルでも作っておけばOK。

■その他の設定

さて、次は、データベースの設定をしたり、パーミッションの設定をしたり、いろいろやり忘れていることを済ませておこう。

データベースは適当に『cake_badass』なんて名前でコレーションを『utf8mb4_general_ci』とかで作っておき、usersテーブルを以下のような感じで作っておこう。

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(5) unsigned NOT NULL AUTO_INCREMENT,
  `username` varchar(128) NOT NULL COMMENT 'メールアドレス',
  `password` varchar(40) NOT NULL COMMENT 'パスワード',
  `register_code` varchar(23) DEFAULT NULL COMMENT '登録コード',
  `reminder_code` varchar(23) DEFAULT NULL COMMENT 'リマインダコード',
  `is_login` tinyint(1) unsigned NOT NULL COMMENT 'ログイン可能フラグ',
  `is_deleted` tinyint(1) unsigned NOT NULL COMMENT '削除済みフラグ',
  `created` datetime NOT NULL,
  `modified` datetime NOT NULL,
  PRIMARY KEY (`id`),
  KEY `users_idx` (`username`,`password`,`register_code`,`reminder_code`,`is_login`,`is_deleted`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=1 ;

ここらへんはいつも自分が使ってる慣れ親しんだフィールド構造で十分だと思うよ。
上記のSQLはあくまで俺の場合ね。

俺は登録時とリマインダー時にハッシュキーを発行し、メールで送信させて、そこで本人認証させたいので、*_codeというフィールドをもたせてるんだ。

あとはただの、ログインフラグと削除フラグだね。削除フラグは実際には削除しないで、このフラグが立っているものをあとで一括で削除するとか、そういう使い方をしたほうが目覚めが良いんだ。

app/Config/database.phpは各自作っておいてね。

public $default = array(
  'datasource' => 'Database/Mysql',
  'persistent' => false,
  'host' => 'localhost',
  'login' => '＜mysqlへの接続ID＞',
  'password' => '＜mysqlへの接続パスワード＞',
  'atabase' => 'cake_badass',
  'prefix' => '',
  'encoding' => 'utf8',
);

こんな感じ？

あとapp/tmpのパーミッションも書き込み可能にしておこう。

$ chmod -R 707 app/tmp

最後に、app/Config/core.phpに2箇所、ハッシュ値をいれて暗号化時のセキュリティ設定をしておこう。

$ mkpasswd -l 40 -s 0

これをapp/Config/core.phpの『Security.salt』へ、

$ mkpasswd -l 29 -c 0 -C 0 -d 29 -0

これをapp/Config/core.phpの『Security.cipherSeed』へ上書きすればOK。

※mkpasswdコマンドが無いよ！ッて言われる場合、下のほうで紹介してるけど、
Windows7にVirtualBox4でCUIなFedora18を入れてWeb開発環境を作ろう【3/3】
をみてね。『expect』ってのが入っていればOKだ。

■肝心要のBootstrap3

さて、次は今回の醍醐味である、Twitter社のナイス且つヤングでウホホなレスポンシブ野郎、Bootstrap3を落としてこようじゃないか。

今回はbowerではインストールしないで、zipを落としてくるよ。
まずはBootstrapのサイトへ行こう。

http://getbootstrap.com/

何年後とかにこの記事を見つけた人が『あれ？今と違う！』ってのが一目でわかるように、今のサイトのキャプチャを載せておいたんだ。このページじゃなかったら、残念だけどBootstrap4とか5とか6とかになってるんじゃないかな。

で、もうね、画面に描いてあるとおり、『Download Bootstrap』ボタンクリックしちゃっていいです、はい。何かzipがダウンロード出来たと思う。

これ、解凍しちゃってくだされ。うん、躊躇すること無く。
ちなみに俺はWindows7では、CubeICEってソフト使って圧縮したり解凍したりしてるよ。便利だよ。
何が便利かって、7z形式にも対応してるので、PCゲーマーとしては重宝しまくりなんだよね。
(;ﾟ∀ﾟ)=3ﾑｯﾊｰ

閑話休題。さて、解凍したらこんなふうになったよね。

このなかに『dist』ってフォルダがある。その中にあるのがソースだ。後はサンプルとかビルド前の奴だったりするので、今はあんまり考えなくていいよ。

そしておもむろに『dist』の中身を見てみる。

そう、この3つのフォルダを、CakePHPの『app/webroot』内にブチ込むんだ。だからブチ込んでくれたまえ。ブチ込めばBootstrapが使えるようになりますしおすし。

ちなみに俺はVirtualBox上のFedoraとWindowsをsamba3経由でつないでいるので、フォルダ開いてポン！でOKバッチグーよ。詳しく知りたい人は俺のブログをググるといいよ。

さり気なくページの上に検索窓が付いてるから、ここに『VirtualBox samba』とかって入れて検索するといいよ。

ズボラでやんちゃな君のために、俺がリンクを用意しておいたので、ここから探してみてもいいかもね。