Making mock-up in web application

Transcript

1. ϞοΫΞοϓɺ Ͳ͏ӡ༻͢Δʁ 2018/08/04 JAM plus #02 at tambourine commune
2. ҆෦
   ૲ຑੜ
 Kusamao Abe גࣜձࣾλϯόϦϯ
   ʢtambourine.incʣ
   ɾςΫχΧϧσΟϨΫλʔ
 ɾWebΤϯδχΞ
   
3. JAM plusͷ͓͞Β͍ w JAMελοΫˠJavaScript
   
   API
   
   MarkUp
   Β͍͠
   w MEANελοΫͱ͔LAMPͱ͔ͦ͏͍͏΍ͭ
 ϑϩϯτΤϯυΛࢦ͢Β͍͠
   w plusͬͯԿˠ͜ͷϏϧͷ໊લ͕ϓϥεϏϧ
   w ϩΰͱ͔΄͍͠ؾ͕͢Δ
4. Web੍࡞ʹ͓͚ΔϚʔΫΞοϓ ϫΠϠʔϑϨʔϜ σβΠϯΧϯϓ࡞੒ ϚʔΫΞοϓ WebαΠτ੍࡞ WebΞϓϦέʔγϣϯ੍࡞ σβΠϯΧϯϓ࡞੒ ϚʔΫΞοϓ γεςϜઃܭ ϓϩάϥϛϯά ςετ ཁ݅ఆٛ ϫΠϠʔϑϨʔϜ
5. ϞοΫΞοϓΛ࡞Δ w ϞοΫΞοϓʢmock-upʣɿ࣮෺ͱಉ͡େ͖͞ʹ࡞ͬͨ໛ܕɻݪੇ໛ܕɻ
   w ਫ਼៛ͳ໛ܕΛ࡞Δ͜ͱͰɺ࣮ࡍʹ࣮૷ͯ͠Έͯग़ͯ͘Δ໰୊఺Λ௵ͨ͠Γɺ ࣮ݱՄೳੑΛνΣοΫͨ͠Γ
   w ITۀքͰ͸ଞͷ࡞ۀϓϩηεʹґଘͤͣʹ੍࡞ΛਐΊ͓͍ͯͯɺޙ͔Βଞ ͷϓϩηεͱ૊Έ߹ΘͤΔ͜ͱ΋
6. ଞͷۀքͰ͸ w ਎ۙͳͱ͜ΖͰ͍͑͹ܞଳి࿩ɾεϚʔτϑΥϯͷళ಄ϞοΫΞοϓ
   w ݐஙۀքͰ΋ɺઃܭਤͲ͓Γʹ࡞ΕΔ͔ΛνΣοΫͨ͠Γ
   w ߤۭػͳͲͰ΋
