3.29 Sansan✕一休.com 勉強会での発表資料です
Ұٳ.com ʹ͓͚ΔϑϩϯτΤϯυ։ൃʙSansan✕Ұٳ ϑϩϯτΤϯυษڧձʙkensuke tanaka (@kentana20)
View Slide
About me• ాத ݈հ• @kentana20• 20065݄͔ΒҰٳ• ॓ധαʔϏε։ൃ(9) →γεςϜຊ෦(1)
Agenda• Ұٳ.com & ࠾༻ٕज़ / Tools• ։ൃମ੍ɺ։ൃϑϩʔ• σβΠφʔͱͷίϥϘϨʔγϣϯ• ϚʔέςΟϯάɺCSͱͷίϥϘϨʔγϣϯ
ຊͷςʔϚϑϩϯτΤϯυ։ൃͷ࣮ྫ
͝ҙ• ϑϩϯτΤϯυ։ൃͷલஈͷΛ͠·͢• ͍͔ʹͯ͠σβΠφʔϚʔέςΟϯάɺCS ΤϯδχΞͷίϥϘϨʔγϣϯΛߴΊ͍ͯΔ͔ͱ͍͏͕ϝΠϯͰ͢• TechগͳΊ• ޙฤͰผ్͓͍͖ͤͯͨͩ͞·͢
Ұٳ.com & ࠾༻ٕज़ / Tools
About Ұٳ.com
Ұٳ.com• ओྗαʔϏε• ্࣭ͳϗςϧɾཱྀؗͷ༧αʔϏε• 20005݄Φʔϓϯͷ15ࡀ
Ұٳ.com KPI (2015.03)• ձһ: 400ສ+• ϗςϧ/ཱྀؗ: 2,600ࢪઃ+• ؒൢചࣨ: 189ສࣨ+
͓ྡ͞·
࠾༻ٕज़ / Tools
࠾༻ٕज़ / Tools• ASP.NET WebForms/MVC (VB/C#)• IIS, SQLServer, Solr• Sass, Compass• GitHub Enterprise• nxlog, Fluentd, Elasticsearch, Google Big Query• Jenkins, Selenium WebDriver• NewRelic, Kibana, Bugsnag• Redmine, Trello, Slack, Hubot
࠾༻ٕज़ / Tools (2લ)• ASP.NET WebForms/MVC (VB/C#)• IIS, SQLServer, Solr• Sass, Compass• GitHub Enterprise• nxlog, Fluentd, Elasticsearch, Google Big Query• Jenkins, Selenium WebDriver• NewRelic, Kibana, Bugsnag• Redmine, Trello, Slack, Hubot
࠾༻ٕज़ / Tools (1લ)• ASP.NET WebForms/MVC (VB/C#)• IIS, SQLServer, Solr• Sass, Compass• GitHub Enterprise• nxlog, Fluentd, Elasticsearch, Google Big Query• Jenkins, Selenium WebDriver• NewRelic, Kibana, Bugsnag• Redmine, Trello, Slack, Hubot
։ൃମ੍ɾ։ൃϑϩʔ
։ൃମ੍
։ൃମ੍(2016.3)αʔϏε։ൃΤϯδχΞ ໊ج൫ܥΤϯδχΞ ໊ΠϯϑϥΤϯδχΞ ໊σβΠφʔ ໊%FW %FT%FW 0QTϚʔέएׯ໊.LU
σβΠφʔ3ͭͷάϧʔϓͰߏը૾੩తϖʔδΫϦΤΠςΟϒσβΠϯίʔσΟϯά
ը૾੩తϖʔδΫϦΤΠςΟϒσβΠϯίʔσΟϯά%FWσβΠφʔ3ͭͷϢχοτΤϯδχΞͱΑ͘ίϥϘ͢ΔͷΫϦΤΠςΟϒσβΠϯͱίʔσΟϯάΛ͍ͯ͠ΔνʔϜ
σβΠφʔͱͷίϥϘϨʔγϣϯ
աڈ
ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ• ։ൃڥ• ΤϯδχΞ֤ࣗϩʔΧϧͰ࡞ۀ• σβΠφʔڞ༻αʔό্Ͱશһ͕࡞ۀ• ڞ༻αʔόΤϯδχΞ͕ि࣍Ͱߋ৽• ڞ༻αʔόͷࢿࡐΤϯδχΞ͕ίϛοτ
چࣜͷίϥϘϨʔγϣϯϩʔΧϧڥ։ൃςετσβΠϯϦϦʔεݕূڞ༻σβΠϯڥ3FQPTJUPSZ$PNNJU
ϩʔΧϧڥ։ൃςετσβΠϯϦϦʔεݕূڞ༻σβΠϯڥߋ৽ि࣍3FQPTJUPSZ$PNNJU6QEBUFچࣜͷίϥϘϨʔγϣϯ
ϩʔΧϧڥ։ൃςετσβΠϯϦϦʔεݕূڞ༻σβΠϯڥߋ৽ि࣍3FQPTJUPSZ$PNNJU6QEBUFσβΠϯ࡞ۀچࣜͷίϥϘϨʔγϣϯ
ϩʔΧϧڥ։ൃςετσβΠϯϦϦʔεݕূڞ༻σβΠϯڥߋ৽ि࣍3FQPTJUPSZ$PNNJU6QEBUFཧ$PNNJUچࣜͷίϥϘϨʔγϣϯ
ϩʔΧϧڥ։ൃςετσβΠϯϦϦʔεݕূڞ༻σβΠϯڥߋ৽ि࣍3FQPTJUPSZ$PNNJU6QEBUFཧ$PNNJU4UBHJOHڥ%FQMPZچࣜͷίϥϘϨʔγϣϯ
ϩʔΧϧڥ։ൃςετσβΠϯϦϦʔεݕূڞ༻σβΠϯڥߋ৽ि࣍3FQPTJUPSZ$PNNJU6QEBUFཧ$PNNJU4UBHJOHڥ%FQMPZຊ൪ڥچࣜͷίϥϘϨʔγϣϯ
ͭΒ͍
ίϥϘͷͨΊͷίετ͕ߴ͔ͬͨ• ΤϯδχΞ• ڞ༻σβΠϯڥͷϝϯς͠ΜͲ͍• ڞ༻ͳͷͰϒϥϯν͚ͯ࡞ۀ͓ئ͍ͮ͠Β͍• σβΠφʔ• ڞ༻σβΠϯڥ͕ϝϯς͞Εͳ͍ͱ࡞ۀͰ͖ͳ͍• σβΠφʔಉ࢜Ͱ࡞ۀ͕ڝ߹
ޡͬͨํʹߦ͖͔͚ͨ• ΤϯδχΞ• (… ͳΔ͘1ճͰσβΠϯܾΊͯΒ͓͏)• σβΠφʔ• (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ͏ͪΐ͍վળ Ͱ͖Δ͚Ͳڞ༻ڥߋ৽͞Εͯͳ͍͠ɺདྷि ݴ͍͍͔͑)
ޡͬͨํʹߦ͖͔͚ͨ• ΤϯδχΞ• (… ͳΔ͘1ճͰσβΠϯܾΊͯΒ͓͏)• σβΠφʔ• (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ͏ͪΐ͍վળ Ͱ͖Δ͚Ͳڞ༻ڥߋ৽͞Εͯͳ͍͠ɺདྷि ݴ͍͍͔͑)ΤϯδχΞͱσβΠφʔͷڑ͕ԕ͔ͬͨ
ޡͬͨํʹߦ͖͔͚ͨ• ΤϯδχΞ• (… ͳΔ͘1ճͰσβΠϯܾΊͯΒ͓͏)• σβΠφʔ• (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ͏ͪΐ͍վળ Ͱ͖Δ͚Ͳڞ༻ڥߋ৽͞Εͯͳ͍͠ɺདྷि ݴ͍͍͔͑)͜ΕͰϢʔβʹՁΛૣ͘ಧ͚ΒΕͳ͍
σβΠφʔGitHub FlowͰ• ࡞ۀڥɺϫʔΫϑϩʔΛΤϯδχΞͱἧ͑ͨ• ΤϯδχΞͱಉ༷ʹϩʔΧϧʹ։ൃڥΛඋ (ڥߏஙͱ࠷৽ԽɺϏϧυͳͲࣗಈԽ)• σβΠφʔ։ൃ༻ϒϥϯνͰ࡞ۀ• ϓϧϦΫ্ͰίϥϘϨʔγϣϯ
σβΠϯ࡞ۀͷϒϥϯνઓུNBTUFSEYYYYEZZZZEYYYY EYYYYEZZZZ EZZZZDIFDLPVUDIFDLPVUNFSHF1VMM3FRVFTUNFSHF1VMM3FRVFTU4UBHJOH
ϩʔΧϧڥ։ൃςετσβΠϯϦϦʔεݕূϩʔΧϧڥ3FQPTJUPSZ$PNNJU1VTI$IFDLPVUσβΠϯ࡞ۀΤϯδχΞͱͷίϥϘϨʔγϣϯ$PNNJU1VTI4UBHJOHڥຊ൪ڥ%FQMPZ
࣮ࡍͷϓϧϦΫྫ
ಓͳྗ• Gitʹ׳ΕͯΒ͏ͨΊ• σβΠφʔ͚ͷࣾϫʔΫγϣοϓ• ಋೖ࣌ΦϯαΠτͰϑϧαϙʔτ• ಋೖޙʹ;Γ͔͑Γ
Sass
Sassಋೖͷഎܠ• ϗςϧɾཱྀؗΛѻ͏ Ұٳ.com• ϏδωεϗςϧΛѻ͏Ұٳ.com Ϗδωε
͓ޓ͍ͭΒ͔ͬͨ• ΤϯδχΞ• ϏϋΠϯυίʔυʹுΓ͍ͨۀϩδοΫͷॏෳ• σβΠφʔ• ྨࣅը໘ͷଘࡏ(CSSҰ෦Λআ͍ͯॏෳ)
ϩδοΫ౷߹ʴSassಋೖ• ΤϯδχΞ• ϩδοΫ౷߹ͯ͠ϏϋΠϯυίʔυΛ1ͭʹ• σβΠφʔ• Sassಋೖͯ͠ޮԽɾߏԽ
׳ΕͯΒ͏• Sassಋೖܦݧͷ͋ΔσβΠφʔओಋ• ߨٛࣜͷηϛφʔ• ΤϯδχΞϑΥϩʔ• Sass࡞ۀڥͳΔࣗ͘ಈԽ
લਐதʹࣄނ
ϩʔΧϧڥͰCSSޮ͔ͳ͍
߄ͯͯϏϧυόον͍͔͚ରԠ
Try&ErrorͰΞΫγϣϯܧଓ• ΤϯδχΞɺσβΠφʔͷʑͷෆຬΛΩϟονΞοϓ• ղܾࡦΛߟ͑ͯTry&Error• ໎Λ͔͚Δ͜ͱ͋Δ͚Ͳલਐͯ͠·͢
ϚʔέςΟϯάɺCSͱͷίϥϘϨʔγϣϯ
ϩʔΧϧڥ։ൃςετσβΠϯϦϦʔεݕূϩʔΧϧڥ3FQPTJUPSZ$PNNJU1VTI$IFDLPVUσβΠϯ࡞ۀGitಋೖޙͷϫʔΫϑϩʔ(લड़)$PNNJU1VTI4UBHJOHڥ%FQMPZ
ϩʔΧϧڥ։ൃςετσβΠϯϦϦʔεݕূϩʔΧϧڥσβΠϯ࡞ۀϚʔέςΟϯά / CSͷσϞ#1ର໘ͰϚʔέςΟϯά$4ʹ͚ͯσϞ
ϩʔΧϧڥ։ൃςετσβΠϯϦϦʔεݕূϩʔΧϧڥ3FQPTJUPSZ$PNNJU1VTI$IFDLPVUσβΠϯ࡞ۀ $PNNJU1VTI4UBHJOHڥ%FQMPZ4UBHJOHσϓϩΠޙʹϚʔέςΟϯά$4ϝϯόʔʹσϞϚʔέςΟϯά / CSͷσϞ#2
ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ• ର໘ͰͷϨϏϡʔɾσϞ• ඇಉظʹݟͯΒ͑ͳ͍• StagingσϓϩΠޙͷϨϏϡʔɾσϞ• λΠϛϯάతʹ͍
ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ• ڞ௨ͷΈ• ςετσʔλ͕ΠϚΠν• ର໘ͰͷϨϏϡʔɾσϞ• ඇಉظʹݟͯΒ͑ͳ͍• StagingσϓϩΠޙͷϨϏϡʔɾσϞ• λΠϛϯάతʹ͍ඇಉظʹmasterʹmerge͢ΔલʹϨϏϡʔɾσϞ͍ͨ͠
σϞɾϨϏϡʔڥ
σϞɾϨϏϡʔڥ• ࡞ۀϒϥϯνΛࢦఆͯ͠σϓϩΠ• Webը໘͔Βϒϥϯν໊Λࢦఆͯ͠Ϙλϯ1ൃ• ϩʔΧϧ։ൃڥͱඇಉظʹ࡞ΕΔ• ίʔυϨϏϡʔʹԊ͑ͨΓɺΤϯδχΞҎ֎(ϚʔέςΟϯάɾCSϝϯόʔ)ʹσϞͨ͠Γ
σϞ༻ڥͱͯ͠σϓϩΠͯ͠ ϓϧϦΫͰΓͱΓ
·ͱΊ• ϢʔβʹՁΛఏڙ͢ΔʹίϥϘϨʔγϣϯ͕େࣄ• ͓ޓ͍ͷΈ৳ͼ͠Ζ• ίϥϘ͢Δ૬खʹาΈدΔ• ΈͰղܾͰ͖Δ෦ҙ֎ͱଟ͍• վળͷ༨·ͩ·ͩ͋Δ• ଓ͖·ͨͲ͔͜Ͱ͓͍ͤͯͩ͘͞͞ʂ
ଓ͍ͯۙͰͷϦϓϨΠεʹΑΔࣄྫΛ͝հ͠·͢(ότϯλον)
kensuketanaka
rponte
soracom
hankehly
charmichokshi
mitsuaki96
yayoi_dd
ymty
yu4u
nenonaninu
bnasslahsen
yoshidashingo
optim
pauljervisheath
jasonvnalue
malarkey
paulrobertlloyd
lemiorhan
deanohume
brettharned
jlugia
aarron
bryan
destraynor
revolveconf