CakePHPで高速Webアプリ開発
第8回 CakePHPで作るToDoアプリ(4)
第7回ではタスクの管理に必要な機能を実装しました。今回はタスクの追加を簡易的にAjax化してみます。
タスクの追加をAjax化する
CakePHPにはWebアプリケーションのAjax化を支援するAJAXヘルパーというヘルパーがあります。これを使うことでよくあるAjax処理をJavaScriptをまったく記述せずに実装することができます。
必要なJavaScriptライブラリの入手
AJAXヘルパーではJavaScriptライブラリのPrototypeとscript.aculo.usを使用します。この2つのライブラリはCakePHPパッケージには含まれていませんので,http://script.aculo.usから最新版のJavaScriptライブラリをダウンロードし,app/webroot/js/内に設置してください。
/app/webroot/js/に以下のJavaScriptライブラリを設置
builder.js
controls.js
dragdrop.js
effects.js
prototype.js
scriptaculous.js
slider.js
unittest.js
Tasksコントローラの修正
Ajax化にあたって,コントローラとビューをAjaxに対応させます。まずはTasksコントローラにメンバー変数として$helperを定義し,addアクションを以下のように書き換えます。
app/controllers/tasks_controller.php
<?php
class TasksController extends AppController {
var $name = 'Tasks';
var $uses = array('Task');
var $helpers = array(
'Javascript',
'Ajax',
);
function index() {
$this->set('yet_tasks', $this->Task->findAllByStatus('yet', null,
'Task.created ASC'));
$this->set('done_tasks', $this->Task->findAllByStatus('done',
null, 'Task.modified DESC'));
}
function add() {
if (empty($this->data)) return;
$this->Task->save($this->data, true, array('content', 'created',
'modified'));
$this->set('yet_tasks', $this->Task->findAllByStatus('yet', null,
'Task.created ASC'));
$this->layout = 'ajax';
}
function done($id) {
if ($this->Task->findById($id)) {
$this->Task->id = $id;
$this->Task->save(array('status' => 'done'));
}
$this->redirect('/tasks');
}
function edit($id) {
$task = $this->Task->findById($id);
if (!$task) {
$this->redirect('/tasks');
return;
}
if (!empty($this->data)) {
$task['Task']['content'] = $this->data['Task']['content'];
$this->Task->save($task);
}
$this->set('task', $task);
}
function del($id) {
$this->Task->del($id);
$this->redirect('/tasks');
}
}
この変更のポイントは2つです。TasksControllerクラスに追加したメンバ変数の$helpersでは、JavaScriptヘルパーとAjaxヘルパーの使用を明示しています。今まで使用してきたHTMLヘルパーは明示しなくても自動的に定義されていましたが,この2つのヘルパーはこのように明示する必要があります。
var $helpers = array(
'Javascript',
'Ajax',
);
addアクションの最後の行ではレイアウトをAjax用に変更しています。CakePHPで用意されたajaxレイアウトはアクションのビュー出力以外の要素を一切表示しないためAjax用の出力に適したレイアウトとなっています。
$this->layout = 'ajax';
CakePHPで高速Webアプリ開発
-
動作について 2
上記内容と同現象が
私の開発環境でも発生致します。
何か心当たりありましたら
宜しくお願い致します。Commented : #3 fot (2008/06/28, 01:32)
-
次回はいつ更新予定ですか?
数ある例の中でもっとも実践的で参考になりました。
次回の更新を楽しみにしているので、よろしくお願いします!Commented : #2 nex (2008/02/21, 21:46)
-
動作について
今回のAjaxかの動作を、ソースをコピーして
行っておりますが、tasksへアクセスすると
Event.observe is not a function 行:15
とfirefoxのエラーで表示されて
タスクを追加のボタンを押しても
反応がありません、何故でしょうか?
よろしくお願いいたします。Commented : #1 ddt (2007/12/09, 11:27)


