Inside Tripclip

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

Tripclipͬͯͳʹʁ

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

ࣗݾ঺հ • ॴଐ • 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

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

Ξοϓϩʔυ • ﬁle-uploader • https://github.com/valums/ﬁle-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 <body data-controller="<%= controller.controller_name %>" data- action="<%= controller.action_name %>">
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

ϛαϫ

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

Inside Tripclip

Inside Tripclip

danny

More Decks by danny

Other Decks in Programming

Featured

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ΞʔΩςΫ νϟʹ͍ۙߏ଄ʹ • Ұ؏ੑͷ͋ΔΫϥεͷߏ଄ • ιʔείʔυ͕ಡΈ΍͘͢ͳͬͨ