Making mock-up in web application

Slide 1

Slide 1 text

ϞοΫΞοϓɺ Ͳ͏ӡ༻͢Δʁ 2018/08/04 JAM plus #02 at tambourine commune

Slide 2

Slide 2 text

҆෦૲ຑੜ  Kusamao Abe גࣜձࣾλϯόϦϯ ʢtambourine.incʣ ɾςΫχΧϧσΟϨΫλʔ  ɾWebΤϯδχΞ

Slide 3

Slide 3 text

JAM plusͷ͓͞Β͍ w JAMελοΫˠJavaScriptAPIMarkUpΒ͍͠ w MEANελοΫͱ͔LAMPͱ͔ͦ͏͍͏΍ͭ  ϑϩϯτΤϯυΛࢦ͢Β͍͠ w plusͬͯԿˠ͜ͷϏϧͷ໊લ͕ϓϥεϏϧ w ϩΰͱ͔΄͍͠ؾ͕͢Δ

Slide 4

Slide 4 text

Web੍࡞ʹ͓͚ΔϚʔΫΞοϓ ϫΠϠʔϑϨʔϜ σβΠϯΧϯϓ࡞੒ ϚʔΫΞοϓ WebαΠτ੍࡞ WebΞϓϦέʔγϣϯ੍࡞ σβΠϯΧϯϓ࡞੒ ϚʔΫΞοϓ γεςϜઃܭ ϓϩάϥϛϯά ςετ ཁ݅ఆٛ ϫΠϠʔϑϨʔϜ

Slide 5

Slide 5 text

ϞοΫΞοϓΛ࡞Δ w ϞοΫΞοϓʢmock-upʣɿ࣮෺ͱಉ͡େ͖͞ʹ࡞ͬͨ໛ܕɻݪੇ໛ܕɻ w ਫ਼៛ͳ໛ܕΛ࡞Δ͜ͱͰɺ࣮ࡍʹ࣮૷ͯ͠Έͯग़ͯ͘Δ໰୊఺Λ௵ͨ͠Γɺ ࣮ݱՄೳੑΛνΣοΫͨ͠Γ w ITۀքͰ͸ଞͷ࡞ۀϓϩηεʹґଘͤͣʹ੍࡞ΛਐΊ͓͍ͯͯɺޙ͔Βଞ ͷϓϩηεͱ૊Έ߹ΘͤΔ͜ͱ΋

Slide 6

Slide 6 text

ଞͷۀքͰ͸ w ਎ۙͳͱ͜ΖͰ͍͑͹ܞଳి࿩ɾεϚʔτϑΥϯͷళ಄ϞοΫΞοϓ w ݐஙۀքͰ΋ɺઃܭਤͲ͓Γʹ࡞ΕΔ͔ΛνΣοΫͨ͠Γ w ߤۭػͳͲͰ΋

Slide 7

Slide 7 text

5IF(PMEFO)BOETPG7BO$MFFG"SQFMTc:BU[FS IUUQTXXXZBU[FSDPNHPMEFOIBOETWBODMFFGBSQFMT l5IFNPDLVQTUVEJP "GUFSUIFESBXJOHSPPN UIFKFXFMEFTJHONBLFTJUTXBZUPUIFNPLF VQXPSLTIPQ XIFSFFYQFSJFODFENPDLVQNBLFSTDSFBUFBNPDLVQPG UIFKFXFMVTJOHQFXUFSBOETUSBTTDSZTUBMT SIJOFTUPOFT 5IJTJTBO JNQPSUBOUQIBTFJOUIFEFTJHOQSPDFTT CFDBVTFUIFEFTJHOFSDBOTFF IJTIFSESBXJOHDPNFUPMJGFXJUIPVUXBTUJOHQSFDJPVTNBUFSJBMT BOE UIFKFXFMMFSTDBOUFTUUIFXFJHIU NPWFNFOUBOETIBQFPGBKFXFM CFGPSFUIFZTUBSUXPSLJOHPOUIFSFBMQJFDF7BO$MFFG"SQFMTJT QFSIBQTUIFPOMZKFXFMMFSZIPVTFJOUIFXPSMEUIBUQSPWJEFTJUTUFBN XJUIUIFMVYVSZPGBNPDLVQNBLJOHTUVEJP UIVTFOIBODJOHUIF DPNNVOJDBUJPOCFUXFFOEFTJHOFSTBOEKFXFMMFSTBOEBMMPXJOHSPPNGPS UFTUJOHBOEDSFBUJWFFYQFSJNFOUBUJPOz

