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

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

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ͷΑ͏ʹɺΫϥΠΞϯτ͕ෳ਺ͷ ঢ়ଶΛ΋ͭΞϓϦέʔγϣϯʹ޲͍͍ͯΔ
13. Ϣʔβʔͷೖྗ͢ΔςΩετ • ຊจͷதʹMarkdownΈ͍ͨͳλά Λॻ͖ೖΕΔ • [bgm happiness]ͱ͔ • ࣮ࡍͷྫ • ಀ͛Δগঁͱ͋ͨ͠ͷ࿩ 1 • http://denkinovel.com/stories/662/open
17. 1ϖʔδͣͭͷJSONʹม׵
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ͷΞοϓσʔ τͷܦྺ
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͸ͪΐͬͱ͋ͱ·Θ͠Ͱ