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

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͸ͪΐͬͱ͋ͱ·Θ͠Ͱ