Slide 8

Slide 8 text

WebΞϓϦέʔγϣϯͱϞοΫ w σβΠϯΧϯϓ͚ͩͰ͸ೖग़ྗͷΠϯλϥΫγϣϯ੍࡞΍ύλʔϯͷ໢ཏ ͕Ή͔͍ͣ͠ w ϓϩτλΠϐϯάπʔϧͷ୆಄ͰɺͲ͏ಈ͘΂͖͔ͱ͍͏ͷ͕࡞Γ΍͢ ͘͸ͳ͖ͬͯͨ w ϚʔΫΞοϓ࣌఺Ͱ΋ͦͷύλʔϯɺ͍ΔΑͶʁ w όοΫΤϯυଆͷϩδοΫ͕Ͱ͖ͯͳͯ͘΋ਐΊ͓͖͍ͯͨΑͶ

Slide 9

Slide 9 text

ྫ Aʮ͜Εهࣄͳ͍ͱ͖ͷύλʔϯͲ͏͢Ε͹ ͍͍Ͱ͔͢ʁʯ Bʮ͋ͬɺͲ͏͠Α͔ͬʙʯ

Slide 10

Slide 10 text

࣮Ҋ݅ͱϞοΫΞοϓ 01

Slide 11

Slide 11 text

ECαΠτ w ؅ཧը໘আ͍ͯύλʔϯ΄Ͳͷը໘͕ඞཁ w PC൛ͷΈͷ੍࡞ͰOK • αʔόαΠυΞϓϦέʔγϣϯ

Slide 12

Slide 12 text

w ϚʔΫΞοϓͱView΁ͷ૊ΈࠐΈɾ࣮૷୲౰ऀ͕ผ w σβΠφʔ͕ுΓ෇͍͍ͯΔҊ݅Ͱ͸ͳ͔ͬͨʢ΢νͰ͸Α͋͘Δʣ w ը໘ઃܭˠσβΠϯˠϚʔΫΞοϓ w جຊઃܭˠৄࡉઃܭˠ࣮૷ɹͷ͕ͭฒߦՔಇ w σβΠφʔɿɹϑϩϯτΤϯυɿɹόοΫΤϯυɿ͍ͬͺ͍ ˠσβΠφʔ͕ΧϯϓΛߋ৽͚ͭͮ͠ΔΘ͚Ͱ͸ͳ͍ ˠʢ݁ՌతʹʣσβΠφʔ͕ϓϩδΣΫτ్தͰୀ৬

Slide 13

Slide 13 text

ํ਑ w ࣮૷͠ऴ͑Δ·Ͱ͸ϞοΫΞοϓΛʮਖ਼ʯͱͯ͠νΣοΫ w ͍ͭͰ΋୭Ͱ΋֬ೝͰ͖ΔΑ͏ʹɺϞοΫΞοϓͷΠϯελϯεΛཱͯΔ w ˠϞοΫΞοϓΛΞϓϦέʔγϣϯͱผͷϦϙδτϦʹ w ݁Ռతʹผʹ͢΂͖ͩͬͨͷ͔࿦͕͋Δʢࣗ෼ͷͳ͔Ͱʣ

Slide 14

Slide 14 text

ߏ੒ w ຊମ͸Laravel • pug w SCSSautopreﬁxer • gulp

Slide 15

Slide 15 text

