CakePHP template: CakePHP のおいしい食べ方

TOP / CakePHP template

2008年05月08日

FormHelperとCSS

CakePHP1.2のスタイルシートには最初からフォームデザイン部分のcssが入っていますが、iPodなどで表示させるには便利でも、実際にたくさんのデータを入力するにはちょっと…というデザインだと思います。実際に使用する時には、「ラベルが左側で入力テキストボックスが右側に同じ行内に並ぶ」ようなデザインも使いたいのではないでしょうか。

思い通りの位置に表示させるには、cssのパラメータに関する知識が必要です。

このあたりをうまく説明してくれる何かがないかな、と思っていたところ、こんなサイトを見つけました。以前に、CakePHPのgooglegroupで話題になっていたサイトです。

CSS-Only, Table-less Forms
http://jeffhowden.com/code/css/forms/

ここにあるデザインとCakePHPのFormHelperの出力するタグ類は、考え方がほぼ一緒です。

divがあって、labelがあって、inputがあって、最後に/divでくくる、という流れでデザインされています。

なので、cake.generic.css の form部分を、そっくり上記のサイトのデザインで変更してみると、なかなか勉強になります。

form div {
clear: left;
}

form div label {
float: left;
width: 130px;
padding: 3px 5px;
margin: 0 0 5px 0;
text-align: right;
}

などの部分がキモのようです。

ラベル：cakephp CSS

2006年07月11日

CakePHP用ビジネス向け無料テンプレート１０種類

やはり、開発をはじめる最初の画面は大切です。先日、Contented Designs のオープンソース・デザインを使用した CakePHP のテンプレートを公開したところ、大きな反響がありました。やはり、PHPフレームワークに求められていることは、次の段階に達しているのかな、と思います。つまり、機能やエンジン部分だけでなく、そこにのっかるデザイン・外観の情報も、フレームワークの選定に大きな影響を与えるようです。

CakePHPを利用したビジネスサイトの構築用に、ビジネスっぽいオープンソースのテーマをCakePHP の default.thtml としてポートしてみました。CakePHPでのビジネスサイト構築を検討なさっている方はたたき台としてご利用ください。
もちろん、MVC分離システムなので、後からの変更も非常に簡単です。

閲覧・ダウンロードはこちらからどうぞ。
http://cakephp.seesaa.net/article/20603204.html

インストールは非常に簡単で、
１）CakePHP をダウンロード、サーバに解凍
２）
　　default.thtml 　　　は、 app/views/layouts　に置く。
　　*****.css 　　　　　は、 app/webroot/css　　に置く。　
　　css_images の中のファイルは、 app/webroot/css/images　にコピー。
　　webroot_imgの中のファイルは、 app/webroot/img　にコピー。

CakePHP のＵＲＬを見ると、そのテーマに変わっているはずです。
*そうそう、初期状態では UTF-8 になっていますので、お使いのコードに変更してください。default.thtml の中にあります。*

（なお、ＰＨＰによるビジネスサイト構築のお問い合わせは、
http://www.cba-japan.com までどうぞ。多言語展開コンサルティング[特に英語、ロシア語、タイ語がメインです。中国語などもＯＫ]やローカライゼーション、システム開発などを行なっています。）

10 Free Business Templates for CakePHP

These template designs are from http://www.oswd.org, Open Source Web Designs.
I picked up some designs especially looks suitable for business use, and changed to default.thtml of CakePHP. You can start your WEB development with business-style designs at once!

Usage:

1) Unpack the zip.
2) put the files:
default.thtml -> app/views/layouts
*****.css -> app/webroot/css
files in css_images -> app/webroot/css/images
files in webroot_img -> app/webroot/img

3) go to your cake URL. You will have new theme!

(Thanks all the designers who released their designs as open-sourced!)

*from 2006/12******************************
from new version of CakePHP (1.1.11.4064),
you need to change one line:

if ($this->controller->Session->check('Message.flash')) $this->controller->Session->flash();

to

if ($session->check('Message.flash')) $session->flash();
*******************************************

andreas02.zip

bermuda_01.zip

doctors_office.zip

Internet_Services.zip

plain.zip

ラベル：templates cakephp business

2006年07月06日

初期デザインを速攻で変更。

CakePHP で最初に作ったプロジェクト（デザインはインストールそのまま）を上司に見せたところ、最初のひとことは、「アクの強いデザインだね～」というものでした。

確かに、初期デザインは黒と赤を基調にしているので、ちっともビジネスっぽくありません。「初期デザインを変えてくれ！」という要望もMLで流れたくらいで……。
http://groups.google.com/group/cake-php/browse_thread/thread/7248b46de597b10b/

というわけで、最初から使用できる無料のテンプレートを７つ、Contented Designs のオープンソースのテンプレートからポートしてみました。スクリーンショットは、とりあえず解凍しただけのCake PHPに放り込んだだけの状態です。

デザインの閲覧・ダウンロードはこちらから。
http://cakephp.seesaa.net/article/20355864.html

１）使いたいテーマを解凍。
２）解凍してできた default.thtml を app/views/layouts にコピー。
３）解凍してできた ***.css 　　　を app/webroot/css にコピー。

これだけで、何の問題もなく、システムテンプレートが変更されます。
さすが MVC 分離デザイン。

あとは、じゃんじゃんモデル＋アクションを書いて、機能ができてきたら、このテーマのリンク部分を変更すればよいだけです。

・テーブル部分は、CakePHP のデフォルトを css にとりあえずコピーしてあります。適当に変更してください。
・初期文字コードを、海外でも使用できるように"UTF-8"にしてありますが、日本で使用する場合には、ここを"EUC-JP"とか"Shift-JIS"とかに変更しましょう。

ちなみに、デザイン１枚あたり、５，６分で作成できました。自分の気に入ったデザインから、このCakePHP用のテンプレートを作成するのは非常に簡単です。

Ruby on Rails にもこんなテンプレート集みたいなものはあるんでしょうか。サイトでは発見できませんでした。

PHP で　"Ruby on Rails" をしたいなら Cake PHP! (と宣伝。)

default.thtml 7 free designs for Cake PHP

I ported designs from Contented Designs to default.thtml of CakePHP.

1) Unpack zip.
2) Copy default.thtml to app/views/layouts
3) Copy ***.css to app/webroot/css

Then, you'll see the new theme!
Change the template as you like...

*Contented Designs, Thank you for your marvelous designs!*

*from 2006/12******************************
from new version of CakePHP (1.1.11.4064),
you need to change one line:

if ($this->controller->Session->check('Message.flash')) $this->controller->Session->flash();

to

if ($session->check('Message.flash')) $session->flash();
*******************************************