Inside Tripclip

C3191b3ed166724aa0ea3ed9d2784772?s=47 danny
January 13, 2013

Inside Tripclip

C3191b3ed166724aa0ea3ed9d2784772?s=128

danny

January 13, 2013
Tweet

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

    • ֦ு͠΍͘͢ͳͬͨ