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

Tripclipͬͯͳʹʁ 

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

No content

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

KRAYʹ͍ͭͯ 

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

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

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

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

AlbumView GroupView SectionView TextView PhotoFrameView 

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

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

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

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 

{ "_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 

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

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

ϧʔςΟϯά $ -> 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ͯ͠͠·͏ͱ࣮ߦ ॱং͕௥͍ʹ͍͘ 

Data Attributes app/view/application.html.erb 

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 

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

application.js this.app = {}; 

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

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

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

No content

ϛαϫ 

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