APIを作って、Backbone.jsのデータの永続化をサーバサイドで行う方法をメモしておきます。Rails等でも簡単に作成することができますので、各々好きなものを選択してください。ここでは、CakePHPを使った例を示します。ここで制作したアプリケーションは、以下よりダウンロードできます。それぞれ執筆時点での最新バージョンを用いました。目的を単純化するため、Backbone.jsのアプリケーションは、自作せずに、パッケージされているToDoアプリを利用します。サンプルアプリケーションでは、localStorageを利用してデータの永続化を行っていますが、これを変更して、サーバサイドでデータの永続化を行うようにします。CakePHPで、Backboneアプリケーションを出力する等も、ここでは行いません。APIを構築することのみに利用します。ToDosBackbone.jsの経験が浅い方は、以下に勉強のロードマップを提案しておりますので、参考にしてみてください。以下の通りにファイルを配置しました。http://localhost/cakephp/todosでアクセスできるものとします。APIを簡単に作ることができます。その方法は、Cookbookにも示されています。documentationそれでは早速見ていきましょう。スキーマスキーマは以下の通りです。テーブル1つのシンプルな構成です。CHARSET=utf8;ルーターapp/Config/routes.phpに以下を追記します。routesをオーバーライドする他の設定より前に呼び出す必要があるため、先頭に記述するのが良いでしょう。Router::parseExtensions('json');2526Router::mapResources('todos');Router::parseExtensions('json');Router::mapResources('todos');を設定することで、以下の表のように、HTTPリクエストメソッドとリクエストURLの組み合わせによってコントローラアクションが呼ばれるようになります。POSTであった場合は、Todoコントローラのaddアクションが呼ばれるといった具合です。これらのルーティングは変更可能ですが、ここでは割愛します。documentationを参照してください。Router::parseExtensions('json');を設定することで、JSONフォーマットのリクエスト&レスポンスを適切に処理してくれるようになります。model等としたもので構いません。バリデーション等は、必要に応じて行ってください。array('boolean'),),),);}コントローラコントローラアクションを実装します。以下では、Cookbookのサンプルをベースに、シンプルな処理しか行っておりませんので、必要に応じて追加してください。array('message')));}}9行目。RequestHandlerComponentを有効にしています。$this->request->dataの配列に割り当ててくれる機能等を有効利用しています。application/jsonであった場合は、JSONをレスポンスしてくれるようになります。詳しくは以下のCookbookを参照してください。_serializeキーを指定して、データをシリアライズしています。これにより、JSONでレスポンスが行われます。NOW());indexアクションでは、以下のようなJSONを返します。23:18:09"}}]}ビューRequestHandlerComponentによって、ビューファイルの定義を省略できるため、ビューファイルは作っていません。レスポンスデータを加工したい場合は、ビューファイルを使うようにしましょう。以下のCookbookに詳しいです。以下に、ビューファイルを使ったレスポンスデータ加工の例を示します。_serializeキーの指定を削除します。modifiedフィールドを削除しています。(Cookbookに倣って例を示しています。セレクトのときにフィールドを指定すればいいやんって言うツッコミはなしで。APIの構築について見てきました。現実的に使えるものとする為に、いくつか処理を加えましょう。APIから返されたJSONは、MySQL上の型がintegerのものもstringになっています。order)これは、あまりイケてない状態です。以下は今回使っているToDoアプリ内で行われている処理ですが、型が違うことによって結果が変わってしまいます。文字列結合になってしまう!JavaScriptアプリケーション側で正すのも一つの方法ですが、API側で正しておいた方が、より良いでしょうから、修正してみましょう。初めはCakePHPでJSON出力するときに起こっていることかと思いましたが、これはPHPでMySQLからセレクトしたときに起きる現象だということがわかりました。調べている経過をtweetしていたら、@cakephperさんから助け舟があり、その後、調べていくうちに、対処法がわかりました。falseに設定しましょう。tinyint(1)がbooleanになるのは、CakePHPの仕様です。CakePHPでのやり方は、いくつかありますが、例えば、コントローラアクションで以下のように設定します。array('todos')));}これらに関しては、@cakephperさんが、ブログにまとめてくれているので、詳しくはそちらを参照してください。MongoDB)また、関連ツイートを@zuborawkaさんがまとめてくれていますので、あわせて参照してもらえると経緯が分かりやすいと思います。以下の記事にある通り、JSONを返すAPIを構築する際、いくつか対応しておくべき事柄があります。記事から対策の要点を引用します。beforeFilterを追加し、以下の対策を施しました。BadRequestException('Ajax以外でのアクセスは許可されていません。BadRequestException('Ajax以外でのアクセスは許可されていません。'nosniff');}あわせて、ビューファイルを追加し、JSON生成時のエスケープ対象を追加しました。JSON_HEX_AMP);探してみましたが、コンポーネント等で指定する方法は分かりませんでした。RequestHandlerComponentが行ってくれます。CakePHP側の設定は以上です。ToDoアプリを修正するデータの永続化をサーバサイドで行うための修正をします。コレクションまずはコレクションです。'order'});7行目。localStorageは、利用しないので、コメントアウトするか削除しておきましょう。urlは、fetchメソッドでの通信先となるURLを設定します。CakePHPで作ったAPIを指定しましょう。拡張子を含める必要はありません。parseを定義し、受け取ったJSONを加工します。[{"id":1,"title":"foo"},{"id":2,"title":"bar"}]という形でデータを受け取ることを期待しています。APIが返すJSONの例として見た通り、そのようにはなっていませんので、ここでフォーマットしています。[{...},{...}...]}と言った形式で返されることは、よくあることなので、覚えておきましょう。モデル続いて、モデルを修正します。urlメソッドの内部で利用されます。更新・削除等で、idが設定されているモデルのURLは、”[urlRoot]/id”となります。parseを定義し、受け取ったJSONを加工します。{"id":1,"title":"foo"}という形でデータを受け取ることを期待しています。ToDoの登録や更新・削除等を行って、データが更新されていることを確認してみてください。注意点として、サンプルのToDoアプリでは、サーバサイドでの実行結果に関わらず、DOMを更新しているということが挙げられます。アプリケーションの性質によっては、レスポンスを受けてDOMを更新するように変更する等の対処が必要でしょう。今回は、APIの更新系のレスポンスについては、簡易的な実装しか行っておりませんので、作り込みが必要です。その際、エラーであった場合は、ステータスコードも指定しておいた方が丁寧でしょう。CakePHPとBackboneを密に絡ませた開発については、以下の記事が参考になると思います。be-hase.com以上です。