7. 5IF
   (PMEFO
   )BOET
   PG
   7BO
   $MFFG
   
   "SQFMT
   c
   :BU[FS
   IUUQTXXXZBU[FSDPNHPMEFOIBOETWBODMFFGBSQFMT l5IF
   NPDLVQ
   TUVEJP
   "GUFS
   UIF
   ESBXJOH
   SPPN
   UIF
   KFXFM
   EFTJHO
   NBLFT
   JUT
   XBZ
   UP
   UIF
   
   NPLF VQ
   XPSLTIPQ
   XIFSF
   FYQFSJFODFE
   NPDLVQNBLFST
   DSFBUF
   B
   NPDLVQ
   PG
   UIF
   KFXFM
   VTJOH
   QFXUFS
   BOE
   TUSBTT
   DSZTUBMT
   SIJOFTUPOFT 
   5IJT
   JT
   BO
   JNQPSUBOU
   QIBTF
   JO
   UIF
   EFTJHO
   QSPDFTT
   CFDBVTF
   UIF
   EFTJHOFS
   DBO
   TFF
   IJTIFS
   ESBXJOH
   DPNF
   UP
   MJGF
   XJUIPVU
   XBTUJOH
   QSFDJPVT
   NBUFSJBMT
   BOE
   UIF
   KFXFMMFST
   DBO
   UFTU
   UIF
   XFJHIU
   NPWFNFOU
   BOE
   TIBQF
   PG
   B
   KFXFM
   CFGPSF
   UIFZ
   TUBSU
   XPSLJOH
   PO
   UIF
   SFBM
   QJFDF
   7BO
   $MFFG
   
   "SQFMT
   JT
   QFSIBQT
   UIF
   POMZ
   KFXFMMFSZ
   IPVTF
   JO
   UIF
   XPSME
   UIBU
   QSPWJEFT
   JUT
   UFBN
   XJUI
   UIF
   MVYVSZ
   PG
   B
   NPDLVQNBLJOH
   TUVEJP
   UIVT
   FOIBODJOH
   UIF
   DPNNVOJDBUJPO
   CFUXFFO
   EFTJHOFST
   BOE
   KFXFMMFST
   BOE
   BMMPXJOH
   SPPN
   GPS
   UFTUJOH
   BOE
   DSFBUJWF
   FYQFSJNFOUBUJPOz
8. WebΞϓϦέʔγϣϯͱϞοΫ w σβΠϯΧϯϓ͚ͩͰ͸ೖग़ྗͷΠϯλϥΫγϣϯ੍࡞΍ύλʔϯͷ໢ཏ ͕Ή͔͍ͣ͠
   w ϓϩτλΠϐϯάπʔϧͷ୆಄ͰɺͲ͏ಈ͘΂͖͔ͱ͍͏ͷ͕࡞Γ΍͢ ͘͸ͳ͖ͬͯͨ
   w ϚʔΫΞοϓ࣌఺Ͱ΋ͦͷύλʔϯɺ͍ΔΑͶʁ
   w όοΫΤϯυଆͷϩδοΫ͕Ͱ͖ͯͳͯ͘΋ਐΊ͓͖͍ͯͨΑͶ
9. ྫ A
   ʮ͜Εهࣄͳ͍ͱ͖ͷύλʔϯͲ͏͢Ε͹ ͍͍Ͱ͔͢ʁʯ
   B
   ʮ͋ͬɺͲ͏͠Α͔ͬʙʯ
10. ࣮Ҋ݅ͱϞοΫΞοϓ 01
11. ECαΠτ w ؅ཧը໘আ͍ͯύλʔϯ΄Ͳͷը໘͕ඞཁ
    w PC൛ͷΈͷ੍࡞ͰOK • αʔόαΠυΞϓϦέʔγϣϯ
12. w ϚʔΫΞοϓͱView΁ͷ૊ΈࠐΈɾ࣮૷୲౰ऀ͕ผ
    w σβΠφʔ͕ுΓ෇͍͍ͯΔҊ݅Ͱ͸ͳ͔ͬͨʢ΢νͰ͸Α͋͘Δʣ
    w ը໘ઃܭˠσβΠϯˠϚʔΫΞοϓ
    w جຊઃܭˠৄࡉઃܭˠ࣮૷ɹͷ͕ͭฒߦՔಇ
    w σβΠφʔɿɹϑϩϯτΤϯυɿɹόοΫΤϯυɿ͍ͬͺ͍ ˠσβΠφʔ͕ΧϯϓΛߋ৽͚ͭͮ͠ΔΘ͚Ͱ͸ͳ͍
    ˠʢ݁ՌతʹʣσβΠφʔ͕ϓϩδΣΫτ్தͰୀ৬
13. ํ਑ w ࣮૷͠ऴ͑Δ·Ͱ͸ϞοΫΞοϓΛʮਖ਼ʯͱͯ͠νΣοΫ
    w ͍ͭͰ΋୭Ͱ΋֬ೝͰ͖ΔΑ͏ʹɺϞοΫΞοϓͷΠϯελϯεΛཱͯΔ
    w ˠϞοΫΞοϓΛΞϓϦέʔγϣϯͱผͷϦϙδτϦʹ
    w ݁Ռతʹผʹ͢΂͖ͩͬͨͷ͔࿦͕͋Δʢࣗ෼ͷͳ͔Ͱʣ
14. ߏ੒ w ຊମ͸Laravel
    • pug w SCSS
    
    autoprefixer
    • gulp
15. QVH w extend͠·ͬͨ͘ΒϏϧυ͕࣌ؒͲΜͲ͜૿͑Δ
    w ։ൃ࣌͸express
    middlewareͰϦΫΤετ͕དྷͨͷΛ
 HTMLʹͯ͠ฦͯ͠ɺඞཁͳͱ͖͚ͩϏϧυ͢ΔΑ͏ʹมߋ
    w svgΛinlineͰຒΊࠐΉͷʹinclude࢖͍·ͬͨ͘Βݟ௨͠͸ྑ͘ͳͬͨ͠ ϦΫΤετ΋ݮͬͨΜ͕ͩHTML͕ϋνϟϝνϟͳݟ௨͠ʹ
    w ͳΜ͔ͩΜͩهड़͕গͳ͍ͷͱςϯϓϨʔτϔϧύ͕ଟ͍ͷ͸ָ
16. $44 w {{pageName}}--{{blockName}}__{{modifierName}}
 ͰCSSηϨΫλΛ౷Ұͯ͠ɺϖʔδ͝ͱʹݻ༗ͷηϨΫλʹ
    w mixinΛ࢖ͬͯ಺෦తʹಉ͡ελΠϧΛ؅ཧ
 ʢ͜ͷ͋ͨΓͷઃܭ͸·͍͔ͨͭ࿩͍ͨ͠Ͱ͢Ͷʣ
    w ΊΜͲ͏ͳͷͰશ෦ϑΝΠϧʹͨ͠ɺkB͘Β͍͋Δʜ
    w ECSSͱ͔FLOCSSͱ͔ʹண૝Λಘͯຐվ଄ͨ͠
17. ผϦϙδτϦʹͯ͠Ͳ͏ͩͬͨʁ w CSSΛ࠷৽masterͷঢ়ଶͰຖ౓Ϗϧυͯ͠ΞϓϦέʔγϣϯʹ͍࣋ͬͯ͘ ͷ͕compressedͳͷͰࠩ෼͕͋ͬͯΔ͔Θ͔Βͳ͍
    w खݩͰϏϧυͨ͠ͱ͖ʹ͏͔ͬΓmaster͕࠷৽͡Όͳ͍ͱσάϨ͢Δ
    w ͭ·ΓσάϨͨ͠ͱ͍͏͜ͱͰ͢
    w ֤͕ࣗΞϓϦέʔγϣϯͷ؀ڥߏஙΛ͠ͳͯ͘΋मਖ਼ରԠ͓ͯ͠٬͞Μɾ σΟϨΫλʔʹ֬ೝͯ͠΋Β͑Δͷ͸ָͩͬͨ
18. ਖ਼௚ϦϙδτϦ͸ͭʹ͍ͨ͠
19. w Ξηοτʹશ෦ೖΕ͓͍ͯͯɺDocumentRootΛ੾Γସ͑ͯσϓϩΠͰ͖ ͨΒϦϙδτϦͭͰΠϯελϯεผʹͰ͖ΔͷͰ͸ʁ
    w HerokuͰ͸ProcfileΛͲ͏ʹ͔͢Ε͹Ͱ͖ͦ͏ʂ
20. ࣮Ҋ݅ͱϞοΫΞοϓ 02
21. ϚΠϖʔδܥWebΞϓϦ w ݩ͸ϚΠϖʔδͷͳ͍WordPressαΠτ
    w Ծొ࿥ˠຊొ࿥ˠొ࿥৘ใͷมߋ͕Ͱ͖ΔܥͷWebΞϓϦʹϦχϡʔΞϧ
    w ϚΠϖʔδ֎ʹ΋ίϯςϯπ͕͋Δ
    w ϦχϡʔΞϧલ͔ΒϞοΫΞοϓϦϙδτϦ͕ผͰଘࡏ
    w ը໘਺͸ऑʢશ෦1$41ผͳͷͰ࣮࣭ʣˠϦχϡʔΞϧͰഒ͘Β͍
    w ͬͪ͜΋్தͰσβΠφʔୀ৬ˠผͷύʔτφʔ͞ΜʹҾ͖ܧ͗
22. ํ਑ w ϦϙδτϦΛ౷Ұͯ͠ΈΑ͏
    w ಉ͡ιʔεϕʔεͷGitϦϙδτϦ͔ΒɺϞοΫ؀ڥɾεςʔδϯάΛͦ ΕͧΕHerokuͰσϓϩΠ͍ͨ͠ʢReview Appsʣ
    w Review AppsɿPull Request͝ͱʹΠϯελϯε্ཱ͕͕ͪΔ
    w ຊ൪͸AWS EC2
23. ߏ੒ w ຊମ͸Laravel
    • ejs w SCSS
    
    autoprefixer
    • gulp
24. FKT w extend͕ͳ͍ͱ͜ΜͳʹͭΒ͍ͷ͔ʂ
    w <%= %>ɺJIS഑ྻͩͱΊͬͪΌଧͪͮΒ͍ؾ͕͢Δ
    w ػೳ໘Ͱ͍͏ͱੵۃతʹ࠾༻͢Δཧ༝͋Μ·Γͳͦ͞͏
 ʢҊ݅։࢝౰ॳʹ͓ئ͍ͨ͠ϚʔΫΞοϓͷํ͕pug࢖ͬͯͳ͔ͬͨʣ
25. ϦϙδτϦΛ·ͱΊΔ w ejsςϯϓϨʔτΛ
    SFTPVSDFTBTTFUTUFNQMBUFT
    ʹ
    w SCSSΛ
    SFTPVSDFTBTTFUTTUZMFTIFFUT
    ʹ
    w ຊ൪༻Ϗϧυ͸
    QVCMJDDTT
    ʹ
    w ϞοΫΞοϓ༻ʹผͷDocRootͱͯ͠
    NPDL
    Λ࡞੒
    w ը૾ͱ͔͸શ෦
    QVCMJD
    ͔Β
    NPDL
    ʹίϐʔ͢ΔλεΫΛHVMQͰ࡞੒
    w DocRoot͸؀ڥม਺Ͱ੾Γସ͑Δ
 ʢࢀߟɿ
    IUUQTRJJUBDPNVTLJUFNTFDGF
    ʣ
26. Heroku Pipeline w develop / staging / productionͷͲ͜ʹAppΠϯελϯεΛ഑ஔͯ͠Ͳ͜ʹίʔ υΛద༻͢Δ͔Λ੍ޚͰ͖Δ
    w Review AppsΛ࢖ͬͯɺ
 Pull Request͕͋ͬͨΒdevelopʹରԠ͢ΔAppΠϯελϯεΛࣗಈͰཱͯ
 masterʹpush͞ΕͨΒstagingͷAppʹࣗಈσϓϩΠ
 productionʹ͸खಈͰϘλϯԡͯ͠promoteͤ͞ΔΈ͍ͨͳ࢖͍ํ
    w ผͷMeetupͰ͠Ό΂ͬͨͷͰࢀߟ·Ͱʹ
 IUUQTTQFBLFSEFDLDPNLVTBNBPVTJOHIFSPLVPOFOUSVTUFEEFWFMPQNFOU
27. Review Apps w Review AppsͰʮϞοΫͷPull Requestʯͱʮ௨ৗͷPull RequestʯΛݟ෼ ͚ͯ؀ڥม਺Λ੾Γସ͑ΒΕͳ͍
    w ͭ·ΓɺͻͱͭͷPipeline͔ΒͷReview Apps͸ϞοΫ༻͔௨ৗͷ։ൃ ༻Ͳ͔ͬͪʹ͔͠ద༻Ͱ͖ͳ͍
    w ࠓߋ͚ͩͲɺPipelineΛ෼͚Ε͹͜Μͳ͜ͱ͸ඞཁͳ͔ͬͨ
 ʢ͜Εॻ͍ͯΔͱ͖·Ͱؾ͕෇͔ͳ͔ͬͨʣ
28. ։ൃத
    ʙ
    ӡ༻ w ։ൃॳظ
    w ࠷ॳ͸ϞοΫ͕Review AppsͰ࡞੒͞ΕΔΑ͏ʹ͍ͯͨ͠
    w ·ͩΞϓϦଆ͸΄ͱΜͲ৮ͬͯͳ͍ঢ়ଶ
    w ։ൃޙظ
    w ΞϓϦଆΛReview AppsͰදࣔ͞ΕΔΑ͏ʹมߋ
    w ͋ͱ͔Βݟͨ໨ͷௐ੔͕͋ͬͯͪΐ͍ͪΐ͍Ϛʔδ͔ͯ͠ΒνΣοΫͯͨ͠
    w Ϗϧυͨ͠CSSΛ࣋ͬͯ͜ͳ͍͍ͯ͘ͷ͸͔ͳΓָʢCSS͕ͦ΋ͦ΋ϑΝΠϧ਺ଟ͍ʣ
29. ϦϦʔεޙ w ϚΠϖʔδ಺͕ϩʔΧϧͰ֬ೝͰ͖ͳ͍ਓ͕͍ͨ
    w ϞοΫΛಉ͡ςϯϓϨʔτߏ଄ʹ͓͍ͯͯ͠΋ɺ࣮ࡍͷಈ࡞Λ֬ೝͰ͖ ͳ͍ͷ͸ͭΒ͍
    w ϞοΫΛ࠷৽ʹอ͓ͬͯ͜͏ͱ͢ΔͱPull Request͕ 
    ͱ͔ʹ ͳͬͯϨϏϡϫʔ͕ԕ͍໨Λ͢Δ
30. Θ͔͖ͬͯͨͧ
31. ΈΜͳͰ҆શʹ։ൃ͢Δ  ͦ΋ͦ΋σβΠϯΧϯϓɾϓϩτλΠϓΛߋ৽͠ͳ͍ͱӡ༻͕ͭΒ͍
     ΋͠σβΠϯΧϯϓΛߋ৽͠ͳ͍ͷͩͱͨ͠ΒɺϩʔΧϧ΍ϦϞʔτͰ ୭Ͱ΋֬ೝͰ͖ΔΑ͏ʹ͓͍ͯͯ͠ɺ؆୯ʹࢼͤΔΑ͏ʹ͓ͯ͘͠
     ϑΝΠϧΛίϐʔͯ͠ผͷϦϙδτϦʹ͍࣋ͬͯ͘ͷ͸΋͏΍ΊΑ͏
     ϞοΫΞοϓͱ࠷ऴతͳςϯϓϨʔτͷॻ͖ํ͕ҧ͏ͷ͸εΠονϯά ίετ΋͔͔Δ͠ϛε΋૿͑Δ
32. ελΠϧΨΠυͱϞοΫΞοϓ w ελΠϧΨΠυ͋ΔͳΒଟ෼લఏ͕͍Ζ͍Ζҧ͏
    w ͦ΋ͦ΋ΨΠυ͕มΘΔͷ͸େৎ෉ͳͷ͔ͱ͍͏ͷ͸ͱ΋͔͘ɺมߋͷ൓ өͱ͔ߟ͑ΔͱΠϯελϯεཱ͕ͬͯͯಉ͡ιʔεϕʔε͡Όͳ͍ͱݫ͠ ͦ͏
    w ελΠϧΨΠυ͋Ε͹ϞοΫΞοϓ͕͍Βͳ͍ͷ͔Ͳ͏͔͸ɺ͍Βͳ͍ؾ ΋͢Δʢ΍ͬͨ͜ͱͳ͍͔Βڭ͑ͯ͘Εʂʂʂʂʣ
33. ͜Ε͔Βͷํ਑ w ϞοΫΞοϓΛͲ͜·Ͱอ͓͔࣋ͯ͘͠ΛઌʹΑ͘ߟ͑Δ
    w ͳ͋ͳ͋Ͱӡ༻͠ͳ͍
    w ελʔτͨ͠Βଟ෼͍Βͳ͍͸ͣ
    w ΋͠ӡ༻͢ΔͳΒɺϦϙδτϦ͸ͭʹ͍ͨ͠ʢҊ݅ʹ΋ΑΔ͕ʣ
    w Ͱ͖Ε͹ΞϓϦͰ࢖͏ςϯϓϨʔτΤϯδϯͰ࡞ͬͨ΄͏͕͍͍
34. ͨͱ͑͹LaravelͳΒ w ࠷ॳ͔ΒbladeͰॻ͘
    w ίʔσΟϯά୲౰ͷͻͱʹLaravelΛଟগ͕Μ͹ͬͯ΋Β͏ඞཁ͕͋Δ
    w Ͱ΋ͦͷޙͷमਖ਼ͱ͔΋͠΍͍͢ͷͰ͸
    w ΍͸Γ୭ͷ؀ڥͰ΋ಈ͘։ൃ؀ڥ
    is preciousʜ
35. ͨͱ͑͹LaravelͳΒ w ؀ڥม਺ͰproductionҎ֎ ͷͱ͖ʹಈ͘ϞοΫ༻ͷϧʔ τΛ࡞͓ͬͯ͘
    w ˠDocRoot੾Γସ͑ͳ͘ ͍͍ͯʂ
    w ˠgulpͱ͔࢖Θͣʹ laravel-mix͚ͩͰ͍͍ʁ
36. ͱ͜ΖͰͲ͏͍͏
 ෼ۀͯ͠·͔͢
37. w σβΠφʔ͸ϚʔΫΞοϓ͢Δʁ͠ͳ͍ʁ
    w ϑϩϯτΤϯυΤϯδχΞ͸View΁ͷ૊ΈࠐΈ͢Δʁ͠ͳ͍ʁ
    w όοΫΤϯυΤϯδχΞ͸CSS৮Δʁ৮Βͳ͍ʁʢ৮Γͨ͘ͳ͍ʁʣ
    w ͦ΋ͦ΋ϑϩϯτΤϯυͱ͔όοΫΤϯυͱ͔͠ΌΒͤ͑͘ʁ
 ΦϨ͕શ෦΍ͬͯ΍Δͥʁ
38. 41"ͩͬͨΒʁ w ݸਓతʹ͸࠷ॳ͔ΒΨϦΨϦॻ͍ͨ΄͏ָ͕
    w ͱ͸͍͑ɺ͢Ͱʹ΍ͬͨ͜ͱ͕͋Δ͔Βͳͷ͔΋
    w σβΠφʔ͞Μ͕ίʔυॻ͘ͳΒ࡞Δ͔΋͠Εͳ͍ʜʜʁ
39. ͬ͘͟Γ·ͱΊΔͱ w ΞϓϦέʔγϣϯͷςϯϓϨʔτΛ࡞Δͱ͖ʹϞοΫΞοϓͭ͘ΔલఏͰ
    w ϞοΫΞοϓΛ͍ͭ·Ͱอ࣋͢Δͷ͔֬ೝ
    w σβΠϯΧϯϓ΍ϓϩτλΠϓ͸ߋ৽͞ΕΔͷ͔֬ೝ
    w ୭Ͱ΋ݟΒΕΔঢ়ଶʹ͓ͯ͘͠΂͖͔֬ೝ
    w ΞϓϦέʔγϣϯͷςϯϓϨʔτΤϯδϯΛ࢖͏΄͏ָ͕
    w ίʔυϕʔεΛ෼͚ͯϑΝΠϧΛίϐʔ͢Δͷ͸ࣄނΓ΍͍͢ͷͰ΍ΊΑ͏
40. ϞοΫΞοϓΛ࡞Δ໨త w ϞοΫαʔόͷΑ͏ʹɺͰ͖ͯͳ͍ͱ͜ΖΛ୅ସ͢Δ
    w ઌʹਫ਼៛ͳ΋ͷΛ࡞ͬͯΫϦΤΠςΟϒͷίϛϡχέʔγϣϯΛ׆ൃԽ͞ ͤΔ
    w ΋͘͠͸ɺσβΠϯҰཡͷ୅ସ
    w ෼ۀ͢ΔͨΊʹͰ͖Δͱ͜Ζ·Ͱ΍ͬͯ΋Β͏
41. ελΠϧΨΠυͷ࿩ͱ͔
 ฉ͖͍ͨͷͰͥͻ
    #03
    Ͱ଴ͬͯΔͥʂʂʂ
42. ͋Γ͕ͱ͏͍͟͝·ͨ͠