Inside Tripclip

1.

danny 2013 1/13 ౦ژRubyձٞ10 Inside Tripclip גࣜձࣾΫϨΠ

2.

Tripclipͬͯͳʹʁ

3.

http://tripclip.jp • ཱྀߦ΍ࢄาͰࡱͬͨεφοϓࣸਅΛख ܰʹΞϧόϜԽ͢ΔࣗࣾWebαʔϏε • ࣸਅΛϒϥ΢βʹυϥοάΞϯυυϩ οϓ͢Δ͚ͩͰ͖Ε͍ͳΞϧόϜ͕ग़ དྷ্͕Δ • 2012೥10݄
ϦϦʔε

4.

None

5.

ࣗݾ঺հ • ॴଐ • KRAY • Twitter • @f96q •
Blog • http://f96q.github.com/

6.

KRAYʹ͍ͭͯ

7.

ࠓ೔࿩͢ࣄ • σʔλʔߏ଄ • ը૾Ξοϓϩʔυ • ΫϥΠΞϯταΠυϧʔςΟϯά • Coffee Script
• ։ൃମ੍ • ·ͱΊ

8.

ݴޠ • όοΫΤϯυ • Ruby 1.9.3 • ϑϩϯτΤϯυ • Coffee
Script

9.

ߏ੒ • Rails 3.2.9 • Mongo DB • Nginx •
Unicorn • Amazon EC2 • Amazon S3

10.

࣮૷ • ϖʔδભҠ͠ͳ͍ͰɺಈతʹΞϧόϜ Λฤू͢ΔͨΊʹ • ΫϥΠΞϯταΠυMVCʹ͍ۙߏ଄ • όοΫΤϯυͱ͸APIͰ࿈ܞ

11.

AlbumView GroupView SectionView TextView PhotoFrameView

12.

Coffe Script Class AlbumView GroupView SectionView PhotoFrameView View Class Model
Class Event AlbumViewDom GroupViewDom SectionViewDom PhotoFrameView Dom TextView TextViewDom Group Section Text Image Album

13.

Coffe Script Class AlbumView GroupView SectionView PhotoFrameView View Class Model
Class Event AlbumViewDom GroupViewDom SectionViewDom PhotoFrameView Dom TextView TextViewDom Group Section Text Image Album

14.

Coffee Model app = @app class app.Image constructor: (params) ->
@[key] = params[key] for key of params update: (params, callback) -> @swap: (params, callback) -> destroy: (callback) ->

15.

Coffe Script Class Model Class Ruby Class Model Class /api/album
/api/group /api/section /api/image Album Group Section Text Image Album Group Section Image Text /api/text

16.

{ "_id" : "50ab69686e9552ef66000001", "title" : null, "user_id" : "50a48a6a6e95521901000001",
"groups": [ { "_id" : "50ab69686e9552ef66000002", "layout" : "default", "sections" : [ { "_id" : "50ab69686e9552ef66000003", "images" : [ { "_id" : "50d2581e6e95529e3500000a", "caption" : "", "height" : 1936, "width" : 2592, "top" : 0, "left" : 0, "longitude" : 139.57016666666667, "latitude" : 35.696333333333335 } ], "texts": [ { "_id" : "50ab69686e9552ef66000004", "body" : "" }, { "_id" : "50ab69686e9552ef66000005", "body" : "" } ] } ] } ] } BSON Album Group Section Text Image

17.

Ξοϓϩʔυ • ﬁle-uploader • https://github.com/valums/ﬁle-uploader • ෳ਺ຕը૾Ξοϓϩʔυ࣌ʹ͕ۭؒͷ ৔߹ʹͦ͜ʹ഑ஔ͢ΔͷΛ࣮ݱ͢Δͷ ͕೉͔ͬͨ͠ɻ •
jQuery File Upload • https://github.com/blueimp/jQuery-File- Upload

18.

Ξοϓϩʔυ • Amazon S3ʹΞοϓϩʔυ • HttpImageFilterModule • NginxͷϞδϡʔϧ • ը૾ͷαΠζม׵
• RailsଆͰ࣮૷͠ͳͯ͘ࡁΉ

19.

ϧʔςΟϯά $ -> app.album = new app.Album() if $('#my-album').size() >
0 album_url = $('#album-status').data('path') $('#album-title').editInPlace url: album_url method: 'PUT' params: 'type=inplace_title' default_text: app.I18n.album.placeholder show_buttons: true save_button: app.inplace_save_button cancel_button: app.inplace_cancel_button $ -> uploader = $('#uploader') if uploader[0] app.create_uploader() albums.js.coffee images.js.coffee • Asset PipelineͰશ෦ͷjsɺcss͕ಡΈࠐ·ΕΔ • ϑΝΠϧ͝ͱʹwindow.onloadͯ͠͠·͏ͱ࣮ߦ ॱং͕௥͍ʹ͍͘

20.

Data Attributes <body data-controller="<%= controller.controller_name %>" data- action="<%= controller.action_name %>">
app/view/application.html.erb

21.

routes app = @app route = (params) -> if $('body').data('controller')
is params.controller and $('body').data('action') is params.action then true else false $ -> app.Options.load() if route(controller: 'albums', action: 'show') new app.OthersAlbumView else if route(controller: 'albums', action: 'edit') new app.AlbumView new app.SiteView if route(controller: 'site', action: 'index') new app.ContactView

22.

