STUDIO KINGDOM » CakePHP修行

アプリひとまず完成（CakePHP修行 #14）

admin — Mon, 27 Oct 2008 13:12:34 +0000

完成といってもまだまだ機能不足で課題も多いですが・・・。

http://clubss.studio-kingdom.com/
(メール：guest@studio-kingdom.com、パスワード：guest でログインすることができます。)

改めてこのWEBアプリの趣旨を確認し、今後実装したい機能を挙げてみました。

WEBアプリの趣旨

友達やサークルなどの仲間内で利用してもらう。
このアプリを利用することで、イベントを「気軽」に企画することが出来るようになるのが狙い。モンスターハンターなどのネットワークゲームでも利用されることを期待している。

今後実装したい機能

・携帯電話対応
・グループ機能
・アンケート機能

下記の画像は実際にWebサーバで動いているものをキャプチャーしたものです。
上から順に「トップ、カレンダー、飲み会等のイベント参加、メンバー一覧、設定」となっています。

開発中アプリの大まかなイメージを作成（CakePHP修行 #13）

admin — Thu, 18 Sep 2008 12:15:56 +0000

Fireworks使って　↓　のようにデザインしてみました。
次はHTMLとCSSに取り掛かって、要件ももっと詰めていかないと。

開発の心得（CakePHP修行 #12）

admin — Tue, 16 Sep 2008 17:12:34 +0000

こちらのエントリーを参考に開発の心得というやつを作ってみた。
新サービスを開発するときに気をつけてること

1.コンセプト = メタファーを決める

「飲み会企画クラブ」みたいな感じかなぁ。
飲み会以外にも、クラブ・サークル活動なんかのイベントも含む。

登録ユーザーがTwitter風な発言コーナーで
A:「たまには飲みにいかない？」
B:「いいねー、企画して！」
A:「じゃ、週末に。」
A:「飲み会登録しました。参加する人は参加登録しといて。」
C:「参戦します。参加登録しときました。」
のような流れで使われることを期待しています。
ちなみにネットサービスではなく、CMSチックなものを目指しています。
「CakePHPセットアップしてから、このソース突っ込んでください」みたいな。

2.サービス名を決める

Club + Class で Clubssとしてるけど、何かイマイチ・・・。

3.アイデア ⇒ 開発 ⇒ 仕上げの苦しみ度合いを理解しておく

理解してないですね。
萎えないような工夫として、やはり人を巻き込むことでしょうか。
CakePHPのフォーラムに「こんなもの作ってます！」と宣言してみるか。

4.時間をかけて悩んだものはアウト

本当にその通りだと思います。
これまでの経験から、何度か煮詰まったら一旦全部まっさらにして最初からやり直した方が早いことが多いです。

5.デザインから入る

教えに従うことにしました。FireWorksで作成中。

6.デザインを懲りすぎない

これも同意。
良質なアイコン素材と背景のグラデーションでごまかして乗り切る予定。

7.デザインのポイントは余白

「プロのデザイナーは余白をデザインする」という話を聞いたことがあります。
逆に素人は余白を埋めたがるそうな。

8.LEGO ブロックみたいなパーツから作り始める

もう少し詳しく知りたい！
汎用的なクラスや関数のこと？
ヘッダーやフッター、メニューなんかの共通パーツのこと？
それとも、全部のことかな。

9.LEGO ブロックを一気に組み立てる

この作業は楽しそうですね。モチベーションが無いとなぁ。

10.仕上げはリリース日の設定から

完全プライベートでやっているので、仕事との兼ね合いがあって決めるのが非常に難しい。
10月いっぱいの完成を目指して進めたいところ。

途中経過（CakePHP修行 #11）

admin — Mon, 08 Sep 2008 13:09:27 +0000

久々の更新です。ネタがありませんが・・・。

継続するって難しい…。
1週間に2,3つのクオリティの高いエントリーを投稿し続けるαブロガーってやっぱ凄いですね。

DB日付値を任意のフォーマットで取得するコンポーネント（CakePHP修行 #10）

admin — Wed, 13 Aug 2008 12:30:44 +0000

カレンダー・スケジュールに関するアプリを作っている関係上、どうしても日付に関する処理が多くなってしまいます。
DBに保存した日付値を任意のフォーマットに変換してくれるコンポーネントやヘルパーがデフォルトで用意されていないか探してみたのですが見つからない…。
多分、Timeヘルパーあたりにあると思うのですが、ヘルパーだとController内で使用することが出来ないので「DatetimeComponent」なるコンポーネントを自作してみました。

componentsフォルダにdatetime.phpファイルを作成し、下記のソースをコピペ。

