Making mock-up in web application

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

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

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

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

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

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

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

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

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

࣮Ҋ݅ͱϞοΫΞοϓ 01

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

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

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

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

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

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

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

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

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

࣮Ҋ݅ͱϞοΫΞοϓ 02

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

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

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

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

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

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

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

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

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

Θ͔͖ͬͯͨͧ

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

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

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

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

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

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

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

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

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

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

ελΠϧΨΠυͷ࿩ͱ͔  ฉ͖͍ͨͷͰͥͻ#03Ͱ଴ͬͯΔͥʂʂʂ

͋Γ͕ͱ͏͍͟͝·ͨ͠

Making mock-up in web application

Making mock-up in web application

More Decks by Kusamao Abe

Other Decks in Programming

Featured

Transcript