QVH w extend͠·ͬͨ͘ΒϏϧυ͕࣌ؒͲΜͲ͜૿͑Δ w ։ൃ࣌͸expressmiddlewareͰϦΫΤετ͕དྷͨͷΛ  HTMLʹͯ͠ฦͯ͠ɺඞཁͳͱ͖͚ͩϏϧυ͢ΔΑ͏ʹมߋ w svgΛinlineͰຒΊࠐΉͷʹinclude࢖͍·ͬͨ͘Βݟ௨͠͸ྑ͘ͳͬͨ͠ ϦΫΤετ΋ݮͬͨΜ͕ͩHTML͕ϋνϟϝνϟͳݟ௨͠ʹ w ͳΜ͔ͩΜͩهड़͕গͳ͍ͷͱςϯϓϨʔτϔϧύ͕ଟ͍ͷ͸ָ

Slide 16

Slide 16 text

$44 w {{pageName}}--{{blockName}}__{{modifierName}}  ͰCSSηϨΫλΛ౷Ұͯ͠ɺϖʔδ͝ͱʹݻ༗ͷηϨΫλʹ w mixinΛ࢖ͬͯ಺෦తʹಉ͡ελΠϧΛ؅ཧ  ʢ͜ͷ͋ͨΓͷઃܭ͸·͍͔ͨͭ࿩͍ͨ͠Ͱ͢Ͷʣ w ΊΜͲ͏ͳͷͰશ෦ϑΝΠϧʹͨ͠ɺkB͘Β͍͋Δʜ w ECSSͱ͔FLOCSSͱ͔ʹண૝Λಘͯຐվ଄ͨ͠

Slide 17

Slide 17 text

ผϦϙδτϦʹͯ͠Ͳ͏ͩͬͨʁ w CSSΛ࠷৽masterͷঢ়ଶͰຖ౓Ϗϧυͯ͠ΞϓϦέʔγϣϯʹ͍࣋ͬͯ͘ ͷ͕compressedͳͷͰࠩ෼͕͋ͬͯΔ͔Θ͔Βͳ͍ w खݩͰϏϧυͨ͠ͱ͖ʹ͏͔ͬΓmaster͕࠷৽͡Όͳ͍ͱσάϨ͢Δ w ͭ·ΓσάϨͨ͠ͱ͍͏͜ͱͰ͢ w ֤͕ࣗΞϓϦέʔγϣϯͷ؀ڥߏஙΛ͠ͳͯ͘΋मਖ਼ରԠ͓ͯ͠٬͞Μɾ σΟϨΫλʔʹ֬ೝͯ͠΋Β͑Δͷ͸ָͩͬͨ

Slide 18

Slide 18 text

ਖ਼௚ϦϙδτϦ͸ͭʹ͍ͨ͠

Slide 19

Slide 19 text

w Ξηοτʹશ෦ೖΕ͓͍ͯͯɺDocumentRootΛ੾Γସ͑ͯσϓϩΠͰ͖ ͨΒϦϙδτϦͭͰΠϯελϯεผʹͰ͖ΔͷͰ͸ʁ w HerokuͰ͸ProcﬁleΛͲ͏ʹ͔͢Ε͹Ͱ͖ͦ͏ʂ

Slide 20

Slide 20 text

࣮Ҋ݅ͱϞοΫΞοϓ 02

Slide 21

Slide 21 text

ϚΠϖʔδܥWebΞϓϦ w ݩ͸ϚΠϖʔδͷͳ͍WordPressαΠτ w Ծొ࿥ˠຊొ࿥ˠొ࿥৘ใͷมߋ͕Ͱ͖ΔܥͷWebΞϓϦʹϦχϡʔΞϧ w ϚΠϖʔδ֎ʹ΋ίϯςϯπ͕͋Δ w ϦχϡʔΞϧલ͔ΒϞοΫΞοϓϦϙδτϦ͕ผͰଘࡏ w ը໘਺͸ऑʢશ෦1$41ผͳͷͰ࣮࣭ʣˠϦχϡʔΞϧͰഒ͘Β͍ w ͬͪ͜΋్தͰσβΠφʔୀ৬ˠผͷύʔτφʔ͞ΜʹҾ͖ܧ͗

Slide 22

Slide 22 text

