gihyo.jpサイトのロゴ

CakePHPで高速Webアプリ開発

第8回CakePHPで作るToDoアプリ（4）

2007-10-31

第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';

indexビューの修正

indexビューの未完了タスクの表示までを、以下のように書き換えます。

app/views/tasks/index.thtml
<?php echo $javascript->link('prototype') ?>

<?php echo $ajax->form('/tasks/add', 'post', array('update' => 'yet_tasks')) ?>
<p><?php echo $html->input('Task/content') ?>
<?php echo $html->submit('タスクを追加') ?></p>

</form>

<h2>未完了タスク</h2>

<div id="yet_tasks">
<?php echo $this->renderElement('yet_tasks_table') ?>
</div>

<h2>完了タスク</h2>

<table>
<tr>
<th>Id</th>
<th>タスク内容</th>
<th>状態</th>

<th>操作</th>
<th>作成日</th>
</tr>
<?php foreach ($done_tasks as $task) { ?>
<tr>
<td><?php echo h($task['Task']['id']) ?></td>

<td><?php echo h($task['Task']['content']) ?></td>
<td><?php echo h($task['Task']['status']) ?></td>
<td><?php echo $html->link('削除', '/tasks/del/' . $task['Task']['id'], null, '削除してもよろしいですか？') ?></td>
<td><?php echo h($task['Task']['created']) ?></td>

</tr>
<?php } ?>
</table>

1行目ではprototypeライブラリを読み込んでいます。先ほどapp/webroot/js/内に様々なライブラリを配置しましたが、今回のAjax化で必要なJavaScriptライブラリはprototypeのみなのでこれでOKです。

<?php echo $javascript->link('prototype') ?>

3行目ではform要素の開始タグの表示がAJAXヘルパーによって行われるようになりました。

<?php echo $ajax->form('/tasks/add', 'post', array('update' => 'yet_tasks')) ?>

AJAXヘルパーの第1引数はデータ送信先のパス、第2引数はHTTPメソッド(get or post)、第3引数はオプションの連想配列で、updateキーの値にデータ送信後に更新する領域のHTMLのidを指定します。

<div id="yet_tasks">
<?php echo $this->renderElement('yet_tasks_table') ?>
</div>

タスクの追加では未完了タスクが変更されるため、未完了タスクの表示を<div id="yet_tasks">で囲み、さらにその中身をエレメント化するため$this->renderElement()メソッドでyet_tasks_tableエレメントを読み込んでいます。ここでは必ずしもエレメント化する必要はありませんが、addメソッド用のビューがこの部分と同一なため、コードの重複を避けるためにエレメント化を行いました。コードの重複は作業量を増やしたり修正漏れを発生される要因となりますので、同じ出力を行う場合はこのようにパーツをエレメント化して再利用するとよいでしょう

$this->renderElement()とは

ビュー内で実行する$this->renderElement()メソッドは、app/views/elements/エレメント名.thtml ファイルを読み込む機能です。ちょうど、phpのinclude関数に近いものです。ただしincludeと違ってファイルがそのまま読み込まれるわけではなくCakePHPの機構によって読み込まれるので、コントローラから$this->set()でセットされた変数は扱えますが、呼び出し元のビュー内で定義した変数は扱えません。

yet_tasks_tableエレメントとaddビューの作成

yet_tasks_tableエレメントを作成するため、app/views/elements/yet_tasks_table.thtmlファイルに以下のコードを記述します。このコードはAjax化以前と変わりありません。

app/views/elements/yet_tasks_table.thtml
<table>
<tr>
<th>Id</th>
<th>タスク内容</th>
<th>状態</th>
<th>操作</th>
<th>作成日</th>
</tr>
<?php foreach ($yet_tasks as $task) { ?>
<tr>
<td><?php echo h($task['Task']['id']) ?></td>
<td><?php echo h($task['Task']['content']) ?></td>
<td><?php echo h($task['Task']['status']) ?></td>
<td>
  <?php echo $html->link('完了', '/tasks/done/' . $task['Task']['id'],
null, '完了してもよろしいですか？') ?>
  <?php echo $html->link('編集', '/tasks/edit/' . $task['Task']['id']) ?>
  <?php echo $html->link('削除',  '/tasks/del/'  . $task['Task']['id'],
null, '削除してもよろしいですか？') ?>
</td>
<td><?php echo h($task['Task']['created']) ?></td>
</tr>
<?php } ?>
</table>

addビューはapp/views/tasks/add.thtmlファイルを作成し、以下の１行のみ記述します。

app/views/tasks/add.thtml
<?php echo $this->renderElement('yet_tasks_table') ?>

以上でタスク追加のAjax化が完了しました。なお、第7回との見た目の違いはまったくありません。

修正後のアプリケーションにアクセスし、ブラウザの挙動に注意しながらタスクを追加してみてください。ブラウザ上で一切画面遷移が発生していないことに気づくでしょう。Ajax化以前との違いはメッセージの表示が無くなっただけだと思うかもしれませんが、ただ単にメッセージ表示を無くしただけでは、データ送信後に画面切り替えが発生し、ブラウザがスクロールしていた場合はスクロール位置が初期化されてしまうなどの違いがあります。

また、画面遷移が行われないことによってクライアント上のブラウザのレンダリング処理の初期化などが省けるため、ユーザー環境でのレスポンスが改善されるなどのメリットがあります。

AJAXヘルパーについては、CakePHPプログラマーズリファレンスガイド 10章 ヘルパーに解説があります。また、英語文献になりますが、http://api.cakephp.org/class_ajax_helper.html にてAjaxヘルパーの詳しいAPIとソースコードを読むことができます。

次回予定は、このToDoアプリケーションのレイアウトやページのタイトルなどを適切に設定し、アプリケーションとしての体裁を整えます。

おすすめ記事

記事・ニュース一覧