Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rails3で作り始めたアプリケーションをちょっとずつ改善してゆく道のり

katryo
September 21, 2014

 Rails3で作り始めたアプリケーションをちょっとずつ改善してゆく道のり

#rubyhiroba の生活発表会で話した内容です

katryo

September 21, 2014
Tweet

More Decks by katryo

Other Decks in Programming

Transcript

  1. Rails3Ͱ࡞Γ࢝Ίͨ

    ΞϓϦέʔγϣϯΛ

    ͪΐͬͱͣͭվળͯ͠Ώ͘

    ಓͷΓ
    katryo

    View Slide

  2. ໨࣍
    1. ࣗݾ঺հ
    2. Denkinovelͷ঺հ
    3. DenkinovelΛ࡞Δ·ͰͷܦҢ
    4. DenkinovelͷΞοϓσʔτͷܦྺ
    5. ಘͨ஌ݟ·ͱΊ

    View Slide

  3. 1. ࣗݾ঺հ

    View Slide

  4. katryo
    • झຯͱ࢓ࣄͰWebΞϓϦέʔγϣϯ࡞ͬͯ·͢
    • ࢓ࣄͰ͸Perlॻ͍ͯ·͢(´ɾωɾ`)
    • Rubyେ޷͖ʂ Ұ൪޷͖ͳLLͰ͢ʂ
    5XJUUFSͷΞΠίϯ͸

    ࣗ࡞ϊϕϧήʔϜͷΩϟϥΫλʔ

    View Slide

  5. WebΞϓϦέʔγϣϯΛ
    ࡞ΓɺΞοϓσʔτ͠ଓ͚Δ͜ͱͰ
    ಘΒΕͨ஌ݟʹ͍ͭͯ࿩͠·͢ɻ

    View Slide

  6. 2. Denkinovelͷ঺հ

    View Slide

  7. ಈ͘খઆ౤ߘαΠτ
    Denkinovel

    View Slide

  8. Denkinovelͱ͸
    • ԻָͱഎܠͱޮՌԻͷԋग़͕ग़དྷΔখઆ౤ߘαΠτ
    • ݸਓͰ։ൃӡӦ
    • 2012೥11݄ʹӡӦ։࢝
    • ͘͞ΒVPSͰಈ͍͍ͯΔ
    • Rails4ʢݱࡏ͸ʣͰ։ൃ
    • ࡞඼౤ߘ਺500͘Β͍

    View Slide

  9. σϞ

    View Slide

  10. Denkinovelͷ͘͠Έ
    • ϊϕϧຊจ͸จࣈྻͷ··DBʹอଘ
    • αʔόଆͰຊจΛJSONʹม׵
    • ͋ͱ͸શ෦ɺJSONΛड͚औͬͨΫϥΠΞϯτ
    ଆ͕͏·͍͜ͱ΍Δ

    View Slide

  11. ΫϥΠΞϯτଆͰ࢖༻͍ͯ͠Δ
    ϥΠϒϥϦ
    • Backbone.js
    • JSʹ࢖͍΍͍͢ߏ଄Λ༩͑Δ
    • pushStateͰͷrouter΋උ͑Δ
    • ΦϒβʔόʔύλʔϯͰॻ͚ΔͷͰɺ
    DenkinovelͷΑ͏ʹɺΫϥΠΞϯτ͕ෳ਺ͷ
    ঢ়ଶΛ΋ͭΞϓϦέʔγϣϯʹ޲͍͍ͯΔ

    View Slide

  12. View Slide

  13. Ϣʔβʔͷೖྗ͢ΔςΩετ
    • ຊจͷதʹMarkdownΈ͍ͨͳλά Λॻ͖ೖΕΔ
    • [bgm happiness]ͱ͔
    • ࣮ࡍͷྫ
    • ಀ͛Δগঁͱ͋ͨ͠ͷ࿩ 1
    • http://denkinovel.com/stories/662/open

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. 1ϖʔδͣͭͷJSONʹม׵

    View Slide

  18. View Slide

  19. දࣔɾ࠶ੜ
    • JSON͔Β1ϖʔδͣͭදࣔɾ࠶ੜ͢Δ
    • ϖʔδ͕Ί͘ΒΕΔͨͼɺBGMͳͲΛ੾Γସ
    ͑Δ͔൑அ͢Δ
    • ΋͠લϖʔδͱҧ͏BGM͕ࢦఆ͞Ε͍ͯΔ
    ͳΒ੾Γସ͑Δ

    View Slide

  20. ϊϕϧ࡞੒σϞ

    View Slide

  21. 3. DenkinovelΛ࡞Δ·Ͱͷ
    ܦҢ

    View Slide

  22. Denkinovelॳظܕ
    • େֶӃͷतۀ՝୊ɿRailsΞϓϦΛ࡞Δ͜ͱ
    • jQueryͰ༡ΜͰ͍ͨ
    • εΫϩʔϧҐஔʹ͋ΘͤͯഎܠΛม͑Δίʔ
    υΛݟ͚ͭͨ

    View Slide

  23. ϒϩάͱ૊Έ߹ΘͤͨΒ
    ໘ന͍ͷͰ͸ʁ

    View Slide

  24. ౰࣌ɺ࡞͍ͬͯͨWebαΠτ
    • ࣗ࡞ϊϕϧήʔϜͷWebαΠτͰڽͬͨԋग़
    Λ͔ͨͬͨ͠
    • ༧ࠂฤΛ࡞Γ͔ͨͬͨɻ
    • JavaScriptΛ͏·͘࢖͑͹ɺWeb্Ͱ؆୯ͳ
    ԋग़͖ͭͷ༧ࠂฤ͕࡞ΕΔͷͰ͸ʁ

    View Slide

  25. Denkinovelॳظܕ׬੒

    View Slide

  26. ߨٛظؒऴྃޙ΋վྑΛଓ͚ͨ
    • େֶͷ૑࡞αʔΫϧʹDenkinovelॳظܕΛ
    ࢖ͬͯ΋ΒͬͯΠϯλϏϡʔͨ͠
    • ϒϩά෩ͷจষ഑ஔ͔Βɺ1ϖʔδ͝ͱͷ഑ஔ
    ʹมߋ

    View Slide

  27. େֶͷֶԂࡇʹ͋Θͤͯެ։

    View Slide

  28. ϒϩάʹహ຤Λॻ͍ͨΒ
    ͸ͯͳϒοΫϚʔΫ326USERS

    View Slide

  29. ͜ͷͱ͖ͷٕज़ྗ
    • DBͱ͔indexͱ͔Α͘Θ͔Βͳ͍
    • γΣϧεΫϦϓτΛ஌Βͳ͍ɻαʔόͰԿ͕
    ى͍ͬͯ͜Δͷ͔Θ͔Βͳ͍ɻ
    • ΦϒδΣΫτࢦ޲ͱ͔Θ͔Βͳ͍
    • ΍͹͔ͬͨͰ͢Ͷ……

    View Slide

  30. ಘͨ஌ݟ
    • ͱΓ͋͑ͣ࡞ͬͯ͠·͓͏
    • ਓʹݟͤΔ͜ͱ͕ՄೳʹͳΔ
    • ػೳ௥ՃɺվળͳͲ͸ɺਓʹݟͤΒΕΔΑ
    ͏ʹͳ͔ͬͯΒͰ΋ؒʹ߹͏

    View Slide

  31. 4. DenkinovelͷΞοϓσʔ
    τͷܦྺ

    View Slide

  32. View Slide

  33. ϗετઌͷมߋ

    View Slide

  34. ϗετઌҠߦͷܦҢ
    • ౰ॳ͸HerokuͰӡ༻
    • ϨϙδτϦͷϑΝΠϧαΠζ੍ݶ (300MB) Λ
    ӽ͍͑ͯͨͷͰɺҠߦͤ͟ΔΛಘͳ͔ͬͨ
    • Ձ֨ͱਓؾ͔Β͘͞ΒVPSΛબ୒
    • 2GBϓϥϯ

    View Slide

  35. ϗετઌมߋ͸͚ͬ͜͏େม
    • DBɺυϝΠϯઃఆɺσϓϩΠखॱͷཱ֬……
    • େ੾ͳ͜ͱ͸͍͍ͩͨRailsCasts͕ڭ͑ͯ͘Ε
    ͨ
    ༗ྉϓϥϯ͕௒Φεεϝɻ
    ͨͩ͠೥Ͱߋ৽ఀࢭɻ
    (P3BJMT͕ࢤΛड͚ܧ͍Ͱ͍Δʜʜʁ

    View Slide

  36. ϗετઌมߋͰ΍ͬͨ͜ͱ
    • Ubuntu12.04ʹͯ͠
    • HerokuͷpostgresʹೖͬͨσʔλΛVPSͷDBʹtaps gemͰೖΕ
    ͨΓ
    • CapistranoͰcap deployσϓϩΠͰ͖ΔΑ͏ʹͨ͠Γ
    • VagrantͰstaging؀ڥΛ࡞ͬͨΓ
    • ύεϫʔυΛ؀ڥม਺ͱͯ͠ར༻Ͱ͖ΔΑ͏ʹͨ͠Γ
    • Qiitaʹॻ͍ͨͷͰಡΜͰ͍ͩ͘͞

    http://qiita.com/katryo/items/f410916d5314dad2de96

    View Slide

  37. ϗετઌมߋͰΘ͔ͬͨ͜ͱ
    • VPSͰͷΠϯϑϥ؅ཧɺ͔ͳΓ໘౗
    • ษڧ͠ͳ͍ͱ͍͚ͳ͍͜ͱ͕ଟ͗͢Δ
    • ٯʹ͍͑͹ɺHeroku͸ͱͯ΋ָ
    • ʮΞϓϦέʔγϣϯΛ࡞ͬͯެ։͢Δʯ͚ͩ
    ͳΒHerokuΛબͿ΂͖

    View Slide

  38. Heroku, ͓͢͢Ίɻ

    View Slide

  39. ChefͰͷαʔό؅ཧ

    View Slide

  40. Infrastructure as Code
    ྲྀߦͯ͠ΔΒ͍͠͠ɺͦΖͦΖ΍Δ͔……

    View Slide

  41. Chef͸͔ͳΓΊΜͲ͍
    • Denkinovelͷαʔό͸ChefͰ؅ཧ͍ͯ͠Δ
    • ͔͠͠Chef, ֶͿࣄ߲͕ଟ͗͢Δ
    • ݸਓͰগ਺ͷVPSΛ࢖͏͚ͩͳΒɺਖ਼௚ʹ͍͏ͱ͓
    ͢͢ΊͰ͖ͳ͍
    • ࠷ۙ͸Itamaeͱ͔Ansibleͱ͔ɺखܰͳ΍͕ͭ͋Δ
    Β͍͠Ͱ͢Ͷ……ʢ࢖ͬͨ͜ͱͳ͍ʣ

    View Slide

  42. ݸਓͰͷαʔό؅ཧ͸
    ͱΓ͋͑ͣख࡞ۀͰɻ
    !
    ඞཁʹͳͬͨΒ
    Itamaeͱ͔Ansibleͱ͔࢖͓͏

    View Slide

  43. ґଘϥΠϒϥϦͷ
    Ξοϓσʔτ

    View Slide

  44. bundle updateͰۤ࿑ͨ͠΋ͷ
    • Rails 3 => 4
    • Strong parametersΛ஍ಓʹॻ͖׵͑
    • Twitter Bootstrap 2 => 3
    • HTMLλάͷΫϥεΛ஍ಓʹॻ͖׵͑
    • CSS΋஍ಓʹॻ͖׵͑

    View Slide

  45. ·ͱΊͯΞοϓσʔτ
    • Rails, Bootstrap, αʔόΛChef؅ཧʹ͢ΔɺҎ
    ্ͷ͜ͱΛಉ࣌ʹਐΊͨ
    • ׬ྃ·Ͱʹ8͔݄͔͔Γ·ͨ͠
    • ಉ࣌ਐߦɺୡ੒ײΛಘΔ·Ͱͷো֐͕େ͖͍
    • ಉ࣌ਐߦ͠ͳ͍΄͏͕͍͍Ͱ͢

    View Slide

  46. ͦ΋ͦ΋Ξοϓσʔτ͢΂͖ͳ
    ͷ͔ʁ
    • ηΩϡϦςΟͷ໰୊͕ͳ͚Ε͹͠ͳͯ͘΋େ͖ͳ໰୊͸ແ
    ͍ɻ
    • ϥΠϒϥϦͷΞοϓσʔτʹ࣌ؒΛऔΒΕΔͷ͸ຊ຤స౗
    • ͋ͱͰߟ͑ΔͱɺDenkinovelͷgemΞοϓσʔτ
    (BootstrapͳͲ) ͸ɺࣗݾຬ଍Ͱ΍͍ͬͯͨ΋ͷ͕ଟ͔ͬ
    ͨɻ
    • ͔͠͠……ɻ

    View Slide

  47. ΍ͬͺΓΞοϓσʔτ͢΂͖
    • ػೳతͳվྑΑΓ΋ɺʮ͍͔ͭݹ͍όʔδϣ
    ϯ͕੾Γ཭͞ΕΔΜ͡Όͳ͍͔ʯͱ͍͏ෆ҆
    Λͳͤ͘Δͷ͕େ͖͍
    • Rubyք۾͸ɺಛʹɺݹ͍΋ͷ͸ͲΜͲΜ੾Γ
    ࣺͯΒΕΔ
    • جຊతʹͲΜͲΜΞοϓσʔτ͢΂͖

    View Slide

  48. ؾܰʹΞοϓσʔτ͢΂͖Ͱͳ
    ͍΋ͷ
    • Twitter BootstrapͷΑ͏ʹɺΞοϓσʔτͨ͠ͱ
    ͜ΖͰՁ஋͕খ͍͞΋ͷ
    • HTMLɺCSSʹؔΘΔgem΋ɺؾܰʹΞοϓσʔτ
    ͢ΔͱඍົʹσβΠϯ͕มΘͬͨΓ͢ΔͷͰΞο
    ϓσʔτ͢΂͖Ͱͳ͍
    • HTML΍CSSʹؔΘΔgem͸ɺͦ΋ͦ΋ɺgemͱ
    ͯ͠؅ཧ͢΂͖Ͱͳ͍͔΋͠Εͳ͍ʢޙड़ʣ

    View Slide

  49. JavaScriptͱؔΘΔ
    gem

    View Slide

  50. JSؔ࿈ͷgem͸ফͦ͏
    • JS͕བྷΉgem͸࢖Θͳ͍΄͏͕͍͍
    • gem͸RubyͰ͔͠࢖͑ͳ͍ɻ͔͠͠JavaScriptϥΠϒϥϦ͸ɺ
    αʔόαΠυͰͲΜͳݴޠΛ࠾༻͠Α͏ͱɺΫϥΠΞϯτଆͰ࢖
    ͑Δ
    • JSͷ؅ཧ͸JSͷྲّྀͰ΍Δ΂͖ɻΑΓదͨ͠ΤίγεςϜ͕੔ͬ
    ͍ͯΔͷͰɻ
    • backbone-railsͱ͔ࠓ͙ࣺͯ͢Δ΂͖
    • gem͸ϝϯς͞Εͳ͘ͳΔ͔΋

    View Slide

  51. JS͸Ͳ͏؅ཧ͢Δʁ
    • bowerͱ͔Ͱ؅ཧ͠Α͏
    • Sprockets͸Rails͔ͩΒͱΓ͋͑ͣ࢖ͬͯ·͢
    • Ͱ΋ɺSprockets͕ݪҼͰෆ۩߹͕ൃੜ͢Δ͜ͱ΋
    ͋Δ
    • ΋͔ͨ͠͠ΒɺSprockets΋ࣺͯͨํ͕͍͍ͷ͔΋
    ͠Εͳ͍

    View Slide

  52. WebσβΠϯ

    View Slide

  53. ςϯϓϨʔτΤϯδϯ
    • ERB͔ΒSlimʹҠߦ
    • Πϯσϯτ͕֊૚Λҙຯ͢Δ
    • هड़ྔ͕গͳ͘ɺཧղ͠΍͍͢
    • ཁ͢ΔʹBetter Haml
    • ͪͳΈʹϊϕϧ࠶ੜը໘Ͱ͸ɺUnderscore.jsͷςϯ
    ϓϨʔτͰϖʔδ಺༰ॻ͖׵͑

    View Slide

  54. ͱΓ͋͑ͣTwitterBootstrapͰ
    • CSSϑϨʔϜϫʔΫ͸ଟ͍
    • Pure, gumby, Foundation,…
    • TwitterBootstrap͕࠷΋࢖ΘΕ͍ͯΔ
    • ʮ͋ͬɺ͜ͷαΠτBootstrap੡ͩʯ͕͋ΓಘΔ
    • Ͱ΋ɺͦΕ͕໰୊͔ʁ

    View Slide

  55. Denkinovelͷ΍Γ͔ͨ
    • ҰൠϢʔβʔ͸TwitterBootstrapͳͲ஌Βͳ͍
    • ߴ଎ʹ։ൃͰ͖Ε͹໰୊ͳ͍
    • TwitterBootstrap͸CSS, JSͷίϯϙʔωϯτͷू
    ߹ମɻଞͷCSSϑϨʔϜϫʔΫͱൺֱͯ͠େن
    ໛ɻ
    • JSͷϥΠϒϥϦΛ୳͞ͳͯ͘ࡁΉ

    View Slide

  56. WebσβΠϯͷվྑ
    • ࡞඼Λฒ΂ΔϨΠΞ΢τ
    • λΠϧܕ => Ϧετܕ
    !
    !
    • ౰࣌ɺλΠϧܕʹฒ΂ΔσβΠϯ͕ྲྀߦ͍ͬͯͨɻ
    • jQuery-masonryͱ͍͏ศརϥΠϒϥϦ͕͋ͬͨ

    View Slide

  57. ͋ΔਓʹσβΠϯΛࢦఠͯ͠΋
    Βͬͨ
    • จষϞϊ͸ԣ௕ͷ΄͏͕
    ݟ΍͍͢
    • ϊϕϧຊฤͱڞ௨ͷงғ
    ؾʹͨ͠ํ͕͍͍

    View Slide

  58. ࣾ಺ษڧձͷ୊ࡐͱͯ͠ࢦఠͯ͠΋Βͬͨ

    View Slide

  59. Before
    After

    View Slide

  60. !
    WebΤϯδχΞͷͨΊͷ

    WebαʔϏεσβΠϯ࣮ફߨ࠲
    https://speakerdeck.com/ken_c_lo/
    webenziniafalsetamefalsewebsabisud
    ezainshi-jian-jiang-zuo
    Λݟ͍ͯͩ͘͞ʂ

    View Slide

  61. ো֐ରԠ

    View Slide

  62. όάϑΟοΫε
    • ςετΛॻ͍ͯ΋ɺόά͸ग़ͯ͘Δ
    • αʔόʔΤϥʔ͕ൃੜͨ͠ͱ͖͸ϝʔϧͰ௨஌
    ͢ΔΑ͏ʹ͍ͯ͠Δ
    • exception_notification gem ࢖ͬͯΔ
    • Errbitʢ࢖ͬͯͳ͍ʣ͸͍͍Β͍͠Ͱ͢Ͷ……

    View Slide

  63. TwitterͰόάϨϙʔτड෇
    • όάϨϙʔτ͸Twitterܦ༝ͰདྷΔ͜ͱ͕ଟ͍
    • denkinovelͷTwitterΞΧ΢ϯτͰόάϨϙʔτ
    ʹରԠ͢Δ
    • ϒϥ΢βɺOSͳͲͷ؀ڥΛ఻͑ͯ͜ͳ͍ਓ͕
    ΄ͱΜͲ(´ɾωɾ`) ຖճʮ͓࢖͍ͷϒϥ΢βͱ
    OS͸ͳΜͰ͔͢ʯͱฉ͍ͯΔ

    View Slide

  64. ؊Λྫྷ΍ͨ͠ॠؒ
    • ChromeҎ֎ͷϒϥ΢βͰද่͕ࣔΕ͍ͯͨ͜ͱ
    ʹ1िؒޙʹؾ͍ͮͨ
    • εϚʔτϑΥϯͰͷԻָ࠶ੜ͕1िؒ΄ͲͰ͖ͯ
    ͍ͳ͍ͱؾ͍ͮͨͱ͖
    • ಛఆϖʔδʹΞΫηε͢Δͱɺ͋ΔҰఆͷ֬཰Ͱ
    αʔόʔΤϥʔ͕ൃੜ͢Δෆ۩߹͕௚ͤͳ͍ͱ͖

    View Slide

  65. ো֐ରԠͰಘͨ஌ݟ
    • αʔόʔΤϥʔग़ͯ΋ͳΜͱ͔ͳΔ
    • ͳͷͰɺڪ͕ΒͣʹͲΜͲΜσϓϩΠ͍ͯ͠
    ͍
    • ো֐ରԠ૭ޱ͸࡞͓ͬͯ͜͏
    • ϝʔϧɺTwitterɺ͓໰͍߹ͤϑΥʔϜ

    View Slide

  66. ςετ

    View Slide

  67. Denkinovelͷςετํ਑
    • ModelͷϢχοτςετ͸Ͱ͖Δ͚ͩॻ͘
    • RSpec࢖ͬͯΔɻ͚Ͳࠓޙ͸Power AssertΛminitestͰ΍
    Δͷ͕Αͦ͞͏……ʁ
    • ςετΛॻ͖ʹ͍͘ͱ͜ΖʢS3ͱͷ࿈ܞͳͲʣ͸ɺͨ·ʹ
    ॻ͔ͳ͍͜ͱ΋͋Δ
    • Controllerςετ͸΄΅ॻ͔ͳ͍ɻ͔ΘΓʹCapybaraͰͷ
    E2Eςετ͕͋ΔͷͰେৎ෉ͩͱࢥ͏

    View Slide

  68. ͦͷ΄͔ͷۤ࿑

    View Slide

  69. ۤ࿑͍ͬͺ͍
    • HTML5ͷaudio࢓༷
    • ը૾ɾԻָϓϦϩʔυ
    • ෳ਺ϒϥ΢βʢεϚʔτϑΥϯ΋ʣରԠ
    • νϡʔτϦΞϧ࡞੒

    View Slide

  70. 5. ಘͨ஌ݟ·ͱΊ

    View Slide

  71. ஌ݟ
    • ໘౗ࣄ͸͚ͯ͞ɺͱΓ͋͑ͣ࡞ͬͯherokuͱ
    ͔Ͱָʹެ։͠Α͏
    • ͍͍ͩͨͷ͜ͱ͸ɺࢥ͍੾࣮ͬͯߦͯ͠Έͯ
    େৎ෉
    • ϥΠϒϥϦ͸ͲΜͲΜΞοϓσʔτ͍͚ͯ͠
    Ε͹……͍͍ͳ……

    View Slide

  72. 6. ͏Ε͔ͬͨ͜͠ͱ

    View Slide

  73. ͨ·ʹײ૝͕ݟ͔ͭΔ

    View Slide

  74. ͔ͩΒɺ
    ౤ߘ͕͋Δͱ͏Ε͍͠ʂʂʂ
    DenkinovelɺϊϕϧήʔϜΑΓ͸ָ͚ͩͲɺ
    খઆΑΓ͸౤ߘͷϋʔυϧ͕ߴ͍

    View Slide

  75. ϑΝϯ͕Ͱ͖ͨΓ͢Δ
    Denkinovelͷ࡭ࢠ (pdf) Λ࡞ͬͯ͘Ε·ͨ͠

    View Slide

  76. શମ·ͱΊ
    • ָʹϊϕϧήʔϜΈ͍ͨͳখઆΛ౤ߘͰ͖Δ
    αΠτΛ࡞Γ·ͨ͠
    • ஌ݟΛಘ·ͨ͠
    • ۤ࿑͚ͨ͠ΕͲخ͍͜͠ͱ΋͋Γ·ͨ͠

    View Slide

  77. ͓·͚

    View Slide

  78. DenkinovelͷTips
    • jͱkͰϖʔδૹΓͰ͖Δ
    • ViϞʔυ͕ඪ४Ͱ͢
    • EmacsϞʔυ͸ͳ͍Ͱ͢
    • ेࣈΩʔͷˡͱˠͰ΋ϖʔδૹΓͰ͖Δ

    View Slide

  79. εϚʔτϑΥϯΞϓϦ
    • Denkinovel for iOSΛ࡞Γ·͢
    • Swift࢝Ί·ͨ͠
    • Object-C΋ͪΐͬͱ΍ͬͯ·ͨ͠……
    • 2͔݄ޙ͘Β͍Λϝυʹެ։͍ͨ͠
    • Android͸ͪΐͬͱ͋ͱ·Θ͠Ͱ

    View Slide