Archive for the ‘Backbone.js’ Category:

CakePHP + Backbone.jsで作るJavaScript Web Application ~ JSONフォーマットの変更 ~

Sunday, April 15th, 2012

以前、書いた二つの記事、

では、CakePHPの出力するJSONに合わせて、Backbone.jsにカスタムのparseメソッドを実装していました。ただ、世の中のライブラリを見ると、Backbone.jsが期待している形式の方が一般的のようです。ですので、CakePHP側のJSONフォーマットを変更したバージョンを作成してみました。ソースコードはgithubの「backbone_client_nocustomparse」,「cakephp_service_nocustomparse」となります。行っていることはCakePHPのコントローラでモデルから返されたarrayをちょっと変更しているだけです。

Archive for the ‘Backbone.js’ Category:

CakePHP + Backbone.jsで作るJavaScript Web Application ~ JSONフォーマットの変更 ~

Sunday, April 15th, 2012

以前、記事「CakePHP + Backbone.jsで作るJavaScript Web Application」を書きましたが、このときは、CakePHPとBackbone.jsをどう連携させるかに焦点を当てていたので、Backbone.jsの重要な機能であるViewを全く使っていませんでした。ということで、今回はViewを使った場合のCakePHPとBackbone.jsの連携について説明します。

なお、ソースコードはgithubのこちらのリポジトリのbackbone_client2となります。

1. Backbone.jsにおけるView

Backbone.jsのViewは、その名前とは異なり、実際にはViewを表示するというより、ModelとViewをつなぐ部品としての役割が主となります。なので、実際の表示、つまりDOMの操作にどの方法を使うかは開発者に任されています。今回のアプリケーションでは前回と同じくjQueryを使うこととします。なので、Backbone.jsが提供しているViewクラス(Backbone.View)には、あまり多くの機能はなく、どちらかと言えばViewを作るための土台となるクラスを提供しているというイメージです。

今回のアプリケーションで使うモデルは、以前の記事と変わらず、一つの顧客モデルを表すCustomerと、複数の顧客モデルを含むCustomersコレクションを定義します。そして、二つのモデルに対応するViewクラスであるCustomerViewとCustomersViewを新たに定義します。(わかりづらいですが単数形と複数形の違い)

アプリケーションの構成としては、一つのCustomersコレクションのインスタンスと、それに対応するCustomersViewのインスタンスがあり、その二つがバインドされます。そして、一覧表示、追加、削除、編集といった処理で、一つの顧客を表すCustomerモデルとCustomerViewが生成、更新、削除されていくこととなります。このため、CustomersViewとCustomerViewとでは、同じBackbone.Viewを継承しているViewクラスですが、結構実装の内容が異なる点に注意してください。

なお、先ほども触れたようにBackbone.jsのViewは、土台程度の部分しか提供されていないので、実装の仕方には、いろいろな選択肢があります。今回は、Backbone.jsのサイトにあるTodo List Applicationに近い形式を選択しています。

2. 大まかな実装の流れ

Viewの実装の流れは、大きく以下となります。

  1. tagNameプロパティもしくはelで、Viewと対となるHTML要素を生成もしくは指定する。
  2. eventsプロパティで、UIイベントとViewをバインドする。
  3. initializeメソッドで、ModelのイベントとViewをバインドする。
  4. renderメソッドで$elを編集する処理を記述する。
  5. その他のイベントに対するコールバックメソッドを実装する。

3. CustomerViewクラスの定義

Customerモデルと対になるCustomerViewクラスは以下のような内容となります。