・app/controllers/components/datetime.php
[sourcecode language='php']
class DatetimeComponent extends Object
{
var $controller = null;

function __construct(){
parent::__construct();
}

function startup(&$controller){
$this->controller =& $controller;
}

function toFormat($elem, $format){
//2008-02-27 00:00:00
$set_year = substr($elem, 0, 4); //年
$set_month = substr($elem, 5, 2); //月
$set_day = substr($elem, 8, 2); //日
$set_hour = substr($elem, 11, 2); //時
$set_minute = substr($elem, 14, 2); //分
$set_second = substr($elem, 17, 2); //秒

return date($format, mktime($set_hour, $set_minute, $set_second, $set_month, $set_day, $set_year));
}
}
?>
[/sourcecode]

フォーマットの指定はPHPの標準関数であるDate関数と同じ形式です。
↓こんな感じで使用します。
[sourcecode language='php']
$yyyy_m_d = $this->Datetime->toFormat($this->data['Schedule']['start'],’Y/n/j’);
[/sourcecode]

登録したスケジュールをカレンダーに表示（CakePHP修行 #9）

admin — Sun, 27 Jul 2008 11:19:44 +0000

今回はカレンダーページ上に、登録したスケジュールのタイトルを表示する処理を実装します。

コントローラーのCalendarアクションを変更します。
・app/controllers/schedules_controller.php
[sourcecode language='php']
//calendar
function calendar($year = null, $month = null){
//システムメッセージをセット
$this->set(‘sys_msg’, $this->Session->read(‘sys_msg’));
$this->Session->delete(‘sys_msg’);

//指定された年月を取得／指定なしの場合はシステム日付を取得
if($year == null || $month == null){
$Month = new Calendar_Month_Weekdays( date(‘Y’), date(‘m’), 0 );
$year = date(‘Y’);
$month = date(‘m’);
} else {
$Month = new Calendar_Month_Weekdays( $year, $month, 0 );
}
//PEARよりカレンダー情報を読み込み
$Month->build();
$this->set(‘month’, $Month);
//取得した年月、次月、前月をYYYY/MM形式で変数にセット
$this->set(‘next_year_month’, date(“Y/m”, mktime(0, 0, 0, $month+1, 1, $year)));
$this->set(‘this_year_month’, date(“Y/m”, mktime(0, 0, 0, $month, 1, $year)));
$this->set(‘prev_year_month’, date(“Y/m”, mktime(0, 0, 0, $month-1, 1, $year)));

//取得した年月のスケジュール情報をScheduleから取得
$cond = array(
‘AND’ => array(
array(“Schedule.start” => “>=$year-$month-01″)
,array(“Schedule.start” => “< =$year-$month-31")
)
);
$this->set(‘schedules’, $this->Schedule->findAll($cond));
}
[/sourcecode]

ビューのCalendarページの日付セルにスケジュールタイトルを表示するように処理を付け加えます。
・app/views/schedules/calendar.thtml
[sourcecode language='php']

Calendar

< ?php
echo $html->link(‘< <', '/schedules/calendar/' . $prev_year_month);
echo $this_year_month;
echo $html->link(‘>>’, ‘/schedules/calendar/’ . $next_year_month);
?>

< ?php if(isset($sys_msg)){ ?>

< ?php echo($sys_msg); ?>

< ?php } ?>

< ?php
while ($Day = $month->fetch()) {
if ($Day->isFirst()) {
echo ”

\n”;
}
if ($Day->isEmpty()) {
echo ”

\n”;
} else {
echo ”

\n”;
}
if ($Day->isLast()) {
echo “

\n”;
}
}
?>

Sun	Mon	Tue	Wed	Thu	Fri	Sat
	” . $Day->thisDay(); //add link echo $html->link($html->image(“pencil_add.png” , array(“class”=>”alphafilter”)), ‘/schedules/add/’ . $month->year . “/” . $month->month . “/” . $Day->thisDay(),null,null,false); echo “\n”; //schedulesテーブルに登録されているタイトルを表示 echo ” \n”; foreach ($schedules as $schedule): if(date(“Ymd”, strtotime($schedule['Schedule']['start'])) == date(“Ymd”, mktime(0, 0, 0, $month->month, $Day->thisDay(), $month->year))){ echo ” “; echo $html->link($schedule['Schedule']['title'], ‘/schedules/edit/’.$schedule['Schedule']['id']); echo “ \n”; } endforeach; echo “ \n”; echo “

Sun

Mon

Tue

Wed

Thu

Fri

Sat

” . $Day->thisDay();
//add link
echo $html->link($html->image(“pencil_add.png” , array(“class”=>”alphafilter”)), ‘/schedules/add/’ . $month->year . “/” . $month->month . “/” . $Day->thisDay(),null,null,false);
echo “\n”;
//schedulesテーブルに登録されているタイトルを表示
echo ”

“;
echo $html->link($schedule['Schedule']['title'], ‘/schedules/edit/’.$schedule['Schedule']['id']);
echo “

\n”;
}
endforeach;
echo “

\n”;
echo “

[/sourcecode]

カレンダー上に表示するタイトルのスタイルを指定
・app/webroot/css/cake.generic.css
[sourcecode language='css']
#calendar ul{
margin: 0;
padding: 0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

#calendar li{
margin:0;
padding:3px 0px 1px 18px;
background-image:url(/img/arr.png);
background-repeat:no-repeat;
line-height:120%;
margin-bottom:0px;
}
[/sourcecode]

