{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/how-to-work-backbone-with-rails/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"c238cbe3-b2f1-52c2-b5d1-2651dfbee2ec","excerpt":"Ruby on RailsはシンプルなAPIだけ構えておいて、 Backbone.jsをAPIクライアントとして連携させる際に Railsでコントローラをscaffold…","html":"

Ruby on RailsはシンプルなAPIだけ構えておいて、
\nBackbone.jsをAPIクライアントとして連携させる際に

\n

Railsでコントローラをscaffoldしただけでは上手く動かなかったため、
\n対処したことをメモしておきます。

\n\n

各ライブラリのバージョン

\n

使用している言語やライブラリのバージョンは以下のようになっています。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
項目バージョン
Backbone.js1.1.0
jQuery2.1.0
Ruby1.9.3
Ruby on Rails3.2.8
\n

Backbone側をあまりゴリゴリといじらず、
\n設定だけ書いておけばAjax出来る状態にしたいので、Rails側を調整していきます。

\n

APIにアクセスする際に拡張子を省略

\n

Backbone.Syncのデフォルトだと、
\nAjaxの叩き先がGET /[name]sとなったりPOST /[name]s等になっており、
\nscaffoldしたままのRailsのコントローラでは、拡張子を指定しないとレスポンスが返って来ません。

\n

どちらかを修正すれば済むので、今回はRails側を修正します。

\n

まず、Web APIが返すレスポンスのフォーマットは、
\nrespond_doブロックの中に入っているformat.*という指定で決まります。

\n

format.*がアクセスする際の拡張子、
\nrender *がレスポンスとして返されるフォーマットです。

\n

scaffoldされたコードは、こんな感じになっていると思います。

\n
class TasksController < ApplicationController\n  def index\n    @tasks = Task.all\n\n    respond_to do |format|\n      format.html # index.html.erb\n      format.json { render json: @tasks }\n    end\n  end  \n  # ...\nend
\n

この指定だと、URLに.htmlと.jsonの拡張子をつけると、 それぞれそのフォーマットで返してくれるようになっています。

\n

ただし、それ意外の拡張子（指定なしを含む）を指定した場合、何も返って来ません。

\n

ということで、全ての拡張子にマッチする指定してあげれば、うまくいきます。

\n

RailsのWeb APIのデフォルトフォーマットを指定する

\n
\n

respond_to でデフォルトフォーマットを指定する - The Second Longest Day in My Life…
\nhttp://d.hatena.ne.jp/tnksaigon/20110124/1295839007

\n
\n

こちらの記事によると、respond_doの中に、format.anyという指定ができるそうです。

\n

anyを指定すると、any以前に書いてあるフォーマット(.html, .json)にマッチしない全てのフォーマットに適用されます。
\nつまり、拡張子を省略した場合はこのanyで返されるフォーマットが適用されることになります。

\n

先ほどのコードにanyでjsonを返すコードを追加するとこうなります。

\n
class TasksController < ApplicationController\n  def index\n    @tasks = Task.all\n\n    respond_to do |format|\n      format.html # index.html.erb\n      format.json { render json: @tasks }\n      format.any { render json: @tasks }\n    end\n  end  \n  # ...\nend
\n

これで、/hoge/1のような拡張子の無いURLでjsonを取得できるようになりました。

\n

レスポンスの日付文字列をDateオブジェクトに変換する

\n

created_atやupdated_at、その他日付時間をDateオブジェクトとして受けとりたいときの対処法です。

\n

DATETIME型を表すJSON文字列は、
\nレスポンスとしてはStringで帰って来てしまうので、Backboneは文字列として解釈してしまいます。

\n

比較や計算をするためDateオブジェクトに変換したい場合には、
\nBackbone.Model.prototype.parseでパースしてあげます。

\n
var Task = Backbone.Model.extend({\n    urlRoot: '/tasks',\n\n    parse: function(res) {\n        if(_.isString(res.created_at)) {\n            res.created_at = new Date(res.created_at);\n        }\n        if(_.isString(res.updated_at)) {\n            res.updated_at = new Date(res.updated_at);\n        }\n        return res;\n    }\n});
\n

送信時は、明示的に文字列に再変換しなくとも文字列化して送信してくれます。

","timeToRead":4,"frontmatter":{"title":"Backbone.jsとRuby on Railsを連携させる際のメモ","tags":["Backbone.js","JavaScript","Ruby","Ruby on Rails"],"date":"December 10, 2013","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='135'%20viewBox='0%200%20400%20135'%20preserveAspectRatio='none'%3e%3cpath%20d='M20%2047c0%2031%200%2033%202%2032a1464%201464%200%200025-14l14%208%2014%207a736%20736%200%2000-1-66l-5%203a849%20849%200%2001-19%2011c-2%201-3%200-8-3l-14-8-8-4v34m156-26v10c5%204%2012-3%209-8-2-3-7-4-9-2M40%2043l-6%204%207%203%206%204%207-3%206-4-13-8-7%204m283%202c-5%202-5%205-5%2043l1%2034h56l3-2%202-3V44h-27l-30%201m35%204c1%203-5%204-8%202-1-2-2-2-4-1s-2%201%200%202c2%202%202%202-2%207-8%208-14%2025-14%2036v5h13c11%200%2012%200%2011-2-5-11-4-28%202-35l3-4%204%202c4%201%205%202%208%2010l3%2010%201-4c1-5-1-13-2-10v-1c0-2%200-3-2-4l-2-2h2l2-1h2l2-1c-1-2-10-7-13-7l-2-1-2-2c-2-1-2-1-2%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.9557522123893807,"src":"/static/690d77531b9decbfc9e430513bf42c66/741c1/featured-image.jpg","srcSet":"/static/690d77531b9decbfc9e430513bf42c66/466a3/featured-image.jpg 334w,\n/static/690d77531b9decbfc9e430513bf42c66/741c1/featured-image.jpg 604w","srcWebp":"/static/690d77531b9decbfc9e430513bf42c66/e33b9/featured-image.webp","srcSetWebp":"/static/690d77531b9decbfc9e430513bf42c66/cd98f/featured-image.webp 334w,\n/static/690d77531b9decbfc9e430513bf42c66/e33b9/featured-image.webp 604w","sizes":"(max-width: 604px) 100vw, 604px"}}}}}},"pageContext":{"slug":"/how-to-work-backbone-with-rails/","previous":{"fields":{"slug":"/codeiq-fizzbuzz-dungeon/"},"frontmatter":{"title":"CodeIQのFizzBuzzダンジョンLV1~4を解いた","tags":["fizzbuzz","JavaScript"]}},"next":{"fields":{"slug":"/improve-coding-speed-with-mou/"},"frontmatter":{"title":"Mouのショートカットを覚えて爆速コーディング","tags":["Markdown","Mou"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}