CakePHP2.0＋プラグイン＋ライブラリでレスポンシブなHTML5サイトを構築してみよう【1/5】

■フレームワークは本当に手早く開発できるものなのか

俺はCakePHPを長年使ってきているんだ。
当時はPHP製のフレームワークが乱立していて、選択肢として決定打に困る状況だったため、存在するフレームワークをひと通り、ほんの片足突っ込む程度だけど体験してみた。

などなど。

これらを週末チクチクいじり、大体1年くらいかかったけど、紆余曲折あって一番ダサそうなCakePHPを選択したんだ。

そしたらCakePHPって意外に人気があることに気が付き、仲間もたくさん増えたという嬉しい結果となった。

そんなフレームワークのCakePHPも、今ではたくさん外部サービスと繋げられるようなプラグインが出揃ってきた感があるので、ひとまず開発環境という意味で俺自身のベンチマークでもやってみたいよね、って思ったので、ちょっとやってみようかなと。

■2012年時点でエンティティ＋バウンダリ＋コントローラ的なものがひと通り出揃ってきたのでそれらを組み合わせようと試みる

まずメインとなるフレームワークはCakePHPの2.0を使う。2.1は結構中身が違うのと、まだ習得してないので避ける。

それ以外に使うものとして、まずは見た目部分ではTwitter Bootstrap2を使う。
ただしそのまま使うとどれも同じ見た目になってしまうので、Twitter Bootstratp2をダウンロードするまえに、Bootswatchにてイメージに近いテーマをダウンロードすることにする。

LESSなどのデベロッパーフレンドリーなテクノロジーは、あくまで開発者の自己都合の押し付けと思っているので、使わなくてもいいと思ってる。

LESSもSASSもユーザには全く関係のないエンティティ。最終的にはCSSになるわけだし、そもそもCSSの書式なんかだってユーザには全く関係がないので、こだわりはすでに捨ててる状態。

当然、LESSだってSASSだって、知らないより知ってたほうが断然良いに決まってるし、最近増えてきたIT女子にドヤ顔出きる事うけ合いなしだから、婚活にも使えるすごい技術だと思う。今すぐに覚えてLESS勉強会をデザイナ女子向けに開催してもいいよね、そこらのコワーキングスペース借りたりして。

あ、俺も婚活しようかな！！（ﾟ∀ﾟ）

■できるかできないかじゃなくてとにかくやってみろってんだ！話はそれからだﾌﾟﾍﾟﾎﾟ

というわけで、Bootstrap関連は以下の手順で導入すると言う事で話を勧めるよ。

InitializrでHTML5対応版Bootstrapをダウンロード
Bootswatchで好きなテーマをダウンロード
CakePHPのプラグインBootStrapをダウンロード
CakePHPのSearchプラグインをダウンロード
CakePHPのDebugKitプラグインをダウンロード
簡単なデプロイ
掲示板を作ってみる
掲示板をブラッシュアップしてみる
クソして寝る

そうそう、クソしたらちゃんとケツは拭くんだぜ。
これは怠けちゃいけない。絶対だ！！

■Initializr落とし！

http://www.initializr.com/
ここにアクセスだ。

ここから『Bootstrap』をダウンロードだ。右側の青い四角をクリックする。
クリックしないと始まらないので必ずクリックする。
すると色々カスタマイズ可能なジェネレータページが表示される。
びっくり！

簡単だけど、以下に全体の説明を書いておくので参考にされたし。

HTML/CSS Template
No template	テンプレートなし
Mobile-first Responsive	モバイル優先テンプレート
Responsive Bootstrap 2.0.3	Twitter Bootstrap2向けテンプレート

HTML5 Polyfills
Modernizr	様々なブラウザに自動的に対応してくれるライブラリ。http://javascript.webcreativepark.net/library/modernizr
Just HTML5shiv	IE6/7/8でHTML5を無理やり解釈させるライブラリ
Respond - Alternatives	IE6/7/8でレスポンシブデザインを適用させるためのライブラリ

Server Config
.htaccess	HTTPDにApacheを使っている場合のファイルタイプなどを設定するファイル
nginx.conf	HTTPDにNginxを使っている場合のファイルタイプなどを設定するファイル
web.config	HTTPDにASP.NETを使っている場合のファイルタイプなどを設定するファイル

jQuery
Minified	余計な改行などを省いた本番サーバ向けjQuery
Development	開発版jQuery

Stylesheet Language
CSS	一般的なスタイルシート
LESS - Tutorial	変数などが使えるLESS言語。コンパイルしてCSSに変換する必要がある

Google Service
Chrome Frame	IEでChromeの機能を使えるようにするライブラリ
Analytics	Googleアナリティクスタグの使用

H5BP Optional http://html5boilerplate.com/
Build Script (6MB)	H5BPのビルドツール
IE Classes	IE対応クラス
Favicon	favicon.ico
Apple Touch Icons	iPhone向けfavicon
plugins.js	プラグインローダー
Robots.txt	検索エンジン向けヒントファイル
Humans.txt	作成した人たちの説明文。http://humanstxt.org/JA
404 Page	無効なURLが叩かれた際に表示するエラーページ
Adobe Cross Domain	別サーバからのアクセスを許可するためのファイル

今回は以下のような選択をしてみた。

画像が小さいから見えないだろ？クリック！クリック！！

この状態でページ下段の『Download It!』というオレンジの四角をクリックすれば、ワンセットでダウンロードできる。落ちろぉ！！

今回は『initializr-verekia-3.0.zip』というファイル名になった。
このファイルは早速解凍しておこう。ただし解凍する際、親フォルダがないので、デスクトップなどに予め『Initializr』などの名前でフォルダを生成しておき、その中に解凍しないと、いろいろなファイルがバラバラになって愉快なこと必須。多分眠気が襲ってくるね、割と本気で。

そして解凍すると中身はこんな感じだ。