ํ਑ w ϦϙδτϦΛ౷Ұͯ͠ΈΑ͏ w ಉ͡ιʔεϕʔεͷGitϦϙδτϦ͔ΒɺϞοΫ؀ڥɾεςʔδϯάΛͦ ΕͧΕHerokuͰσϓϩΠ͍ͨ͠ʢReview Appsʣ w Review AppsɿPull Request͝ͱʹΠϯελϯε্ཱ͕͕ͪΔ w ຊ൪͸AWS EC2

Slide 23

Slide 23 text

ߏ੒ w ຊମ͸Laravel • ejs w SCSSautopreﬁxer • gulp

Slide 24

Slide 24 text

FKT w extend͕ͳ͍ͱ͜ΜͳʹͭΒ͍ͷ͔ʂ w <%= %>ɺJIS഑ྻͩͱΊͬͪΌଧͪͮΒ͍ؾ͕͢Δ w ػೳ໘Ͱ͍͏ͱੵۃతʹ࠾༻͢Δཧ༝͋Μ·Γͳͦ͞͏  ʢҊ݅։࢝౰ॳʹ͓ئ͍ͨ͠ϚʔΫΞοϓͷํ͕pug࢖ͬͯͳ͔ͬͨʣ

Slide 25

Slide 25 text

ϦϙδτϦΛ·ͱΊΔ w ejsςϯϓϨʔτΛSFTPVSDFTBTTFUTUFNQMBUFTʹ w SCSSΛSFTPVSDFTBTTFUTTUZMFTIFFUTʹ w ຊ൪༻Ϗϧυ͸QVCMJDDTTʹ w ϞοΫΞοϓ༻ʹผͷDocRootͱͯ͠NPDLΛ࡞੒ w ը૾ͱ͔͸શ෦QVCMJD͔ΒNPDLʹίϐʔ͢ΔλεΫΛHVMQͰ࡞੒ w DocRoot͸؀ڥม਺Ͱ੾Γସ͑Δ  ʢࢀߟɿIUUQTRJJUBDPNVTLJUFNTFDGFʣ

Slide 26

Slide 26 text

Heroku Pipeline w develop / staging / productionͷͲ͜ʹAppΠϯελϯεΛ഑ஔͯ͠Ͳ͜ʹίʔ υΛద༻͢Δ͔Λ੍ޚͰ͖Δ w Review AppsΛ࢖ͬͯɺ  Pull Request͕͋ͬͨΒdevelopʹରԠ͢ΔAppΠϯελϯεΛࣗಈͰཱͯ  masterʹpush͞ΕͨΒstagingͷAppʹࣗಈσϓϩΠ  productionʹ͸खಈͰϘλϯԡͯ͠promoteͤ͞ΔΈ͍ͨͳ࢖͍ํ w ผͷMeetupͰ͠Ό΂ͬͨͷͰࢀߟ·Ͱʹ  IUUQTTQFBLFSEFDLDPNLVTBNBPVTJOHIFSPLVPOFOUSVTUFEEFWFMPQNFOU

Slide 27

Slide 27 text

Review Apps w Review AppsͰʮϞοΫͷPull Requestʯͱʮ௨ৗͷPull RequestʯΛݟ෼ ͚ͯ؀ڥม਺Λ੾Γସ͑ΒΕͳ͍ w ͭ·ΓɺͻͱͭͷPipeline͔ΒͷReview Apps͸ϞοΫ༻͔௨ৗͷ։ൃ ༻Ͳ͔ͬͪʹ͔͠ద༻Ͱ͖ͳ͍ w ࠓߋ͚ͩͲɺPipelineΛ෼͚Ε͹͜Μͳ͜ͱ͸ඞཁͳ͔ͬͨ  ʢ͜Εॻ͍ͯΔͱ͖·Ͱؾ͕෇͔ͳ͔ͬͨʣ

Slide 28

Slide 28 text