var CustomerView = Backbone.View.extend({
  tagName : 'tr',
  events : {
    "click .edit-button" : "onEditButton",
    "click .delete-button" : "onDeleteButton"
  },
  initialize : function() {
    this.model.on('change', this.render, this);
    this.model.on('destroy', this.remove, this);
  },
  render : function() {
    this.$el.html('<td>' + this.model.get('id') + '</td><td>'
        + this.model.get('name') + '</td><td>'
        + this.model.get('address')
        + '</td><td>'
        + '<input class="edit-button" type="button" value="Edit"/>'
        + '<input class="delete-button" type="button" value="Delete"/>'
        + '</td>');
    return this;
  },
  onEditButton : function() {
    $('#dialog-name').val(this.model.get('name'));
    $('#dialog-address').val(this.model.get('address'));
    $('#dialog').bind('dialogclose', {model: this.model},
      function(event) {
        event.data.model.set('name', $('#dialog-name').val());
        event.data.model.set('address', $('#dialog-address').val());
        event.data.model.save();
        $('#dialog').unbind('dialogclose');
      }
    );
    $('#dialog').dialog('open');
  },
  onDeleteButton : function() {
    this.model.destroy();
  }
});

Backbone.jsのViewは、モデルを表すビューのDOMツリーの起点(ルート)となる要素と対になります。たとえば、table要素の一つの行が一つのモデルに対応する場合は、tr要素とViewが対になります。そしてViewクラスがインスタンス化される際に、対になるtr要素がBackbone.View内部で自動的に生成されます。このため、ビューに対してどうやって要素を生成させるかの情報を、ビューを定義する際に与えてあげる必要があります。そのための指定が以下のtagNameの指定です。つまり、ここではtr要素が生成されます。tagName以外にも、オプションとしてclassNameやidを指定することもできます。

  tagName : 'tr'

そして、生成された要素はelというプロパティに設定されます。さらに$elでjQueryオブジェクトとしてアクセスできます。

次にeventsオプションで、HTML要素のイベントとViewをバインドします。

events : {
  "click .edit-button" : "onEditButton",
  "click .delete-button" : "onDeleteButton"
},

指定の仕方は「”イベント セレクタ” : “コールバック”」となります。ですので、最初の指定ではedit-buttonクラスを持つ要素のclickイベントにonEditButtonコールバックをバインドします。

イベントのバインドにはjQueryのdelegateを使っています。具体的には「this.$el.delegate(セレクタ, イベント, コールバック)」でバインドしています。ですので、$elを起点としたDOMツリー内からセレクタで選択される要素にバインドされます。つまり、$el以下にない要素とはバインドできません。

initializeメソッドは、Viewがインスタンス化される際に自動的に呼び出されます。ここでは、モデルのイベントとコールバックを結び付けています。

initialize : function() {
  this.model.on('change', this.render, this);
  this.model.on('destroy', this.remove, this);
},

Backbone.jsのモデルには、イベントをバインドするためのon(もしくはbind)というメソッドが定義されています。そして、イベントの種類として以下が定義されています。

イベント名 契機 対象
add コレクションにモデルが追加された場合 モデル、コレクション
remove コレクションからモデルが削除された場合 モデル、コレクション
reset コレクションの内容がすべて入れ代った際 コレクション
change モデルの属性が変更された際 モデル、オプション
change:[attribute] 特定の属性が変更された際 モデル、値、オプション
destroy モデルが破棄された際 モデル、コレクション
sync モデルのサーバへの同期に成功した際 モデル、コレクション
error モデルのバリデーションが失敗した際か、サーバへの保存に失敗した際 モデル、コレクション
route:[name] ルーターのルートに一致した際 ルーター
all この特別なイベントは、すべてのイベントで発生し、第一引数にイベント名を設定する

一つ目の「this.model.on(‘change’, this.render, this)」の場合、モデル「this.model」で「change」イベント(つまり、モデルの属性の変更)が発生した場合、ビューの「render」メソッドが呼び出されます。なお、第三引数の「this」は、コールバックメソッド側でthisとして扱うオブジェクトを指定します。ここでは、thisなのでビュー自身を指定しています。

二つ目の「this.model.on(‘destroy’, this.remove, this)」の場合、「destroy」イベント(つまり、モデルの破棄)が発生した場合、ビューの「remove」メソッドが呼び出されます。なお、このremoveメソッドは、Backbone.Viewにあらかじめ定義されており、「this.$el.remove()」が実行され、このビューと対になるHTML要素の削除が行われます。

