Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rails3で作り始めたアプリケーションをちょっとずつ改善してゆく道のり
Search
katryo
September 21, 2014
Programming
3
1.9k
Rails3で作り始めたアプリケーションをちょっとずつ改善してゆく道のり
#rubyhiroba の生活発表会で話した内容です
katryo
September 21, 2014
Tweet
Share
More Decks by katryo
See All by katryo
How to create an automated test suite for the Chromium based app and the Unity app
katryo
0
6.7k
Denkinovelをどうして作り続けているのか
katryo
0
2.3k
Sprockets絶ちに挑戦した
katryo
4
1.8k
業務で使えるGolang
katryo
3
1.7k
Railsアプリの運営とQOL爆アゲアイテム
katryo
0
390
Golang完全初心者がチュートリアルを完了させればなにができるようになるか
katryo
2
4k
Other Decks in Programming
See All in Programming
Benchmark
sysong
0
270
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
ニーリーにおけるプロダクトエンジニア
nealle
0
570
ふつうの技術スタックでアート作品を作ってみる
akira888
0
150
Team operations that are not burdened by SRE
kazatohiei
1
260
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
980
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
200
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
530
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
120
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
A designer walks into a library…
pauljervisheath
207
24k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
A Modern Web Designer's Workflow
chriscoyier
694
190k
Automating Front-end Workflow
addyosmani
1370
200k
Faster Mobile Websites
deanohume
307
31k
Designing Experiences People Love
moore
142
24k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Speed Design
sergeychernyshev
32
1k
Transcript
Rails3Ͱ࡞Γ࢝Ίͨ ΞϓϦέʔγϣϯΛ ͪΐͬͱͣͭվળͯ͠Ώ͘ ಓͷΓ katryo
࣍ 1. ࣗݾհ 2. Denkinovelͷհ 3. DenkinovelΛ࡞Δ·ͰͷܦҢ 4. DenkinovelͷΞοϓσʔτͷܦྺ 5.
ಘͨݟ·ͱΊ
1. ࣗݾհ
katryo • झຯͱࣄͰWebΞϓϦέʔγϣϯ࡞ͬͯ·͢ • ࣄͰPerlॻ͍ͯ·͢(´ɾωɾ`) • Rubyେ͖ʂ Ұ൪͖ͳLLͰ͢ʂ 5XJUUFSͷΞΠίϯ ࣗ࡞ϊϕϧήʔϜͷΩϟϥΫλʔ
WebΞϓϦέʔγϣϯΛ ࡞ΓɺΞοϓσʔτ͠ଓ͚Δ͜ͱͰ ಘΒΕͨݟʹ͍ͭͯ͠·͢ɻ
2. Denkinovelͷհ
ಈ͘খઆߘαΠτ Denkinovel
Denkinovelͱ • ԻָͱഎܠͱޮՌԻͷԋग़͕ग़དྷΔখઆߘαΠτ • ݸਓͰ։ൃӡӦ • 201211݄ʹӡӦ։࢝ • ͘͞ΒVPSͰಈ͍͍ͯΔ •
Rails4ʢݱࡏʣͰ։ൃ • ࡞ߘ500͘Β͍
σϞ
Denkinovelͷ͘͠Έ • ϊϕϧຊจจࣈྻͷ··DBʹอଘ • αʔόଆͰຊจΛJSONʹม • ͋ͱશ෦ɺJSONΛड͚औͬͨΫϥΠΞϯτ ଆ͕͏·͍͜ͱΔ
ΫϥΠΞϯτଆͰ༻͍ͯ͠Δ ϥΠϒϥϦ • Backbone.js • JSʹ͍͍͢ߏΛ༩͑Δ • pushStateͰͷrouterඋ͑Δ • ΦϒβʔόʔύλʔϯͰॻ͚ΔͷͰɺ
DenkinovelͷΑ͏ʹɺΫϥΠΞϯτ͕ෳͷ ঢ়ଶΛͭΞϓϦέʔγϣϯʹ͍͍ͯΔ
None
Ϣʔβʔͷೖྗ͢ΔςΩετ • ຊจͷதʹMarkdownΈ͍ͨͳλά Λॻ͖ೖΕΔ • [bgm happiness]ͱ͔ • ࣮ࡍͷྫ •
ಀ͛Δগঁͱ͋ͨ͠ͷ 1 • http://denkinovel.com/stories/662/open
None
None
None
1ϖʔδͣͭͷJSONʹม
None
දࣔɾ࠶ੜ • JSON͔Β1ϖʔδͣͭදࣔɾ࠶ੜ͢Δ • ϖʔδ͕Ί͘ΒΕΔͨͼɺBGMͳͲΛΓସ ͑Δ͔அ͢Δ • ͠લϖʔδͱҧ͏BGM͕ࢦఆ͞Ε͍ͯΔ ͳΒΓସ͑Δ
ϊϕϧ࡞σϞ
3. DenkinovelΛ࡞Δ·Ͱͷ ܦҢ
Denkinovelॳظܕ • େֶӃͷतۀ՝ɿRailsΞϓϦΛ࡞Δ͜ͱ • jQueryͰ༡ΜͰ͍ͨ • εΫϩʔϧҐஔʹ͋ΘͤͯഎܠΛม͑Δίʔ υΛݟ͚ͭͨ
ϒϩάͱΈ߹ΘͤͨΒ ໘ന͍ͷͰʁ
࣌ɺ࡞͍ͬͯͨWebαΠτ • ࣗ࡞ϊϕϧήʔϜͷWebαΠτͰڽͬͨԋग़ Λ͔ͨͬͨ͠ • ༧ࠂฤΛ࡞Γ͔ͨͬͨɻ • JavaScriptΛ͏·͑͘ɺWeb্Ͱ؆୯ͳ ԋग़͖ͭͷ༧ࠂฤ͕࡞ΕΔͷͰʁ
Denkinovelॳظܕ
ߨٛظؒऴྃޙվྑΛଓ͚ͨ • େֶͷ࡞αʔΫϧʹDenkinovelॳظܕΛ ͬͯΒͬͯΠϯλϏϡʔͨ͠ • ϒϩά෩ͷจষஔ͔Βɺ1ϖʔδ͝ͱͷஔ ʹมߋ
େֶͷֶԂࡇʹ͋Θͤͯެ։
ϒϩάʹహΛॻ͍ͨΒ ͯͳϒοΫϚʔΫ326USERS
͜ͷͱ͖ͷٕज़ྗ • DBͱ͔indexͱ͔Α͘Θ͔Βͳ͍ • γΣϧεΫϦϓτΛΒͳ͍ɻαʔόͰԿ͕ ى͍ͬͯ͜Δͷ͔Θ͔Βͳ͍ɻ • ΦϒδΣΫτࢦͱ͔Θ͔Βͳ͍ • ͔ͬͨͰ͢Ͷ……
ಘͨݟ • ͱΓ͋͑ͣ࡞ͬͯ͠·͓͏ • ਓʹݟͤΔ͜ͱ͕ՄೳʹͳΔ • ػೳՃɺվળͳͲɺਓʹݟͤΒΕΔΑ ͏ʹͳ͔ͬͯΒͰؒʹ߹͏
4. DenkinovelͷΞοϓσʔ τͷܦྺ
None
ϗετઌͷมߋ
ϗετઌҠߦͷܦҢ • ॳHerokuͰӡ༻ • ϨϙδτϦͷϑΝΠϧαΠζ੍ݶ (300MB) Λ ӽ͍͑ͯͨͷͰɺҠߦͤ͟ΔΛಘͳ͔ͬͨ • Ձ֨ͱਓؾ͔Β͘͞ΒVPSΛબ
• 2GBϓϥϯ
ϗετઌมߋ͚ͬ͜͏େม • DBɺυϝΠϯઃఆɺσϓϩΠखॱͷཱ֬…… • େͳ͜ͱ͍͍ͩͨRailsCasts͕ڭ͑ͯ͘Ε ͨ ༗ྉϓϥϯ͕Φεεϝɻ ͨͩ͠Ͱߋ৽ఀࢭɻ (P3BJMT͕ࢤΛड͚ܧ͍Ͱ͍Δʜʜʁ
ϗετઌมߋͰͬͨ͜ͱ • Ubuntu12.04ʹͯ͠ • HerokuͷpostgresʹೖͬͨσʔλΛVPSͷDBʹtaps gemͰೖΕ ͨΓ • CapistranoͰcap deployσϓϩΠͰ͖ΔΑ͏ʹͨ͠Γ
• VagrantͰstagingڥΛ࡞ͬͨΓ • ύεϫʔυΛڥมͱͯ͠ར༻Ͱ͖ΔΑ͏ʹͨ͠Γ • Qiitaʹॻ͍ͨͷͰಡΜͰ͍ͩ͘͞ http://qiita.com/katryo/items/f410916d5314dad2de96
ϗετઌมߋͰΘ͔ͬͨ͜ͱ • VPSͰͷΠϯϑϥཧɺ͔ͳΓ໘ • ษڧ͠ͳ͍ͱ͍͚ͳ͍͜ͱ͕ଟ͗͢Δ • ٯʹ͍͑ɺHerokuͱָͯ • ʮΞϓϦέʔγϣϯΛ࡞ͬͯެ։͢Δʯ͚ͩ ͳΒHerokuΛબͿ͖
Heroku, ͓͢͢Ίɻ
ChefͰͷαʔόཧ
Infrastructure as Code ྲྀߦͯ͠ΔΒ͍͠͠ɺͦΖͦΖΔ͔……
Chef͔ͳΓΊΜͲ͍ • DenkinovelͷαʔόChefͰཧ͍ͯ͠Δ • ͔͠͠Chef, ֶͿࣄ߲͕ଟ͗͢Δ • ݸਓͰগͷVPSΛ͏͚ͩͳΒɺਖ਼ʹ͍͏ͱ͓ ͢͢ΊͰ͖ͳ͍ •
࠷ۙItamaeͱ͔Ansibleͱ͔ɺखܰͳ͕ͭ͋Δ Β͍͠Ͱ͢Ͷ……ʢͬͨ͜ͱͳ͍ʣ
ݸਓͰͷαʔόཧ ͱΓ͋͑ͣख࡞ۀͰɻ ! ඞཁʹͳͬͨΒ Itamaeͱ͔Ansibleͱ͔͓͏
ґଘϥΠϒϥϦͷ Ξοϓσʔτ
bundle updateͰۤ࿑ͨ͠ͷ • Rails 3 => 4 • Strong parametersΛಓʹॻ͖͑
• Twitter Bootstrap 2 => 3 • HTMLλάͷΫϥεΛಓʹॻ͖͑ • CSSಓʹॻ͖͑
·ͱΊͯΞοϓσʔτ • Rails, Bootstrap, αʔόΛChefཧʹ͢ΔɺҎ ্ͷ͜ͱΛಉ࣌ʹਐΊͨ • ྃ·Ͱʹ8͔݄͔͔Γ·ͨ͠ • ಉ࣌ਐߦɺୡײΛಘΔ·Ͱͷো͕େ͖͍
• ಉ࣌ਐߦ͠ͳ͍΄͏͕͍͍Ͱ͢
ͦͦΞοϓσʔτ͖͢ͳ ͷ͔ʁ • ηΩϡϦςΟͷ͕ͳ͚Ε͠ͳͯ͘େ͖ͳແ ͍ɻ • ϥΠϒϥϦͷΞοϓσʔτʹ࣌ؒΛऔΒΕΔͷຊస • ͋ͱͰߟ͑ΔͱɺDenkinovelͷgemΞοϓσʔτ (BootstrapͳͲ)
ɺࣗݾຬͰ͍ͬͯͨͷ͕ଟ͔ͬ ͨɻ • ͔͠͠……ɻ
ͬͺΓΞοϓσʔτ͖͢ • ػೳతͳվྑΑΓɺʮ͍͔ͭݹ͍όʔδϣ ϯ͕Γ͞ΕΔΜ͡Όͳ͍͔ʯͱ͍͏ෆ҆ Λͳͤ͘Δͷ͕େ͖͍ • Rubyք۾ɺಛʹɺݹ͍ͷͲΜͲΜΓ ࣺͯΒΕΔ • جຊతʹͲΜͲΜΞοϓσʔτ͖͢
ؾܰʹΞοϓσʔτ͖͢Ͱͳ ͍ͷ • Twitter BootstrapͷΑ͏ʹɺΞοϓσʔτͨ͠ͱ ͜ΖͰՁ͕খ͍͞ͷ • HTMLɺCSSʹؔΘΔgemɺؾܰʹΞοϓσʔτ ͢ΔͱඍົʹσβΠϯ͕มΘͬͨΓ͢ΔͷͰΞο ϓσʔτ͖͢Ͱͳ͍
• HTMLCSSʹؔΘΔgemɺͦͦɺgemͱ ͯ͠ཧ͖͢Ͱͳ͍͔͠Εͳ͍ʢޙड़ʣ
JavaScriptͱؔΘΔ gem
JSؔ࿈ͷgemফͦ͏ • JS͕བྷΉgemΘͳ͍΄͏͕͍͍ • gemRubyͰ͔͑͠ͳ͍ɻ͔͠͠JavaScriptϥΠϒϥϦɺ αʔόαΠυͰͲΜͳݴޠΛ࠾༻͠Α͏ͱɺΫϥΠΞϯτଆͰ ͑Δ • JSͷཧJSͷྲّྀͰΔ͖ɻΑΓదͨ͠ΤίγεςϜ͕ͬ ͍ͯΔͷͰɻ
• backbone-railsͱ͔ࠓ͙ࣺͯ͢Δ͖ • gemϝϯς͞Εͳ͘ͳΔ͔
JSͲ͏ཧ͢Δʁ • bowerͱ͔Ͱཧ͠Α͏ • SprocketsRails͔ͩΒͱΓ͋͑ͣͬͯ·͢ • ͰɺSprockets͕ݪҼͰෆ۩߹͕ൃੜ͢Δ͜ͱ ͋Δ • ͔ͨ͠͠ΒɺSprocketsࣺͯͨํ͕͍͍ͷ͔
͠Εͳ͍
WebσβΠϯ
ςϯϓϨʔτΤϯδϯ • ERB͔ΒSlimʹҠߦ • Πϯσϯτ͕֊Λҙຯ͢Δ • هड़ྔ͕গͳ͘ɺཧղ͍͢͠ • ཁ͢ΔʹBetter Haml
• ͪͳΈʹϊϕϧ࠶ੜը໘ͰɺUnderscore.jsͷςϯ ϓϨʔτͰϖʔδ༰ॻ͖͑
ͱΓ͋͑ͣTwitterBootstrapͰ • CSSϑϨʔϜϫʔΫଟ͍ • Pure, gumby, Foundation,… • TwitterBootstrap͕࠷ΘΕ͍ͯΔ •
ʮ͋ͬɺ͜ͷαΠτBootstrapͩʯ͕͋ΓಘΔ • ͰɺͦΕ͕͔ʁ
DenkinovelͷΓ͔ͨ • ҰൠϢʔβʔTwitterBootstrapͳͲΒͳ͍ • ߴʹ։ൃͰ͖Εͳ͍ • TwitterBootstrapCSS, JSͷίϯϙʔωϯτͷू ߹ମɻଞͷCSSϑϨʔϜϫʔΫͱൺֱͯ͠େن ɻ
• JSͷϥΠϒϥϦΛ୳͞ͳͯ͘ࡁΉ
WebσβΠϯͷվྑ • ࡞ΛฒΔϨΠΞτ • λΠϧܕ => Ϧετܕ ! ! •
࣌ɺλΠϧܕʹฒΔσβΠϯ͕ྲྀߦ͍ͬͯͨɻ • jQuery-masonryͱ͍͏ศརϥΠϒϥϦ͕͋ͬͨ
͋ΔਓʹσβΠϯΛࢦఠͯ͠ Βͬͨ • จষϞϊԣͷ΄͏͕ ݟ͍͢ • ϊϕϧຊฤͱڞ௨ͷงғ ؾʹͨ͠ํ͕͍͍
ࣾษڧձͷࡐͱͯ͠ࢦఠͯ͠Βͬͨ
Before After
! WebΤϯδχΞͷͨΊͷ WebαʔϏεσβΠϯ࣮ફߨ࠲ https://speakerdeck.com/ken_c_lo/ webenziniafalsetamefalsewebsabisud ezainshi-jian-jiang-zuo Λݟ͍ͯͩ͘͞ʂ
োରԠ
όάϑΟοΫε • ςετΛॻ͍ͯɺόάग़ͯ͘Δ • αʔόʔΤϥʔ͕ൃੜͨ͠ͱ͖ϝʔϧͰ௨ ͢ΔΑ͏ʹ͍ͯ͠Δ • exception_notification gem ͬͯΔ
• Errbitʢͬͯͳ͍ʣ͍͍Β͍͠Ͱ͢Ͷ……
TwitterͰόάϨϙʔτड • όάϨϙʔτTwitterܦ༝ͰདྷΔ͜ͱ͕ଟ͍ • denkinovelͷTwitterΞΧϯτͰόάϨϙʔτ ʹରԠ͢Δ • ϒϥβɺOSͳͲͷڥΛ͑ͯ͜ͳ͍ਓ͕ ΄ͱΜͲ(´ɾωɾ`) ຖճʮ͓͍ͷϒϥβͱ
OSͳΜͰ͔͢ʯͱฉ͍ͯΔ
؊Λྫྷͨ͠ॠؒ • ChromeҎ֎ͷϒϥβͰද่͕ࣔΕ͍ͯͨ͜ͱ ʹ1िؒޙʹؾ͍ͮͨ • εϚʔτϑΥϯͰͷԻָ࠶ੜ͕1िؒ΄ͲͰ͖ͯ ͍ͳ͍ͱؾ͍ͮͨͱ͖ • ಛఆϖʔδʹΞΫηε͢Δͱɺ͋ΔҰఆͷ֬Ͱ αʔόʔΤϥʔ͕ൃੜ͢Δෆ۩߹͕ͤͳ͍ͱ͖
োରԠͰಘͨݟ • αʔόʔΤϥʔग़ͯͳΜͱ͔ͳΔ • ͳͷͰɺڪ͕ΒͣʹͲΜͲΜσϓϩΠ͍ͯ͠ ͍ • োରԠ૭ޱ࡞͓ͬͯ͜͏ • ϝʔϧɺTwitterɺ͓͍߹ͤϑΥʔϜ
ςετ
Denkinovelͷςετํ • ModelͷϢχοτςετͰ͖Δ͚ͩॻ͘ • RSpecͬͯΔɻ͚ͲࠓޙPower AssertΛminitestͰ Δͷ͕Αͦ͞͏……ʁ • ςετΛॻ͖ʹ͍͘ͱ͜ΖʢS3ͱͷ࿈ܞͳͲʣɺͨ·ʹ ॻ͔ͳ͍͜ͱ͋Δ
• Controllerςετ΄΅ॻ͔ͳ͍ɻ͔ΘΓʹCapybaraͰͷ E2Eςετ͕͋ΔͷͰେৎͩͱࢥ͏
ͦͷ΄͔ͷۤ࿑
ۤ࿑͍ͬͺ͍ • HTML5ͷaudio༷ • ը૾ɾԻָϓϦϩʔυ • ෳϒϥβʢεϚʔτϑΥϯʣରԠ • νϡʔτϦΞϧ࡞
5. ಘͨݟ·ͱΊ
ݟ • ໘ࣄ͚ͯ͞ɺͱΓ͋͑ͣ࡞ͬͯherokuͱ ͔Ͱָʹެ։͠Α͏ • ͍͍ͩͨͷ͜ͱɺࢥ͍࣮ͬͯߦͯ͠Έͯ େৎ • ϥΠϒϥϦͲΜͲΜΞοϓσʔτ͍͚ͯ͠ Ε……͍͍ͳ……
6. ͏Ε͔ͬͨ͜͠ͱ
ͨ·ʹײ͕ݟ͔ͭΔ
͔ͩΒɺ ߘ͕͋Δͱ͏Ε͍͠ʂʂʂ DenkinovelɺϊϕϧήʔϜΑΓָ͚ͩͲɺ খઆΑΓߘͷϋʔυϧ͕ߴ͍
ϑΝϯ͕Ͱ͖ͨΓ͢Δ Denkinovelͷࢠ (pdf) Λ࡞ͬͯ͘Ε·ͨ͠
શମ·ͱΊ • ָʹϊϕϧήʔϜΈ͍ͨͳখઆΛߘͰ͖Δ αΠτΛ࡞Γ·ͨ͠ • ݟΛಘ·ͨ͠ • ۤ࿑͚ͨ͠ΕͲخ͍͜͠ͱ͋Γ·ͨ͠
͓·͚
DenkinovelͷTips • jͱkͰϖʔδૹΓͰ͖Δ • ViϞʔυ͕ඪ४Ͱ͢ • EmacsϞʔυͳ͍Ͱ͢ • ेࣈΩʔͷˡͱˠͰϖʔδૹΓͰ͖Δ
εϚʔτϑΥϯΞϓϦ • Denkinovel for iOSΛ࡞Γ·͢ • Swift࢝Ί·ͨ͠ • Object-Cͪΐͬͱͬͯ·ͨ͠…… •
2͔݄ޙ͘Β͍Λϝυʹެ։͍ͨ͠ • Androidͪΐͬͱ͋ͱ·Θ͠Ͱ