gihyo.jp » DEVELOPER STAGE » 連載 » CakePHPで高速Webアプリ開発 » 第8回 CakePHPで作るToDoアプリ(4)

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

著者プロフィール

秋田真宏(あきたまさひろ)

株式会社ヨセミテ CTO。個人ブログは「akiyan.com」。1981年生まれ。

URLhttp://www.akiyan.com/

著書

  • Fast CakePHP

    Fast CakePHP

コメント

  • 動作について 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)

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

2010年版SEO体得講座

本連載では,いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて,最新トレンドからすぐに使えるTipsまでを紹介します。

小型Linuxサーバの最高峰 OpenBlockS 600活用指南

搭載メモリの増加,CPUクロックの向上など,あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から,活用するためのさまざまなノウハウを紹介していきます。

はじめMath! Javaでコンピュータ数学

プログラミング言語入門者向けに,知っていると役立つ数学的トピックスを紹介します。簡単な演習問題と解説で,即活用できる知識を目指します。

教科書には載っていない ネットワークエンジニアの実践技術

ネットワークエンジニア,インフラエンジニアのトラブル対応には,時には「教科書通りにいかない」テクニックが必要となります。資格試験では得られないこうした実践的な技術について,実例を元に紹介します。

Googleケータイ,世に現る

2008年9月,Googleが中心となって開発されている「Android」を採用した携帯電話「T-Mobile G1」が発表されました。本連載ではT-Mobile G1を中心にGoogleケータイに迫ります。

モバゲーオープンプラットフォームに挑戦!――面白法人カヤック流モバゲーオープンプラットフォーム企画と開発のイロハ

2010年1月にリリースとなったモバゲーオープンプラットフォーム。その制作企業であるカヤックが,アイデアを企画に落とし込み,開発までのノウハウを紹介します。

プロトタイピングツールSketchFlowを用いた,Silverlightアプリ開発

SketchFlowプロトタイプ作成からアプリケーション開発までをExpression Blend 3を使って実践的に解説します。

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス

最近のコメント