スケジュール登録処理を作成（CakePHP修行 #8）

admin — Fri, 18 Jul 2008 13:08:03 +0000

今回はスケジュール登録画面を作成します。
今回は(1)スケジュール登録ページのリンク→(2)登録ページ→(3)登録処理→(4)登録完了メッセージの表示、と
順を追って説明していきます。

ちなみに完成画像はこちら↓

(1)スケジュール登録ページのリンク
・app/view/schelue/calendar.thtml
※前回まで、app/view/schelue/index.thtmlだったファイルをcalendar.thtmlに変更しました。

まずは、カレンダーページの日付セル内にそれぞれ日付登録ページへのリンクを張ります。
ここでリンク画像にfamfamfamさんの画像を使用します。
画像形式がPNGなので、IE6対策を施しておきます。
IE6のPNG画像透過処理を行ってくれるto-Rさんが作成された便利なjsライブラリがあるので、
それを利用させていただきます。ダウンロードしたjsファイルをapp/webroot/jsフォルダに入れてください。

リンクをこんな風に記述。
[sourcecode language='php']
echo $html->link($html->image(“pencil_add.png” , array(“class”=>”alphafilter”)), ‘/schedules/add/’ . $month->year . “/” . $month->month . “/” . $Day->thisDay(),null,null,false);
[/sourcecode]

また、ダウンロードしたjsファイルを読み込むために、レイアウトのデフォルトファイルにjsファイル読み込みの記述を追加します。
後述するjqueryファイルも同じように追記します。
・app/views/layouts/default.thtml
[sourcecode language='php']

[/sourcecode]

(2)登録ページ
・app/view/schedule/add.thtml

app/view/schedlue配下にadd.thtmlを作成します。
このファイルはCakePHPの典型的な、登録フォームのページにします。

[sourcecode language='php']

– Schedule Add –

< ?php echo($year . "/" . $month . "/" . $day) ?>

< ?php echo($html->link(“Back”, ‘/schedules/calendar/’ . $year .’/’ . $month)) ?>

百式さんの手法をパクらせていただきました。

[sourcecode language='php']
//add
function add($year = null, $month = null, $day = null)
{
$this->set(“year”,$year);
$this->set(“month”,$month);
$this->set(“day”,$day);

if(!empty($this->data))
{
//日付をセット
$this->data['Schedule']['start'] =
$this->data['Schedule']['start_year'] . “-” .
$this->data['Schedule']['start_month'] . “-” .
$this->data['Schedule']['start_day'];

//データ保存
if($this->Schedule->save($this->data))
{
$this->Session->write(‘sys_msg’, ‘Your schedule has been saved.’);
$this->redirect(‘/schedules/calendar/’ . $year . “/” . $month);
}
}
}
[/sourcecode]

(4)登録完了メッセージの表示
・app/view/schelue/calendar.thtml

登録完了メッセージをjqeryを使用して、ふわーんと表示させています。これも百式さんの手法をパクらせていただきました。

[sourcecode language='php']

< ?php if(isset($sys_msg)){ ?>

< ?php echo($sys_msg); ?>

< ?php } ?>

[/sourcecode]

テーブルレイアウトを調整（CakePHP修行 #7）

admin — Mon, 07 Jul 2008 11:53:36 +0000

たいしたネタではないですが、テーブルのレイアウトを変更したのでソースを載せておきます。CakePHPと関係ないな…。
レイアウト変更後は↓のようになります。

