RESTful APIとしてのRailsとクライアントとしてのJavaScript
Upcoming SlideShare
Loading in...5
×
 

RESTful APIとしてのRailsとクライアントとしてのJavaScript

on

  • 2,234 views

RailsにおけるRESTfulなURL設計勉強会 千駄ヶ谷.rb #12 #sendagayarb...

RailsにおけるRESTfulなURL設計勉強会 千駄ヶ谷.rb #12 #sendagayarb
http://www.zusaar.com/event/324057

の資料。qiita版は
http://qiita.com/private/df25ae6134adb8f45f9a

Statistics

Views

Total Views
2,234
Views on SlideShare
2,230
Embed Views
4

Actions

Likes
4
Downloads
14
Comments
0

3 Embeds 4

http://163.43.164.133 2
https://twimg0-a.akamaihd.net 1
https://kcw.kddi.ne.jp 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

RESTful APIとしてのRailsとクライアントとしてのJavaScript RESTful APIとしてのRailsとクライアントとしてのJavaScript Presentation Transcript

  • RESTful APIとしてのRailsとクライアントとしてのJavaScriptsednagaya.rb / ppworks
  • 自己紹介✤ @ppworks✤ Ruby On Rails, Backbone.js, Objective-C✤ sendagaya.rb
  • よくあるAjaxを利用したページの例✤ Sedndagaya.rbというグループへ投稿出来るサイトがあ るとします。✤ この時、グループのページにアクセスすると、グループ の詳細情報と、グループへ投稿された記事が表示されま す。 View slide
  • どんなことが行われているのか✤ 通常のリクエストに対するレスポンスの描写✤ 非同期のリクエストに対するレスポンスの描写✤ DOM要素のイベントに対するレスポンスの描写 View slide
  • 通常のリクエストに対するレスポンスの描写
  • 通常のリクエストに対するレスポンスの描写✤ エンドユーザーがあるURIをブラウザ経由でアクセスす る。 たとえば、 http://example.com/groups/1 にHTTP GETリクエストを送信してアクセスする。✤ Webサーバー(アプリケーション・サーバー)が対応する HTMLを返す。この例の場合、 /groups/1 に対応するリ ソースを返す。✤ ブラウザがHTMLをレンダリングする。
  • 通常のリクエストに対するレスポンスの描写
  • 非同期のリクエストに対するレスポンスの描写
  • 非同期のリクエストに対するレスポンスの描写✤ パスが /groups/1 の場合、特定の JavaScript が実行され るようにしておく。✤ その JavaScript が /groups/1 に関連するリソースを非同 期のHTTP GETリクエストを送信し、その結果をHTML 内の特定のDOM要素へ差し込む。
  • 非同期のリクエストに対するレスポンスの描写
  • 非同期のリクエストに対するレスポンスの描写
  • DOM要素のイベントに対するレスポンスの描写
  • DOM要素のイベントに対するレスポンスの描写✤ UIにイベントを付与する。
  • DOM要素のイベントに対するレスポンスの描写✤ ボタンをクリックすると投稿フォームを表示する。
  • どんなHTTPリクエストを送信したか✤ GET /groups/1✤ GET /groups/1/posts✤ GET /groups/1/posts/new
  • POSTリクエストも考えてみる✤ /group/1/posts へ 非同期のHTTTP POSTリクエスト
  • POSTリクエストも考えてみる✤ リクエスト後、複数の処理を javascript で実行
  • 必要なHTTPメソッドと対応するURIを洗い出す✤ GET http://example.com/groups/1✤ GET http://example.com/groups/1/posts✤ POST http://example.com/groups/1/post✤ GET http://example.com/groups/new✤ RESTfulの指向で考えると統一されたインターフェース から導けば良い✤ RESTfulに作るとbackbone.jsなどと連携しやすい
  • JavaScriptの重要性
  • JavaScriptの重要性✤ 通常のHTTP GETリクエストの処理と合わせた非同期処 理を行う際に JavaScript は必須✤ このJavaScript をどこにどのように書く?
  • JavaScriptの実行Routing✤ 先の例のように通常のHTTPリクエストの後に、 ✤ 非同期のHTTPリクエストを行いたい ✤ 特定のDOM要素のイベントをハンドリングしたい✤ といった要件は、通常URIごとに異なります。
  • ひとつの.jsファイルに全部書く例$(function() { // user pageで使います $(.user a.follow).click(function(e) { e.preventDefault(); // ajaxでフォロー処理をします }); // グループページで使います。 $(.group a.new_post).click(function(e) { e.preventDefault(); // グループに投稿する記事フォームを表示 }): // … とにかく続く // ウゲェ});
  • ひとつの.jsファイルに全部書く例✤ たまたま```JavaScript``` の制御に利用するclass名やid名 を追加したり削除したりすると悲惨✤ そのページに関係ある処理とそうでない処理が分かりづ らい
  • jQuery-Routerを使った例$.route( { path: //users/, func: function() { $(.user a.follow).click(function(e) { e.preventDefault(); // ajaxでフォロー処理をします }); } }, { path: //groups/, func: function() { $(.group a.new_post).click(function(e) { e.preventDefault(); });
  • *.js.erb✤ /groups/:id/posts への非同期のHTTP GETアクセス時に の JavaScript 処理を、app/views/posts.js.erb に直接書 く方法もあります。✤ この方法は、JavaScript の記述がapp/assets/javascripts/ * と app/views/*.js.erb に散らばり見通しが悪くなる
  • JavaScriptのMVCフレームワークの利用✤ spine.js✤ backbone.js ✤ model: リソース1つの操作をRESTfulに管理する ✤ collection: リソース複数の操作をRESTfulに管理する ✤ router: どのURIで何をするかを管理する ✤ view: どのDOM要素で何をするかを管理する
  • まとめ✤ このように通常のHTTPリクエストと、非同期のHTTPリ クエストの組み合わせのページを作ることが多い昨今、 RESTful APIとしてのRailsとクライアントとしての JavaScriptとの関係をどう記載するのかが重要となって きています。✤ その際、通常のHTTPリクエストと非同期HTTPリクエス トを同じ統一インターフェースであるRESTfulな設計で 管理すると一貫性が出て開発効率の向上につながる