։ൃதʙӡ༻ w ։ൃॳظ w ࠷ॳ͸ϞοΫ͕Review AppsͰ࡞੒͞ΕΔΑ͏ʹ͍ͯͨ͠ w ·ͩΞϓϦଆ͸΄ͱΜͲ৮ͬͯͳ͍ঢ়ଶ w ։ൃޙظ w ΞϓϦଆΛReview AppsͰදࣔ͞ΕΔΑ͏ʹมߋ w ͋ͱ͔Βݟͨ໨ͷௐ੔͕͋ͬͯͪΐ͍ͪΐ͍Ϛʔδ͔ͯ͠ΒνΣοΫͯͨ͠ w Ϗϧυͨ͠CSSΛ࣋ͬͯ͜ͳ͍͍ͯ͘ͷ͸͔ͳΓָʢCSS͕ͦ΋ͦ΋ϑΝΠϧ਺ଟ͍ʣ

Slide 29

Slide 29 text

ϦϦʔεޙ w ϚΠϖʔδ಺͕ϩʔΧϧͰ֬ೝͰ͖ͳ͍ਓ͕͍ͨ w ϞοΫΛಉ͡ςϯϓϨʔτߏ଄ʹ͓͍ͯͯ͠΋ɺ࣮ࡍͷಈ࡞Λ֬ೝͰ͖ ͳ͍ͷ͸ͭΒ͍ w ϞοΫΛ࠷৽ʹอ͓ͬͯ͜͏ͱ͢ΔͱPull Request͕ͱ͔ʹ ͳͬͯϨϏϡϫʔ͕ԕ͍໨Λ͢Δ

Slide 30

Slide 30 text

Θ͔͖ͬͯͨͧ

Slide 31

Slide 31 text

ΈΜͳͰ҆શʹ։ൃ͢Δ ͦ΋ͦ΋σβΠϯΧϯϓɾϓϩτλΠϓΛߋ৽͠ͳ͍ͱӡ༻͕ͭΒ͍ ΋͠σβΠϯΧϯϓΛߋ৽͠ͳ͍ͷͩͱͨ͠ΒɺϩʔΧϧ΍ϦϞʔτͰ ୭Ͱ΋֬ೝͰ͖ΔΑ͏ʹ͓͍ͯͯ͠ɺ؆୯ʹࢼͤΔΑ͏ʹ͓ͯ͘͠ ϑΝΠϧΛίϐʔͯ͠ผͷϦϙδτϦʹ͍࣋ͬͯ͘ͷ͸΋͏΍ΊΑ͏ ϞοΫΞοϓͱ࠷ऴతͳςϯϓϨʔτͷॻ͖ํ͕ҧ͏ͷ͸εΠονϯά ίετ΋͔͔Δ͠ϛε΋૿͑Δ

Slide 32

Slide 32 text

ελΠϧΨΠυͱϞοΫΞοϓ w ελΠϧΨΠυ͋ΔͳΒଟ෼લఏ͕͍Ζ͍Ζҧ͏ w ͦ΋ͦ΋ΨΠυ͕มΘΔͷ͸େৎ෉ͳͷ͔ͱ͍͏ͷ͸ͱ΋͔͘ɺมߋͷ൓ өͱ͔ߟ͑ΔͱΠϯελϯεཱ͕ͬͯͯಉ͡ιʔεϕʔε͡Όͳ͍ͱݫ͠ ͦ͏ w ελΠϧΨΠυ͋Ε͹ϞοΫΞοϓ͕͍Βͳ͍ͷ͔Ͳ͏͔͸ɺ͍Βͳ͍ؾ ΋͢Δʢ΍ͬͨ͜ͱͳ͍͔Βڭ͑ͯ͘Εʂʂʂʂʣ

Slide 33

Slide 33 text

͜Ε͔Βͷํ਑ w ϞοΫΞοϓΛͲ͜·Ͱอ͓͔࣋ͯ͘͠ΛઌʹΑ͘ߟ͑Δ w ͳ͋ͳ͋Ͱӡ༻͠ͳ͍ w ελʔτͨ͠Βଟ෼͍Βͳ͍͸ͣ w ΋͠ӡ༻͢ΔͳΒɺϦϙδτϦ͸ͭʹ͍ͨ͠ʢҊ݅ʹ΋ΑΔ͕ʣ w Ͱ͖Ε͹ΞϓϦͰ࢖͏ςϯϓϨʔτΤϯδϯͰ࡞ͬͨ΄͏͕͍͍

