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

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

WEBアプリの趣旨

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

今後実装したい機能

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

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

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月いっぱいの完成を目指して進めたいところ。

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

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

・app/controllers/components/datetime.php

<?php
class DatetimeComponent extends Object
{
	var $controller = null;

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

	function startup(&amp;amp;$controller){
		$this->controller =&amp;amp; $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));
	}
}
?>

フォーマットの指定はPHPの標準関数であるDate関数と同じ形式です。
↓こんな感じで使用します。

$yyyy_m_d = $this->Datetime->toFormat($this->data['Schedule']['start'],'Y/n/j');

コントローラーのCalendarアクションを変更します。
・app/controllers/schedules_controller.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));
}

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

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

<!-- ▼sys_msg -->
< ?php if(isset($sys_msg)){ ?>
<div id="sys_msg">< ?php echo($sys_msg); ?></div>
<script type="text/javascript"><!--
$(document).ready(function() { $("#sys_msg").fadeOut(2500); });
// --></script>
< ?php } ?>
<!-- ▲sys_msg -->

<!-- ▼calendar -->
<div id="calendar">
<table border="0">
<tbody>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
< ?php
while ($Day = $month->fetch()) {
if ($Day->isFirst()) {
echo "
<tr>\n";
}
if ($Day->isEmpty()) {
echo "
<td></td>
\n";
} else {
echo "
<td>" . $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 "
<ul>\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 "
	<li>";
echo $html->link($schedule['Schedule']['title'], '/schedules/edit/'.$schedule['Schedule']['id']);
echo "</li>
\n";
}
endforeach;
echo "</ul>
\n";
echo "</td>
\n";
}
if ($Day->isLast()) {
echo "</tr>
\n";
}
}
?></tbody></table>
</div>
<!-- ▲calendar -->

カレンダー上に表示するタイトルのスタイルを指定
・app/webroot/css/cake.generic.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;
}

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

(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フォルダに入れてください。

リンクをこんな風に記述。

echo $html->link($html->image("pencil_add.png" , array("class"=>"alphafilter")), '/schedules/add/' . $month->year . "/" . $month->month . "/" . $Day->thisDay(),null,null,false);

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>< ?php echo $title_for_layout ?></title>
<link rel="stylesheet" href="/css/cake.generic.css" type="text/css">

<script type="text/javascript" src="/js/alphafilter.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
</link></head>

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

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

<h1> - Schedule Add - </h1>

<div id="content">
<h2>< ?php echo($year . "/" . $month . "/" . $day) ?></h2>
< ?php echo($html->link("Back", '/schedules/calendar/' . $year .'/' . $month)) ?>

<form method="post" action="<?php echo $html->url('/schedules/add/' . $year . "/" . $month)?>">
    < ?php echo $html->hidden('Schedule/start_year', array("value" => $year)) ?>
    < ?php echo $html->hidden('Schedule/start_month', array("value" => $month)) ?>
    < ?php echo $html->hidden('Schedule/start_day', array("value" => $day)) ?>
    <p>
        Title：
        < ?php echo $html->input('Schedule/title', array('size' => '40'))?>
        < ?php echo $html->tagErrorMsg('Schedule/title', 'タイトルは必ず入力してください。') ?>
    </p>
    <p>
        Content：
        < ?php echo $html->textarea('Schedule/content', array('rows'=>'10')) ?>
        < ?php echo $html->tagErrorMsg('Schedule/content', '本文は必ず入力してください。') ?>
    </p>
    <p>
        < ?php echo $html->submit('Save') ?>
    </p>
</form>
</div>

(3)登録処理
・app/controllers/schedules_controller.php

登録処理もCakePHPの典型的な登録処理です。
登録完了メッセージをセッションに入れているのは百式さんの手法をパクらせていただきました。

//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);
		}
	}
}

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

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

<!-- ▼sys_msg -->
< ?php if(isset($sys_msg)){ ?>
<div id="sys_msg">< ?php echo($sys_msg); ?></div>
<script>
$(document).ready(function() { $("#sys_msg").fadeOut(2500); });
</script>
< ?php } ?>
<!-- ▲sys_msg -->

・app/webroot/css/cake.generic.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
}

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

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

・app/vendors/pear_ini.php

define('PEAR_PATH', dirname(__FILE__) . DS . 'PEAR');
ini_set('include_path', PEAR_PATH . PATH_SEPARATOR . ini_get('include_path'));

・app/controllers/schedules_controller.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);
	}
}

・app/views/schedules/index.thtml

<h1> - Test - </h1>

<!-- ▼calendar -->
<div id="calendar">
<table border="0">
  <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
< ?php
    while ($Day = $month->fetch()) {
        if ($Day->isFirst()) {
            echo "<tr>\n";
        }
        if ($Day->isEmpty()) {
            echo "<td>&amp;nbsp;</td>\n";
        } else {
            echo "<td>" . $Day->thisDay() . "</td>\n";
        }
        if ($Day->isLast()) {
            echo "</tr>\n";
        }
    }
?>
</table>
</div>
<!-- ▲calendar -->

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

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

・app/vies/layouts/default.thtml
（ファイルが存在しない場合は、作成してください。）

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>< ?php echo $title_for_layout ?></title>
<link rel="stylesheet" href="/css/cake.generic.css" type="text/css">

</link></head>
<body>

<!-- ▼container -->
<div id="container">

<!-- ▼header -->
<div id="header">
	&amp;nbsp;
</div>
<!-- ▲header -->

<!-- ▼contents -->
<div id="contents">
< ?php echo $content_for_layout ?>
</div>
<!-- ▲contents -->

</div>
<!-- ▲container -->

<!-- ▼footer -->
<div id="footer">Copyright &amp;copy; 2008 STUDIO KINGDOM All rights reserved.</div>
<!-- ▲footer -->

</body>
</html>

次はスタイルシートです。ちょっと長いですが、インデントされている箇所が変更されています。
・app/webroot/css/cake.generic.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;
}

コントローラーは$scaffoldを消して下記のように書き換えます。
・app/controllers/schedules_controller.php

< ?php
class SchedulesController extends AppController
{
	var $name = 'Schedules';

	function index(){
	}
}
?>

schedulesフォルダ、index.thtmlファイルを作成してください。
・app/views/schedules/index.thtml

<div style="padding:10px">
<h1> - Test - </h1>
<p>
	This is View Test!
</p>
</div>

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

・app/config/routes.php

$Route->connect ('/', array('controller'=>'schedules', 'action'=>'index'));

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