Scope (function() { var Image; Image = (function() { function
Image() {} return Image; })(); }).call(this); class Image Coffee Script JavaScript

23.

application.js this.app = {};

24.

Scope (function() { this.app.Image = (function() { function Image() {}
return Image; })(); }).call(this); Coffee Script JavaScript class @app.Image

25.

։ൃମ੍ • ࠷ॳ • GithubΫϩʔϯ(Gitorious) • ਵ࣌masterʹίϛοτ • ໰୊఺ •
ιʔείʔυ͕ܧ͗઀͗ʹͳΔ • ։ൃऀಉ࢜ͷٞ࿦͠ʹ͍͘

26.

ίʔυϨϏϡʔ • GitHub • ػೳΛ࣮૷͢Δͷʹϒϥϯν੾ͬͯɺ ࣮૷͠ऴΘͬͨΒpull request • ίϝϯτͰ࣮૷ͨ͠ਓमਖ਼ •
ϨϏϡʔͨ͠ਓ͕ίϛοτΛࡌ͚ͬΔ ৔߹΋͋Δ • ͦͷػೳΛ࣮૷ͨ͠Ҏ֎ͷਓ͕merge

27.

None

28.

ϛαϫ

29.

·ͱΊ • ಈతʹΞϧόϜฤू͢ΔͨΊʹ • ΫϥΠΞϯτଆʹ΋MVCΞʔΩςΫ νϟʹ͍ۙߏ଄ʹ • Ұ؏ੑͷ͋ΔΫϥεͷߏ଄ • ιʔείʔυ͕ಡΈ΍͘͢ͳͬͨ
• ֦ு͠΍͘͢ͳͬͨ

Inside Tripclip

Inside Tripclip

danny

Want more?

Transcript

danny 2013 1/13 ౦ژRubyձٞ10 Inside Tripclip גࣜձࣾΫϨΠ

Tripclipͬͯͳʹʁ

http://tripclip.jp • ཱྀߦ΍ࢄาͰࡱͬͨεφοϓࣸਅΛख ܰʹΞϧόϜԽ͢ΔࣗࣾWebαʔϏε • ࣸਅΛϒϥ΢βʹυϥοάΞϯυυϩ οϓ͢Δ͚ͩͰ͖Ε͍ͳΞϧόϜ͕ग़ དྷ্͕Δ • 2012೥10݄

ࣗݾ঺հ • ॴଐ • KRAY • Twitter • @f96q •

KRAYʹ͍ͭͯ

ࠓ೔࿩͢ࣄ • σʔλʔߏ଄ • ը૾Ξοϓϩʔυ • ΫϥΠΞϯταΠυϧʔςΟϯά • Coffee Script

ݴޠ • όοΫΤϯυ • Ruby 1.9.3 • ϑϩϯτΤϯυ • Coffee

ߏ੒ • Rails 3.2.9 • Mongo DB • Nginx •

࣮૷ • ϖʔδભҠ͠ͳ͍ͰɺಈతʹΞϧόϜ Λฤू͢ΔͨΊʹ • ΫϥΠΞϯταΠυMVCʹ͍ۙߏ଄ • όοΫΤϯυͱ͸APIͰ࿈ܞ

AlbumView GroupView SectionView TextView PhotoFrameView

Coffe Script Class AlbumView GroupView SectionView PhotoFrameView View Class Model

Coffe Script Class AlbumView GroupView SectionView PhotoFrameView View Class Model

Coffee Model app = @app class app.Image constructor: (params) ->

Coffe Script Class Model Class Ruby Class Model Class /api/album

{ "_id" : "50ab69686e9552ef66000001", "title" : null, "user_id" : "50a48a6a6e95521901000001",

Ξοϓϩʔυ • ﬁle-uploader • https://github.com/valums/ﬁle-uploader • ෳ਺ຕը૾Ξοϓϩʔυ࣌ʹ͕ۭؒͷ ৔߹ʹͦ͜ʹ഑ஔ͢ΔͷΛ࣮ݱ͢Δͷ ͕೉͔ͬͨ͠ɻ •

Ξοϓϩʔυ • Amazon S3ʹΞοϓϩʔυ • HttpImageFilterModule • NginxͷϞδϡʔϧ • ը૾ͷαΠζม׵

ϧʔςΟϯά $ -> app.album = new app.Album() if $('#my-album').size() >

Data Attributes <body data-controller="<%= controller.controller_name %>" data- action="<%= controller.action_name %>">

routes app = @app route = (params) -> if $('body').data('controller')

Scope (function() { var Image; Image = (function() { function

application.js this.app = {};

Scope (function() { this.app.Image = (function() { function Image() {}

։ൃମ੍ • ࠷ॳ • GithubΫϩʔϯ(Gitorious) • ਵ࣌masterʹίϛοτ • ໰୊఺ •

ίʔυϨϏϡʔ • GitHub • ػೳΛ࣮૷͢Δͷʹϒϥϯν੾ͬͯɺ ࣮૷͠ऴΘͬͨΒpull request • ίϝϯτͰ࣮૷ͨ͠ਓमਖ਼ •

ϛαϫ

·ͱΊ • ಈతʹΞϧόϜฤू͢ΔͨΊʹ • ΫϥΠΞϯτଆʹ΋MVCΞʔΩςΫ νϟʹ͍ۙߏ଄ʹ • Ұ؏ੑͷ͋ΔΫϥεͷߏ଄ • ιʔείʔυ͕ಡΈ΍͘͢ͳͬͨ