Inside Tripclip

C3191b3ed166724aa0ea3ed9d2784772?s=47 danny
January 13, 2013
Programming
2
1.1k

Inside Tripclip

C3191b3ed166724aa0ea3ed9d2784772?s=128

danny

January 13, 2013
Tweet

More Decks by danny

See All by danny
C3191b3ed166724aa0ea3ed9d2784772?s=48 f96q
1
110
C3191b3ed166724aa0ea3ed9d2784772?s=48 f96q
0
480
C3191b3ed166724aa0ea3ed9d2784772?s=48 f96q
1
2.1k
C3191b3ed166724aa0ea3ed9d2784772?s=48 f96q
0
480
C3191b3ed166724aa0ea3ed9d2784772?s=48 f96q
1
1.4k
C3191b3ed166724aa0ea3ed9d2784772?s=48 f96q
2
610

Other Decks in Programming

See All in Programming
Fd3442482c4a9b2d2353448a6e379823?s=48 matsu_chara
2
330
0d04162c7a3c2907c059a06dbcd23cf4?s=48 tokorom
6
210
E387c487b4fea568909cf805f91afe92?s=48 yuta24
4
240
433ce798352c6d5ad363b3b585cb015d?s=48 rizumi
4
330
917c89046a8ba98f398ea16b7b335779?s=48 nomadblacky
1
160
4ce43cd2535d0afe50065a743af646e9?s=48 dianaarnos
0
270
19d7ae634445d4bd9b10c7961a462260?s=48 shu223
9
1.3k
Bfb93c5dc0fde76ddac605bba0e1b642?s=48 sucitw
0
130
3e049ed33195d00a8b745b16c63dce6e?s=48 leew
0
140
35761e3936deba2f8189c2d20982c771?s=48 getify
1
420
6afbe110d33ef7e859fb8649b86bae55?s=48 mashabow
0
540
249b3122eee454c0a818bfe7851418e4?s=48 fromkk
6
410

Featured

See All Featured
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
3.9k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
356
62k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
315
18k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
366
42k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.4k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
360k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
164
18k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
28
3.1k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
13
710
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
37
2.2k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
49
3.2k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
8
1k

Transcript

  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. Ξοϓϩʔυ • file-uploader • https://github.com/valums/file-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ΞʔΩςΫ νϟʹ͍ۙߏ଄ʹ • Ұ؏ੑͷ͋ΔΫϥεͷߏ଄ • ιʔείʔυ͕ಡΈ΍͘͢ͳͬͨ

    • ֦ு͠΍͘͢ͳͬͨ