なお、「this.model」の値は、Viewを生成する際にオプションとしてmodelを指定することで設定されます。今回はCustomersViewのonAddEventで指定しています。

次のrenderがビューの中心となる部分です。

render : function() {
  this.$el.html('<td>' + this.model.get('id') + '</td><td>'
      + this.model.get('name') + '</td><td>' + this.model.get('address')
      + '</td><td>'
      + '<input class="edit-button" type="button" value="Edit"/>'
      + '<input class="delete-button" type="button" value="Delete"/>'
      + '</td>');
  return this;
},

renderメソッド内では、$elをモデルのデータを基に編集します。$el自身はtagNameから生成されているので、行うのは$elの属性の変更や、子要素の追加などとなります。

最後の「return this」は、他のビューがCustomerViewのrenderの結果が必要となる際にアクセスしやすいように、このような記述の仕方をしています(ちなみに、Backbone.Viewのrenderメソッドの内容は「return this」のみ)。実際に、この後、CustomersViewのrenderで使っています。

Backbone.jsで用意しているビューへの変更はここまでです。この後にあるonEditButtonとonDeleteButtonは、編集ボタンと削除ボタンを押した際に起動されるコールバックメソッドとなります。それぞれ、モデルの属性の更新とモデルの削除を実装しています。

4. CustomersViewクラスの定義

コレクションCustomersに対応するビューCustomersViewクラスの内容は以下となります。

var CustomersView = Backbone.View.extend({
  el : $('#customer-app'),
  events : {
    "click #add-button" : "onAddButton"
  },
  initialize : function() {
    customers.on('add', this.onAddEvent, this);
    customers.on('reset', this.onResetEvent, this);
    customers.on('all', this.render, this);
    customers.fetch();
  },
  onAddEvent : function(customer) {
    var customerView = new CustomerView({
      model : customer,
      id : customer.get('id')
    });
    this.$('#list-tbody').append(customerView.render().el);
  },
  onResetEvent : function() {
    this.$('#list-tbody').html('');
    customers.each(this.onAddEvent);
  },
  onAddButton : function(e) {
    $('#dialog-name').val('');
    $('#dialog-address').val('');

    $('#dialog').bind('dialogclose', function(event) {
      customers.create({
        name : $('#dialog-name').val(),
        address : $('#dialog-address').val()
      });
    });
    $('#dialog').dialog('open');
  }
});

すでに説明したCustomerViewと同じくBackbone.Viewを継承していますが、いきなり最初から異なります。

  el : $('#customer-app'),