・app/webroot/css/cake.generic.cssに追加
[sourcecode language='css']
/* table */
table {
font-size:12px;
color:#333333;
background-color:#FFFFFF;
clear:both;
padding:0;
margin:0 auto;
white-space: normal;
border-collapse:collapse;
}
th {
background-color: #EEEEEE;
border: 1px solid #CCCCCC;
text-align: center;
padding:4px 4px;
border-collapse:collapse;
}
table tr td {
border: 1px dotted #CCCCCC;
padding:4px 4px;
vertical-align:top;
text-align: left;
border-collapse:collapse;
}

/* calendar */
.holiday{
font-size:10px;
color:#666666;
}

#calendar {width:700px;}

#calendar ul{
margin: 5px 0;
padding: 0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

#calendar li{
background-image:url(/img/arr.png);
background-repeat:no-repeat;
line-height:120%;
margin-bottom:0px;
padding:3px 0px 1px 18px;
}

#calendar table tr td {
height:80px;
width:100px
}
[/sourcecode]

カレンダーページを作成（CakePHP修行 #6）

admin — Sat, 05 Jul 2008 12:55:31 +0000

今回はPearを使ってカレンダー表示ページを作成します。Pearとカレンダーパッケージについては以前にも参考にさせていただいたことのあるmukoさんのブログエントリーが分かりやすいです。コメントも含めて参考にさせていただきました。

creative@interactive ≫ CakePHPとカレンダー表示（2）

まずは下記のようにvendorフォルダにPEARとカレンダーパッケージを配置します。

・app/vendors/pear_ini.php
[sourcecode language='php']
define(‘PEAR_PATH’, dirname(__FILE__) . DS . ‘PEAR’);
ini_set(‘include_path’, PEAR_PATH . PATH_SEPARATOR . ini_get(‘include_path’));
[/sourcecode]

・app/controllers/schedules_controller.php
[sourcecode language='php']
vendor(“pear_ini”);
vendor(“PEAR/Calendar/Month/Weekdays”);

class SchedulesController extends AppController
{
var $name = ‘Schedules’;
var $uses = array(‘Schedule’);

function index($year = null, $month = null)
{
//スケジュール読み込み
$this->set(‘schedules’, $this->Schedule->findAll());
if($year == null || $month == null)
{
$Month = new Calendar_Month_Weekdays( date(‘Y’), date(‘m’), 0 );
$year = date(‘Y’);
$month = date(‘m’);
} else {
$Month = new Calendar_Month_Weekdays( $year, $month, 0 );
}
//PEARよりカレンダー情報を読み込み
$Month->build();
$this->set(‘month’, $Month);
}
}
[/sourcecode]

・app/views/schedules/index.thtml
[sourcecode language='php']

– Test –

< ?php
while ($Day = $month->fetch()) {
if ($Day->isFirst()) {
echo “

\n”;
}
if ($Day->isEmpty()) {
echo “

\n”;
} else {
echo “

\n”;
}
if ($Day->isLast()) {
echo “

\n”;
}
}
?>

Sun	Mon	Tue	Wed	Thu	Fri	Sat
	” . $Day->thisDay() . “

[/sourcecode]

ここまでやれば下記のような感じでカレンダーページが表示されると思います。

デフォルトレイアウトとCSSの変更（CakePHP修行 #5）

admin — Tue, 01 Jul 2008 12:16:29 +0000

前回までは主にDB周りの作業でしたが、今回はデザイン周りの作業を進めてみたいと思います。
CakePHPでは、「app/views/layouts」フォルダ内の「default.thtml」をアプリケーション全体のデザインテンプレートのように扱うことが出来ます。デザインを変更するということで当然CSSにも手を加えます。
このCSSレイアウトを構築するに当たってYEAR OF THE CAT STYLEさんの記事が大変参考になりました。

・スタイルシートによる崩れない　2カラム　3カラム・レイアウト

・app/vies/layouts/default.thtml
（ファイルが存在しない場合は、作成してください。）
[sourcecode language='php']
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

< ?php echo $content_for_layout ?>

[/sourcecode]

次はスタイルシートです。ちょっと長いですが、インデントされている箇所が変更されています。
・app/webroot/css/cake.generic.css
[sourcecode language='css']
*{
margin:0;
padding:0;
}

body{
background:transparent url(/img/background.png) repeat scroll 50%;
color:#000000;
font-family:Verdana,arial,sans-serif,”ヒラギノ角ゴ Pro W3″,”ＭＳゴシック”,”Osaka”;
font-size:12px;
margin:0 auto;
padding:0;
text-align:center;
width:100%;
}

/* General Style Info */
a{
color:#003d4c;
text-decoration:underline;
}
a:hover{
color:#003d4c;
text-decoration:none;
}

a img{
border:none;
}

h1, h2, h3, h4{
font-weight:normal;
}

