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

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

15694ff24d0637f5299eb42fbe7f1d16?s=47 katryo
September 21, 2014

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

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

15694ff24d0637f5299eb42fbe7f1d16?s=128

katryo

September 21, 2014
Tweet

Transcript

  1. Rails3Ͱ࡞Γ࢝Ίͨ
 ΞϓϦέʔγϣϯΛ
 ͪΐͬͱͣͭվળͯ͠Ώ͘
 ಓͷΓ katryo

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

    ಘͨ஌ݟ·ͱΊ
  3. 1. ࣗݾ঺հ

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

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

  6. 2. Denkinovelͷ঺հ

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

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

    Rails4ʢݱࡏ͸ʣͰ։ൃ • ࡞඼౤ߘ਺500͘Β͍
  9. σϞ

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

  11. ΫϥΠΞϯτଆͰ࢖༻͍ͯ͠Δ ϥΠϒϥϦ • Backbone.js • JSʹ࢖͍΍͍͢ߏ଄Λ༩͑Δ • pushStateͰͷrouter΋උ͑Δ • ΦϒβʔόʔύλʔϯͰॻ͚ΔͷͰɺ

    DenkinovelͷΑ͏ʹɺΫϥΠΞϯτ͕ෳ਺ͷ ঢ়ଶΛ΋ͭΞϓϦέʔγϣϯʹ޲͍͍ͯΔ
  12. None
  13. Ϣʔβʔͷೖྗ͢ΔςΩετ • ຊจͷதʹMarkdownΈ͍ͨͳλά Λॻ͖ೖΕΔ • [bgm happiness]ͱ͔ • ࣮ࡍͷྫ •

    ಀ͛Δগঁͱ͋ͨ͠ͷ࿩ 1 • http://denkinovel.com/stories/662/open
  14. None
  15. None
  16. None
  17. 1ϖʔδͣͭͷJSONʹม׵

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

  20. ϊϕϧ࡞੒σϞ

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

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

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

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

  25. Denkinovelॳظܕ׬੒

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

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

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

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

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

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

  32. None
  33. ϗετઌͷมߋ

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

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

  36. ϗετઌมߋͰ΍ͬͨ͜ͱ • Ubuntu12.04ʹͯ͠ • HerokuͷpostgresʹೖͬͨσʔλΛVPSͷDBʹtaps gemͰೖΕ ͨΓ • CapistranoͰcap deployσϓϩΠͰ͖ΔΑ͏ʹͨ͠Γ

    • VagrantͰstaging؀ڥΛ࡞ͬͨΓ • ύεϫʔυΛ؀ڥม਺ͱͯ͠ར༻Ͱ͖ΔΑ͏ʹͨ͠Γ • Qiitaʹॻ͍ͨͷͰಡΜͰ͍ͩ͘͞
 http://qiita.com/katryo/items/f410916d5314dad2de96
  37. ϗετઌมߋͰΘ͔ͬͨ͜ͱ • VPSͰͷΠϯϑϥ؅ཧɺ͔ͳΓ໘౗ • ษڧ͠ͳ͍ͱ͍͚ͳ͍͜ͱ͕ଟ͗͢Δ • ٯʹ͍͑͹ɺHeroku͸ͱͯ΋ָ • ʮΞϓϦέʔγϣϯΛ࡞ͬͯެ։͢Δʯ͚ͩ ͳΒHerokuΛબͿ΂͖

  38. Heroku, ͓͢͢Ίɻ

  39. ChefͰͷαʔό؅ཧ

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

  41. Chef͸͔ͳΓΊΜͲ͍ • Denkinovelͷαʔό͸ChefͰ؅ཧ͍ͯ͠Δ • ͔͠͠Chef, ֶͿࣄ߲͕ଟ͗͢Δ • ݸਓͰগ਺ͷVPSΛ࢖͏͚ͩͳΒɺਖ਼௚ʹ͍͏ͱ͓ ͢͢ΊͰ͖ͳ͍ •

    ࠷ۙ͸Itamaeͱ͔Ansibleͱ͔ɺखܰͳ΍͕ͭ͋Δ Β͍͠Ͱ͢Ͷ……ʢ࢖ͬͨ͜ͱͳ͍ʣ
  42. ݸਓͰͷαʔό؅ཧ͸ ͱΓ͋͑ͣख࡞ۀͰɻ ! ඞཁʹͳͬͨΒ Itamaeͱ͔Ansibleͱ͔࢖͓͏

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

  44. bundle updateͰۤ࿑ͨ͠΋ͷ • Rails 3 => 4 • Strong parametersΛ஍ಓʹॻ͖׵͑

    • Twitter Bootstrap 2 => 3 • HTMLλάͷΫϥεΛ஍ಓʹॻ͖׵͑ • CSS΋஍ಓʹॻ͖׵͑
  45. ·ͱΊͯΞοϓσʔτ • Rails, Bootstrap, αʔόΛChef؅ཧʹ͢ΔɺҎ ্ͷ͜ͱΛಉ࣌ʹਐΊͨ • ׬ྃ·Ͱʹ8͔݄͔͔Γ·ͨ͠ • ಉ࣌ਐߦɺୡ੒ײΛಘΔ·Ͱͷো֐͕େ͖͍

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

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

  48. ؾܰʹΞοϓσʔτ͢΂͖Ͱͳ ͍΋ͷ • Twitter BootstrapͷΑ͏ʹɺΞοϓσʔτͨ͠ͱ ͜ΖͰՁ஋͕খ͍͞΋ͷ • HTMLɺCSSʹؔΘΔgem΋ɺؾܰʹΞοϓσʔτ ͢ΔͱඍົʹσβΠϯ͕มΘͬͨΓ͢ΔͷͰΞο ϓσʔτ͢΂͖Ͱͳ͍

    • HTML΍CSSʹؔΘΔgem͸ɺͦ΋ͦ΋ɺgemͱ ͯ͠؅ཧ͢΂͖Ͱͳ͍͔΋͠Εͳ͍ʢޙड़ʣ
  49. JavaScriptͱؔΘΔ gem

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

    • backbone-railsͱ͔ࠓ͙ࣺͯ͢Δ΂͖ • gem͸ϝϯς͞Εͳ͘ͳΔ͔΋
  51. JS͸Ͳ͏؅ཧ͢Δʁ • bowerͱ͔Ͱ؅ཧ͠Α͏ • Sprockets͸Rails͔ͩΒͱΓ͋͑ͣ࢖ͬͯ·͢ • Ͱ΋ɺSprockets͕ݪҼͰෆ۩߹͕ൃੜ͢Δ͜ͱ΋ ͋Δ • ΋͔ͨ͠͠ΒɺSprockets΋ࣺͯͨํ͕͍͍ͷ͔΋

    ͠Εͳ͍
  52. WebσβΠϯ

  53. ςϯϓϨʔτΤϯδϯ • ERB͔ΒSlimʹҠߦ • Πϯσϯτ͕֊૚Λҙຯ͢Δ • هड़ྔ͕গͳ͘ɺཧղ͠΍͍͢ • ཁ͢ΔʹBetter Haml

    • ͪͳΈʹϊϕϧ࠶ੜը໘Ͱ͸ɺUnderscore.jsͷςϯ ϓϨʔτͰϖʔδ಺༰ॻ͖׵͑
  54. ͱΓ͋͑ͣTwitterBootstrapͰ • CSSϑϨʔϜϫʔΫ͸ଟ͍ • Pure, gumby, Foundation,… • TwitterBootstrap͕࠷΋࢖ΘΕ͍ͯΔ •

    ʮ͋ͬɺ͜ͷαΠτBootstrap੡ͩʯ͕͋ΓಘΔ • Ͱ΋ɺͦΕ͕໰୊͔ʁ
  55. Denkinovelͷ΍Γ͔ͨ • ҰൠϢʔβʔ͸TwitterBootstrapͳͲ஌Βͳ͍ • ߴ଎ʹ։ൃͰ͖Ε͹໰୊ͳ͍ • TwitterBootstrap͸CSS, JSͷίϯϙʔωϯτͷू ߹ମɻଞͷCSSϑϨʔϜϫʔΫͱൺֱͯ͠େن ໛ɻ

    • JSͷϥΠϒϥϦΛ୳͞ͳͯ͘ࡁΉ
  56. WebσβΠϯͷվྑ • ࡞඼Λฒ΂ΔϨΠΞ΢τ • λΠϧܕ => Ϧετܕ ! ! •

    ౰࣌ɺλΠϧܕʹฒ΂ΔσβΠϯ͕ྲྀߦ͍ͬͯͨɻ • jQuery-masonryͱ͍͏ศརϥΠϒϥϦ͕͋ͬͨ
  57. ͋ΔਓʹσβΠϯΛࢦఠͯ͠΋ Βͬͨ • จষϞϊ͸ԣ௕ͷ΄͏͕ ݟ΍͍͢ • ϊϕϧຊฤͱڞ௨ͷงғ ؾʹͨ͠ํ͕͍͍

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

  59. Before After

  60. ! WebΤϯδχΞͷͨΊͷ
 WebαʔϏεσβΠϯ࣮ફߨ࠲ https://speakerdeck.com/ken_c_lo/ webenziniafalsetamefalsewebsabisud ezainshi-jian-jiang-zuo Λݟ͍ͯͩ͘͞ʂ

  61. ো֐ରԠ

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

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

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

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

  66. ςετ

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

    • Controllerςετ͸΄΅ॻ͔ͳ͍ɻ͔ΘΓʹCapybaraͰͷ E2Eςετ͕͋ΔͷͰେৎ෉ͩͱࢥ͏
  68. ͦͷ΄͔ͷۤ࿑

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

  70. 5. ಘͨ஌ݟ·ͱΊ

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

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

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

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

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

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

  77. ͓·͚

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

  79. εϚʔτϑΥϯΞϓϦ • Denkinovel for iOSΛ࡞Γ·͢ • Swift࢝Ί·ͨ͠ • Object-C΋ͪΐͬͱ΍ͬͯ·ͨ͠…… •

    2͔݄ޙ͘Β͍Λϝυʹެ։͍ͨ͠ • Android͸ͪΐͬͱ͋ͱ·Θ͠Ͱ