CustomerViewの場合は、tagNameを指定して、生成されるHTML要素の種類を指定していました。というのも、CustomerViewの場合、顧客の件数により動的にビューが生成されるためです。対して、CustomersViewはtable要素などをすべて含むdiv要素と対となります。そして、そのdiv要素はHTML上にある静的なもので、生成、削除が行われることはありません。Backbone.jsのViewは、elが存在しないとインスタンス化の際にtagNameからelを生成しますが、もしすでにelが存在する場合は、生成しないようになっています。ですので、$(‘#customer-app’)で、対となるdiv要素をelに指定しています。

次のinitializeでは、CustomerViewと同じくイベントとコールバックメソッドのバインドを行っています。そして最後に「customers.fetch()」でサーバから現在DBに登録されている顧客データの一覧を取得しています。なお、customersはCustomersコレクションのインスタンスです。

initialize : function() {
  customers.on('add', this.onAddEvent, this);
  customers.on('reset', this.onResetEvent, this);
  customers.on('all', this.render, this);
  customers.fetch();
},

コレクションのfetch()が実行されると、resetイベントが発生するので、自動的にバインドしていたthis.onResetEventメソッドが呼び出されます。そして、this.onResetEventメソッドではすべての顧客データをtable要素に追加しています。

一件追加処理は、まず、Addボタンが押された後に、コレクションのcreateメソッドで一件のCustomerを追加しています。すると、コレクションでaddイベントが発生するのでonAddEventメソッドが呼び出されます。

onAddEvent : function(customer) {
  var customerView = new CustomerView({
    model : customer,
    id : customer.get('id')
  });
  this.$('#list-tbody').append(customerView.render().el);
},

ここでは、CustomerViewを生成していますが、その際に対となるCustomerモデルを指定しています。同時に、idを指定することで、CustomerViewの対となるtr要素のid属性を指定しています。

実際のtable要素への行の追加は、CustomerViewのrenderメソッドを呼び出し、その結果を追加することで行っています。

なお、今回はrenderメソッドを特に定義していませんが、もし、モデルの情報が変わったら変更しなければならないUIがあれば定義します。ちなみに、Backbone.jsのサイトにあるTodo List Applicationでは、データが0件の場合に、一覧自体をまったく表示しないようにしています。

5. 最後に

ソースコードはgithubのこちらのリポジトリのbackbone_client2となりますので、細かい点はこちらを参照してください。

Archive for the ‘Backbone.js’ Category:

CakePHP + Backbone.jsで作るJavaScript Web Application ~ JSONフォーマットの変更 ~

Sunday, April 15th, 2012

CakePHPでWebサービスを公開して、Backbone.jsでアクセスするという、今話題のJavaScript Web Applicationを試してみたのですが、いろいろと苦労したのでまとめてみました。
ソースコードはGitHubに置いてあります。

更新: 本記事ではCakePHPとBackbone.jsを連携させる部分に焦点を当てているために、Backbone.jsのViewを使っていません。View使った場合については「CakePHP + Backbone.jsで作るJavaScript Web Application ~ Viewの利用 ~」を参照してください。

更新2: 本記事ではCakePHPに合わせるようにBackbone.js側のモデルにカスタムparseメソッドを実装しています。逆にCakePHP側の出力するJSONフォーマットを変更したものが「CakePHP + Backbone.jsで作るJavaScript Web Application ~ JSONフォーマットの変更 ~」にあります。

1.Webアプリの構成

Webアプリは、CakePHP側とBackbone.js側とを別のアプリ、つまり別のフォルダに構成することにします。CakePHP側は”cakephp_service”、Backbone.js側は”backbone_client”という名前のフォルダに置くこととします。作成するアプリの内容としては、DB上の顧客(Customer)情報にアクセスできるWebサービスをCakePHPで提供し、そのWebサービスにBackbone.jsでアクセスすることとします。以下が簡単なアプリケーションの構成図です。

2.環境

今回は以下の環境を使いました。

3.MySQLのセットアップ

XAMPPからphpMyAdminを起動して、以下のデータベースとユーザを作成します。

  • データベース: test_service
  • ユーザ/パスワード: test/test

test_serviceデータベースに、以下のようにcustomersテーブルを作成します。

CREATE TABLE customers (
  id CHAR(36) NOT NULL,
  name VARCHAR(64) NOT NULL,
  address VARCHAR(255) NOT NULL,
  created datetime NOT NULL,
  modified datetime NOT NULL,
  PRIMARY KEY (id)
);

このテーブルはCakePHPの規約に沿って、作成しています。

4.CakePHPの基本的なセットアップ

XAMPPのhtdocs内に”cakephp_service”と”backbone_client”フォルダを作成します。

cd xampphtdocs
mkdir cakephp_service
mkdir backbone_client

CakePHP 2.1のzipファイルを展開し、その中身をすべてcakephp_serviceにコピーします。XAMPPのApacheが起動していなければ起動します。ブラウザで”http://localhost/cakephp_service/“にアクセスすることでCakePHPの動作が確認できます。
ここからは、CakePHPの基本的な設定を行います。詳しくはCookbookのInstallを見てください。

  1. app/Config/core.phpのSecurity.saltの値を変更する。
  2. app/Config/core.phpのSecurity.cipherSeedの値を変更する。
  3. app/Config/database.php.defaultをdatabase.phpという名前でコピーする。
  4. database.phpを編集する。

database.phpの内容は以下の通りにしました。

class DATABASE_CONFIG {
  public $default = array(
    'datasource' => 'Database/Mysql',
    'persistent' => false,
    'host' => 'localhost',
    'login' => 'test',
    'password' => 'test',
    'database' => 'test_service',
    'prefix' => '',
    'encoding' => 'utf8',
  );

public $test = array(
    'datasource' => 'Database/Mysql',
    'persistent' => false,
    'host' => 'localhost',
    'login' => 'test',
    'password' => 'test',
    'database' => 'test_service',
    'prefix' => '',
    'encoding' => 'utf8',
  );
}

ブラウザで”http://localhost/cakephp_service/“にアクセスして、エラーや警告が出ていないことを確認してください。

5.CakePHPのWebサービスの設定

CakePHPをWebサービスに対応させるためには、3つのことが必要となります。

  1. CakePHPでJson形式のレスポンスを返せるようにする – JsonViewの設定をします
  2. CakePHPでJson形式のリクエストを受け取れるようにする – CakePHPがJsonをパースするので、コントローラでそのデータにアクセスするようにします
  3. CakePHPのアクションとWebサービスのHTTPメソッドをマッピングする – routes.phpを編集します

最後のHTTPメソッドですが、Backbone.jsやSpine.jsは、サーバとの通信に以下のようなHTTPメソッドとURLの組み合わせでアクセスしてきます。そして、CakePHPでは、設定を変更することで、それぞれを以下のようにControllerのアクションにマッピングする機能を持っています。

機能 HTTPメソッド URL コントローラのアクション
一覧の取得 GET /customers CustomersController::index()
IDを持つ値の取得 GET /customers/id CustomersController::view(id)
追加 POST /customers CustomersController::add()
編集 POSTもしくはPUT /customers/id CustomersController::edit(id)
削除 DELETE /customers/id CustomersController::delete(id)

特筆すべきは、JsonViewを有効にすることで、CakePHPのModelとControllerを作成するだけで、つまり、Viewを作成することなく、Jsonのレスポンスを返せるようになります。
Webサービスに関する設定は、CakePHP Cookbookに書かれている以下の情報を参考にしています。

5.1 AppControllerの編集

“app/Controller/AppController.php”をテキストエディタで開き、以下のように編集します。

App::uses('Controller', 'Controller');

class AppController extends Controller {
  public $viewClass = 'Json';
  public $components = array('RequestHandler');
}

“$viewClass = ‘Json'”により、JsonViewをViewクラスとして使うことを指定しています。”$components = array(‘RequestHandler’)”により、RequestHandlerが有効となり、コンテンツタイプにより自動的にViewクラスが変更されるようになります。

5.2 routes.phpの編集

“app/Config/routes.php”をテキストエディタで開き、以下のように編集します。

Router::mapResources('customers');
Router::parseExtensions('json');

Router::connect('/',
  array('controller' => 'pages', 'action' => 'display', 'home'));
...

“Router::parseExtensions(‘json’)”により、Accept Headerが”application/json”の場合にJsonViewに切り替わるようになります。
そして、”Router::mapResources(‘customers’)”により、CustomersControllerに対するリクエストはWebサービス特有のHTTPメソッドにマッピングするようになります。注意として、今後Webサービスとして公開するコントローラが増えた場合、routes.phpに”Router::mapResources(コントローラ名)”を追加していく必要があります。

6.モデルの作成

モデルは、通常のCakePHPのモデルと変わりません。今回のアプリケーションではCustomer.phpを”app/Model”に以下の内容で作成します。

<?php
class Customer extends AppModel {
    public $name = 'Customer';
}
?>

7.コントローラの作成

まず、”app/Controller”にCustomersController.phpを以下の内容で作成します。

<?php
class CustomersController extends AppController {
    public $name = 'Customers';
}
?>

ここに、アクションを一つずつ追加していきます。その前に、Backbone.js側の準備をします。

8. Backbone.js側の準備

8.1 環境

backbone_clientフォルダ内にlibフォルダを作成し、その中に以下のファイルをコピーします。

  1. backbone.js
  2. jquery-1.7.2.js
  3. json2.js
  4. underscore.js

アプリケーションはindex.htmlとapplication.jsだけとなります。index.htmlには以下の内容を記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Backbone.js Client</title>
    <script src="lib/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="lib/underscore.js" type="text/javascript"></script>
    <script src="lib/json2.js" type="text/javascript"></script>
    <script src="lib/backbone.js" type="text/javascript"></script>
    <script src="application.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

8.2 モデルの定義

Backbone.jsにはいろいろな機能が含まれていますが、ここで使うのはモデルの定義と、モデルに含まれるデータのAjaxによるサーバへの永続化です。定義するモデルはCustomerモデルと、そのコレクションであるCustomersコレクションです。
まず、Customerモデルを定義しますので、application.jsの先頭に以下を記述します。なお、モデルが持つデータをBackbone.jsでは属性(attribute)と読んでいますので、その用語をここでも使います。ちなみに、CakePHPのモデルではプロパティという用語を使いますが、JavaScriptでのプロパティはJavaScriptオブジェクトの持つプロパティとなり、モデルの持つデータとは異なる意味になるので注意が必要です。

var Customer = Backbone.Model.extend({
  defaults : {
    "name" : "",
    "address" : ""
  },
  urlRoot : "/cakephp_service/customers",
  parse : function(response) {
    if (response.Customer != undefined) {
      return response.Customer;
    }
    return response;
  }
});

Backbone.jsではBackbone.Model.extend({})を使って、モデルクラスを定義します。引数でオプションを指定できますが、ここではdefaults、urlRoot、parseという3つのオプションを指定しています。

“defaults”は、その名の通り、Customerモデルが持つ属性のデフォルト値を指定しています。”defaults”は無くても問題はないのですが、nameとaddressが存在しないという状態を作りたくなかったので設定しました。注意として、idという属性は”defaults”に指定してはなりません。Backbone.jsでは、idという属性が存在しているかどうかで、そのインスタンスがサーバに永続されているかを判断するために使います。つまり、属性idが割り当てられていないインスタンスは、新しいインスタンスと判断され、サーバに永続される際にaddアクションが呼び出され、DBへのINSERTが発生します。

“urlRoot”は、このモデルがサーバに永続される際に、サーバへAjaxリクエストを送る際のURLルートを指定します。今回のアプリケーションでは”/cakephp_service”の”/customers”にアクセスするように指定します。

“parse”は、サーバが返したJSONを、どのようにパースしてモデルのインスタンスを生成するかを定義する関数を記述します。デフォルトでは、受け取ったJSONがそのままモデルのインスタンスとなることを仮定しています(つまり”return response;”)。ですので、CakePHP側が生成するJSONのフォーマットと合うように設計する必要があります。加えて、この後で説明するコレクションのパースの場合でも正しく動作する必要があります。ここでは、responseにCustomerというプロパティが定義されていたらその値をモデルのインスタンスとし、それ以外の場合は、そのままresponseをモデルのインスタンスとして返すようにしています。

8.3 コレクションの定義

Backbone.jsでは、検索結果のように複数件のモデルが含まれる結果が返る場合は、それをコレクションに格納することになっています。ですので、複数のCustomerモデルが含まれるコレクションとしてCustomersコレクションを次に定義します。

var Customers = Backbone.Collection.extend({
  model : Customer,
  url : "/cakephp_service/customers"
});

Backbone.Collection.extend({})で、コレクションクラスを定義します。ここでは、オプションとしてmodelとurlを指定しています。modelはこのコレクションが格納するモデルを指定します。urlは、コレクションをサーバから取得する際のURLを指定します。ちなみに、コレクションでもparseを指定し、JSONのパースの仕方を変えることができます。また、コレクションのparseは、内部でモデルのparseを呼び出して、最終的なモデルのインスタンスを取得しています。

9 アクションの定義

9.1 Customerの追加(addアクション)

Customerを新しく追加するため、nameとaddressを入力し、Addボタンを押すことができるWebページを作成します。

HTMLとしては以下のようになります。

<table id="add-table">
  <tbody>
    <tr>
      <th>name</th>
      <td><input id="add-name" size="32"/></td>
    </tr>
    <tr>
      <th>address</th>
      <td><input id="add-address" size="32"/></td>
    </tr>
  </tbody>
</table>
<input id="add-button" type="button" value="Add"/>

Addボタンが押された場合に、Customerモデルをサーバに永続化する処理は以下となります。

$(function() {
  $("#add-button").click(function(e) {
    var customer = new Customer({
      name : $('#add-name').val(),
      address : $('#add-address').val()
      });
    customer.save();
  });
});

“new Cutomer({})”とすることで、新しいCustomerのインスタンスが生成できます。この際、設定したい属性を引数に指定できます。ここでは、nameとaddress属性を、inputタグの値を取得して設定しています。
生成したcustomerインスタンスを永続化するにはsave()を呼び出します。これで、非同期でサーバへの永続化が実行されます。
nameに”test”、addressに”tokyo”と指定した場合に、Backbone.jsから送られるHTTPリクエストの内容は以下の通りとなります。

POST /cakephp_service/customers HTTP/1.1
Host: 127.0.0.1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/20100101 Firefox/11.0
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Type: application/json; charset=UTF-8
X-Requested-With: XMLHttpRequest
Referer: http://localhost/backbone_client/
Content-Length: 33
Pragma: no-cache
Cache-Control: no-cache

{"name":"test","address":"tokyo"}

さて、CakePHPのCustomersControllerに、このリクエストを受けて、データベースにCustomer格納するするアクションaddを追加します。

class CustomersController extends AppController {
  public $name = 'Customers';
  function add() {
    $customer['Customer']['name'] = $this->params['data']['name'];
    $customer['Customer']['address']  = $this->params['data']['address'];
    $this->Customer->create();
    $this->Customer->save($customer);
    $customer['Customer']['id'] = $this->Customer->id;
    $this->set('customer', $customer);
    $this->set('_serialize', 'customer');
  }
}

まず、Backbone.jsはデータをJSON形式でPOSTしています。通常のFORMからのPOSTならば$this->params[‘form’]でパラメータを取得できますが、JSONの場合$this->[‘data’]を使う必要があります。CakePHPのモデルを用いたデータベースの永続化は、今まで通りです。最後に、登録された内容をJSON形式でクライアントに返しています。JsonViewは”_serialize”という名前で配列(array)を設定すると、それをJSONとして出力します。
実際にaddアクションのHTTPレスポンスは以下のような内容となります。

HTTP/1.1 200 OK
Server: Apache/2.2.21 (Win32) mod_ssl/2.2.21 OpenSSL/1.0.0e PHP/5.3.8 mod_perl/2.0.4 Perl/v5.10.1
X-Powered-By: PHP/5.3.8
Content-Length: 46
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: application/json

{"Customer":{"name":"test","address":"tokyo"}}

9.2 Customerの一覧の取得(indexアクション)

次に、Customerの一覧を取得するindexアクションを追加します。CustomersControllerに以下のようにindexアクションを追加します。

class CustomersController extends AppController {
  public $name = 'Customers';
    function index() {
      $customers = $this->Customer->find('all');
      $this->set('customers', $customers);
      $this->set('_serialize', 'customers');
  }
}

こちらは、非常にシンプルです。find(‘all’)でCustomerの一覧を取得し、それを’_serialize’に設定しています。
Backbone.js側は以下のようになります。

$(function() {
  $('#list-button').click(function(e){
    var customers = new Customers;
    customers.fetch({
      success : function(customers, response) {
        var tr = $('#list-table>tbody>tr');
        if(tr.length > 0) {
          tr.remove();
        }
        var tbody = $('#list-table>tbody');
        var i;
        for(i = 0; i < customers.length; ++i) {
          var customer = customers.at(i);
          tbody.append('<tr><td>' + customer.get('id') +
              '</td><td>' + customer.get('name') +
              '</td><td>' + customer.get('address') +
              '</td></tr>');
        }
      },
      error : function(customers, response) {
        alert('error: ' + response);
      }
    });
  });
});

table要素に結果を追加しているところまで示しているのでちょっと長いですが、その部分を削ると、実質Backbone.jsで行っているのは以下の処理だけです。

$(function() {
  $('#list-button').click(function(e){
    var customers = new Customers;
    customers.fetch({
      success : function(customers, response) {
        // 取得に成功した場合の処理
      },
      error : function(customers, response) {
        // エラーが発生した場合の処理
      }
    });
  });
});

まず、”new Customers”でCustomersコレクションのインスタンスを生成します。
次に、fetch()関数を呼び出して、サーバに一覧取得のリクエストを送ります。処理は非同期で行われるので、コールバック関数としてsuccessとerrorを指定します。successの第一引数に取得できたコレクションのインスタンスが渡されるので、そこからモデルのインスタンスを取得し、表示処理を行います。

9.3 指定したIDのCustomerの取得(viewアクション)

既存のCustomerを取得するviewアクションの場合、Backbone.jsは”/cakephp_service/customers/(id)”というパスでサーバにアクセスしてきます。そして、CakePHPは最後のidをviewアクションの引数に自動的に渡してくれます。ですので、viewアクション内では渡されたidでデータベースを検索し、取得されたCustomerをJSON形式で返すようにします。

class CustomersController extends AppController {
  public $name = 'Customers';
  function view($id) {
    $customer = $this->Customer->find('first', array(
        'conditions' => array('Customer.id' => $id)
    ));
    $this->set('customer', $customer);
    $this->set('_serialize', 'customer');
  }
}

Backbone.jsでは、idだけを指定したCustomerのインスタンスを作成して、fetch()を呼び出します。

$(function() {
  $('#update-read_button').click(function(e){
    var customer = new Customer({
      id : $('#update-read_id').val()
    });
    customer.fetch({
      success : function(customer, response) {
        $('#update-name').val(customer.get('name'));
        $('#update-address').val(customer.get('address'));
      },
      error : function(customers, response) {
        alert('error: ' + response);
      }
    });
  });
});

実際に送られたHTTPリクエストです。

GET /cakephp_service/customers/4f6f3d11-27d8-4a52-b68d-1b7c4e257404 HTTP/1.1
Host: 127.0.0.1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/20100101 Firefox/11.0
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
X-Requested-With: XMLHttpRequest
Referer: http://localhost/backbone_client/

HTTPレスポンスです。

HTTP/1.1 200 OK
Server: Apache/2.2.21 (Win32) mod_ssl/2.2.21 OpenSSL/1.0.0e PHP/5.3.8 mod_perl/2.0.4 Perl/v5.10.1
X-Powered-By: PHP/5.3.8
Content-Length: 155
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: application/json

{"Customer":{"id":"4f6f3d11-27d8-4a52-b68d-1b7c4e257404","name":"test","address":"tokyo","created":"2012-01-01 00:00:00","modified":"2012-01-01 00:00:00"}}

なぜCustomerモデルのparseメソッドをわざわざ定義したのかの理由がこのレスポンスにあります。レスポンスを見るとCustomerの中に属性が含まれています。このため、パースされたJSONは、”response.Customer”という形式になります。Backbone.jsは、デフォルトではresponse = Customerを期待しているので、以下のようにparseの処理を変更する必要があったのです。

parse : function(response) {
  if (response.Customer != undefined) {
    return response.Customer;
  }
  return response;
}

最後に

更新と削除の説明は省略しますので、直接、ソースコードを見てください。

開発をする際の注意として、CakePHPとBackbone.jsは同じドメインに置かなければなりません。JavaScriptはクロスドメインのリクエストが基本的に送れないので、当然といえば当然なのですが、つい、普通のWebサービスのつもりで手元でBackbone.jsのWebアプリを起動すると、CakePHPのサービスにアクセスできなくなります。(この場合OPTIONSというHTTPメソッドでリクエストが送られます)

まだまだ情報がない分野だけに、ここまでたどり着くのは結構苦労させられました。でも、作成してみた後にソースを眺めてみると、すっきりしていて、JavaScriptを中心としたアプリを作るならば、Backbone.jsやSpine.jsなどを使うことをおすすめします。