h1{
color: #003d4c;
margin:0.3em 0;
font-size: 180%;
}

h2{
color:#c6c65b;
padding-top: 1em;
margin:0.3em 0;
font-size: 180%;
}

h3{
color:#c6c65b;
padding-top:2em;
font-size: 140%;
}

h4{
color:#c6c65b;
padding-top:0.5em;
font-weight:normal;
}

em {
font-size: 12px;
}

ul, li {
margin: 0 12px;
}

/* Layout */

#container{
background-color:#FFFFFF;
margin:0 auto;
padding:0;
font-size:12px;
text-align:left;
width:700px;
border-left:#E4E4E4 solid 6px;
border-right:#E4E4E4 solid 6px;
border-bottom:#E4E4E4 solid 6px;
}

#header{
margin:0 0 2px 10px;
}

#content{
width:700px;
}
#footer{
clear:both;
font-size:10px;
text-align:center;
color:#666666;
margin:15px 0;
padding:0;
}

/* tables */

table {
width: 100%;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color:#333;
background-color: #fff;
clear:both;
padding: 0;
margin: 0 0 2em 0;
white-space: normal;
}
th {
background-color: #e2e2e2;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #003d4c;
border-bottom: 1px solid #003d4c;
text-align: center;
padding:1px 4px;
}
table tr td {
border-right: 1px solid #ddd;
padding:4px 4px;
vertical-align:top;
text-align: center;
}
table tr.altRow td {
background: #f4f4f4;
}
table td.actions {
white-space: nowrap;
}
#cakeSqlLog td {
text-align: left;
padding: 4px 8px;
background: #fff;
border-bottom: 2px solid #ccc;
}

/* scaffold show */

div.related {
clear:both;
display:block;
}
dl {
line-height:2em;
margin:0em 1em;
float:left;
width: 400px;
}
dt {
font-weight: bold;
vertical-align:top;
}
dd {
margin-left:10em;
margin-top:-2em;
vertical-align:top;
}

/* notices and errors */

#flashMessage, .error, .error_message {
color:#900;
font-size: 16px;
background-color: #fff;
margin: 8px 0px;
font-weight: bold;
}
.error_message {
clear: both;
}
.error em {
font-size: 18px;
color: #003d4c;
}
.notice {
color: #656565;
font-size: 14px;
background-color: #f4f4f4;
padding: 0.5em;
margin: 1em 0;
display:block;
}
.tip {
color: #656565;
background-color: #ddd;
}

/* forms */

form {
margin-top: 2em;
}
form div{
vertical-align: text-top;
margin-left: 1em;
margin-bottom:2em;
}
form div.date{
margin-left: 0em;
}
label {
display: block;
width: 140px;
font-size: 14px;
padding-right: 20px;
}
input[type=checkbox] {
float: left;
clear: left;
margin: 2px 6px 7px 2px;
}
input, textarea {
clear: both;
display:block;
font-size: 14px;
font-family: inherit;
}
select {
clear: both;
vertical-align: text-bottom;
font-size: 14px;
font-family: inherit;
}
option {
font-size: 14px;
font-family: inherit;
padding: 0 0.3em;
}
input[type=submit] {
display: inline;
vertical-align: bottom;
}
div.required {
clear: both;
color:#222;
font-weight:bold;
}
div.optional {
clear: both;
color:#555;
}
div.submit {
clear: both;
margin-top: 40px;
margin-left: 140px;
}
/* action links */
ul.actions {
float: left;
margin-left:20px;
width: 200px;
}
ul.actions li {
margin-top: 4px;
}
pre {
padding: 1em;
}
[/sourcecode]

コントローラーは$scaffoldを消して下記のように書き換えます。
・app/controllers/schedules_controller.php
[sourcecode language='php']
< ?php
class SchedulesController extends AppController
{
var $name = 'Schedules';

function index(){
}
}
?>
[/sourcecode]

schedulesフォルダ、index.thtmlファイルを作成してください。
・app/views/schedules/index.thtml
[sourcecode language='php']

– Test –

This is View Test!

[/sourcecode]

ついでに「routes.php」も書き換えて、schedules/index.thtmlを最初にアクセスするページに設定しておきます。
コメント行を除く3行のうちの一番上の行を下記のように書き換えてください。

・app/config/routes.php
[sourcecode language='php']
$Route->connect (‘/’, array(‘controller’=>’schedules’, ‘action’=>’index’));
[/sourcecode]

ここまで出来たら「http://localhost/」にアクセスしてみます。
下記のような画面が表示され、デザイン・レイアウトが変更されていることを確認できると思います。