Slide 34

Slide 34 text

ͨͱ͑͹LaravelͳΒ w ࠷ॳ͔ΒbladeͰॻ͘ w ίʔσΟϯά୲౰ͷͻͱʹLaravelΛଟগ͕Μ͹ͬͯ΋Β͏ඞཁ͕͋Δ w Ͱ΋ͦͷޙͷमਖ਼ͱ͔΋͠΍͍͢ͷͰ͸ w ΍͸Γ୭ͷ؀ڥͰ΋ಈ͘։ൃ؀ڥis preciousʜ

Slide 35

Slide 35 text

ͨͱ͑͹LaravelͳΒ w ؀ڥม਺ͰproductionҎ֎ ͷͱ͖ʹಈ͘ϞοΫ༻ͷϧʔ τΛ࡞͓ͬͯ͘ w ˠDocRoot੾Γସ͑ͳ͘ ͍͍ͯʂ w ˠgulpͱ͔࢖Θͣʹ laravel-mix͚ͩͰ͍͍ʁ

Slide 36

Slide 36 text

ͱ͜ΖͰͲ͏͍͏  ෼ۀͯ͠·͔͢

Slide 37

Slide 37 text

w σβΠφʔ͸ϚʔΫΞοϓ͢Δʁ͠ͳ͍ʁ w ϑϩϯτΤϯυΤϯδχΞ͸View΁ͷ૊ΈࠐΈ͢Δʁ͠ͳ͍ʁ w όοΫΤϯυΤϯδχΞ͸CSS৮Δʁ৮Βͳ͍ʁʢ৮Γͨ͘ͳ͍ʁʣ w ͦ΋ͦ΋ϑϩϯτΤϯυͱ͔όοΫΤϯυͱ͔͠ΌΒͤ͑͘ʁ  ΦϨ͕શ෦΍ͬͯ΍Δͥʁ

Slide 38

Slide 38 text

41"ͩͬͨΒʁ w ݸਓతʹ͸࠷ॳ͔ΒΨϦΨϦॻ͍ͨ΄͏ָ͕ w ͱ͸͍͑ɺ͢Ͱʹ΍ͬͨ͜ͱ͕͋Δ͔Βͳͷ͔΋ w σβΠφʔ͞Μ͕ίʔυॻ͘ͳΒ࡞Δ͔΋͠Εͳ͍ʜʜʁ

Slide 39

Slide 39 text

ͬ͘͟Γ·ͱΊΔͱ w ΞϓϦέʔγϣϯͷςϯϓϨʔτΛ࡞Δͱ͖ʹϞοΫΞοϓͭ͘ΔલఏͰ w ϞοΫΞοϓΛ͍ͭ·Ͱอ࣋͢Δͷ͔֬ೝ w σβΠϯΧϯϓ΍ϓϩτλΠϓ͸ߋ৽͞ΕΔͷ͔֬ೝ w ୭Ͱ΋ݟΒΕΔঢ়ଶʹ͓ͯ͘͠΂͖͔֬ೝ w ΞϓϦέʔγϣϯͷςϯϓϨʔτΤϯδϯΛ࢖͏΄͏ָ͕ w ίʔυϕʔεΛ෼͚ͯϑΝΠϧΛίϐʔ͢Δͷ͸ࣄނΓ΍͍͢ͷͰ΍ΊΑ͏

Slide 40

Slide 40 text

ϞοΫΞοϓΛ࡞Δ໨త w ϞοΫαʔόͷΑ͏ʹɺͰ͖ͯͳ͍ͱ͜ΖΛ୅ସ͢Δ w ઌʹਫ਼៛ͳ΋ͷΛ࡞ͬͯΫϦΤΠςΟϒͷίϛϡχέʔγϣϯΛ׆ൃԽ͞ ͤΔ w ΋͘͠͸ɺσβΠϯҰཡͷ୅ସ w ෼ۀ͢ΔͨΊʹͰ͖Δͱ͜Ζ·Ͱ΍ͬͯ΋Β͏