HTML・CMSから考えるコンポーネント化について

Transcript

1. )5.-ɾ$.4͔Βߟ͑ΔίϯϙʔωϯτԽʹ͍ͭͯ Frontend Nagoya #3 2018.01.27 (౔) at ϕʔεΩϟϯϓ໊ݹ԰
3. ܽߤܾఆޙʹ੖Εʂ
   ࡳຈ͔Β໊ݹ԰ʹདྷΔͷʹɻɻɻ
   ͔͔࣌ؒΓ·ͨ͠ʂʂʂ
4. ొஃܾఆͷ࢝·Γɻɻ
   ʢ›Ϝ›Aʣʮ݄̍Ջʁʁʯ
5. ɾؔޱ
   ༐थ
   ɾגࣜձࣾ)".803,4
   ϑϩϯτΤϯυΤϯδχΞ
   ɾओͳۀ຿ɿ)5.-ɾ$44ɾ+BWB4DSJQUɾ$.4ߏங
   ɾ޷͖ͳ$.4ɿ.PWBCMF
   5ZQF
   ɾ$SBGU
   DNT
   
   ɾ5XJUUFSɿ!SFEBNPPO
   ɾ(JUIVCɿSFEBNPPO
6. IUUQTSFEBNPPOOFU
7. ࠓ೔࿩͢͜ͱͱ࿩͞ͳ͍͜ͱ
8. ࿩͢͜ͱͱ࿩͞ͳ͍͜ͱ ɾίϯϙʔωϯτԽʹ͍ͭͯͷ֓೦త΍ߟ͑ํͳ࿩ ɾۀ຿ϫʔΫϑϩʔʹϑΥʔΧεͨ͠಺༰
   ɾ$.4Խ͢Δલஈ֊Ͱ)5.-͕Ͳ͏͋Δ΂͖͔ ˙࿩͞ͳ͍͜ͱ ˙࿩͍ͨ͜͠ͱ
9. $.4Խ·Ͱͷ޻ఔ σβΠϯ
   ΫϥΠΞϯτʹఏग़͢ΔඞཁͳϖʔδͷσβΠϯ੍࡞ ίʔσΟϯάʢϓϨϏϡʔ༻ʣ
   ΫϥΠΞϯτʹઌߦͯ͠ݟ͓ͤͯ͘੩తͷϖʔδ $.4Խ
   $.4ಠࣗͷςϯϓϨʔτه๏ʢλάͳͲʣʹԊͬͨܗͰ૊ΈࠐΉ
10. $.4Խ͢ΔͨΊʹ͸ʁ
11. )5.-σʔλ $.4Խ )5.-σʔλΛ$.4ಠࣗλάɾςϯϓϨʔτʹม׵
    )5.-͸͔ͳΒͣඞཁͳ޻ఔ $.4Խ͢ΔͨΊʹ͸ʁ
12. <div class="card card--blue"> <figure class="card__element"> <figcaption>Ωϟϓγϣϯ01ͷςΩετΩϟϓγϣϯ01ͷςΩετ</figcaption> <img src="dummy01.jpg" alt="Ωϟϓγϣϯ01ͷςΩετ"> </figure> <a class="card__button" href=“/path/“>Ϙλϯ01</a> </div> <div class="card card--black"> <figure class="card__element"> <figcaption>Ωϟϓγϣϯ02ͷςΩετΩϟϓγϣϯ02ͷςΩετ</figcaption> <img src="dummy02.jpg" alt="Ωϟϓγϣϯ02ͷςΩετ"> </figure> <a class=“card__button" href=“/path/“>Ϙλϯ02</a> </div> )5.-σʔλ
14. $.4Խʢ.PWBCMF
    5ZQFͷྫʣ <mt:Ignore>Layout Card Block Component</mt:Ignore> <mt:SetVarTemplate name="_base_card" key="base_card" note="Layout Card Block Component"> <div class="card <mt:Var name="_base_card_class-modifier" />"> <figure class="card__element"> <figcaption><mt:Var name="_base_card_text" /></figcaption> <img src="<mt:Var name="_base_card_img" />" alt="<mt:Var name="_base_card_text" />"> </figure> <a class="card__button" href="<mt:Var name="_base_card_button-link" />"><mt:Var name="_base_card_button-name" /></a> </div> </mt:SetVarTemplate>
15. $.4Խʢ.PWBCMF
    5ZQFͷ৔߹ʣग़ྗ <mt:Ignore>Layout Card Block Component Output</mt:Ignore> <mt:Var name="_base_card" key="button" _base_card_class-modifier="card--blue" _base_card_text="Ωϟϓγϣϯ01ͷςΩετΩϟϓγϣϯ01ͷςΩετ" _base_card_img="dummy01.jpg" _base_card_button-link="/path/" _base_card_button-name="button_name" /> <mt:Var name="_base_card" key="button" _base_card_class-modifier="card--black" _base_card_text="Ωϟϓγϣϯ02ͷςΩετΩϟϓγϣϯ02ͷςΩετ" _base_card_img=“dummy02.jpg" _base_card_button-link="/path/" _base_card_button-name="button_name" />
16. ੩తίʔσΟϯά͔Β$.4Խ͢Δཧ༝
17. ੩తίʔσΟϯά͔Β$.4Խ͢Δཧ༝ ɾαʔό͕༻ҙ͞Εͯͳ͍έʔεʢҊ݅ʹΑͬͯఏڙλΠϛϯά͸ҟͳΔʣ
    ɾίʔσΟϯά্ͷόάͳͲΛۃྗແͨ͘͢Ίʢख໭ΓΛ࠷খݶʹ͢Δʣ
    ɾ֬ೝݩʢΫϥΠΞϯτ΍൛ݖݩͳͲʣ͕ଟ͍έʔεʢେखͷӡ༻ʣ
    ɾผ$.4ʹ8&#αΠτΛҠߦ͢ΔέʔεʢϦχϡʔΞϧͰ͸ͳ͍ϨΞͳέʔεʣ
18. ίʔσΟϯάͷ඼࣭͕$.4Խͷ඼࣭ʹ΋Өڹ͢Δ
19. ݱ৔ͷྲྀΕʢࣗ෼͕ۀքೖͬͨࠒ͘Β͍ʣ ɾඞཁͳϖʔδͷσβΠϯΛ͢Δ
    ɾϏδϡΞϧʹඞཁͳϘλϯը૾ͳͲͷॻ͖ग़͠
    FUD
    ɾඞཁͳϖʔδΛେྔʹίʔσΟϯάʢ࣌ʹ͸Կສϖʔδ΋͠͹͠͹ʣ
    ɾίʔσΟϯάσʔλΛ$.4ԽʢςʔϚԽʣ
20. ࠷ۙͷίʔσΟϯάۀ຿ͷݱ৔͸ʁ ੩తαΠτδΣωϨʔλΛ࢖༻͢Δ͜ͱͰ
    ۀ຿ͷޮ཰ԽΛਤΔ͜ͱ͕ҰൠԽ͞Ε͖ͯͨ
22. )5.-σʔλʢ/VOKVDLTͷ৔߹ʣ {# Layout Card Block Component #} {% macro _base_card(_base_card_class-modifier,_base_card_text,_base_card_img,_base_card_button- link,_base_card_button-name) %} <div class="card {{ _base_card_class-modifier }}"> <figure class="card__element"> <figcaption>{{ _base_card_text }}</figcaption> <img src="{{ _base_card_img }}" alt="{{ _base_card_text }}"> </figure> <a class="card__button" href="{{ _base_card_button-link }}"> {{ _base_card_button-name }} </a> </div> {% endmacro %}
23. )5.-σʔλʢ/VOKVDLTͷ৔߹ʣग़ྗ {# Layout Card Block Component Setting #} {% import '_partial/component.html' as component %} {# Layout Card Block Component Output #} {{ component._base_card('card--blue', 'text', 'dummy01.jpg' '/path/', 'button-name') }} {{ component._base_card('card--black', 'text', 'dummy02.jpg' '/path/', 'button-name') }}
24. %&.0
25. ੩తαΠτδΣωϨʔλΛ࢖͏͜ͱͰมΘͬͨ͜ͱ ɾඞཁͳେྔϖʔδ΍ϨΠΞ΢τΛ࡞Βͣʹߏ଄ͷύʔπԽ͕Մೳ
    ɾมߋՕॴͷࠩ෼Λඞཁ࠷௿ݶʹͳͬͨ
    ɾ$.4Խͤͣʹ)5.-͚ͩͰ؅ཧɾӡ༻΋Մೳ
    ɾ$.4Խͷ޻ఔͰඞཁͳϩδοΫͳͲͷݟ௨͕͠ྑ͘ͳͬͨ
26. ஋ͱߏ଄ͷ෼ׂ
27. ஋ͱߏ଄ͷ෼ׂ <div class="card card--blue"> <figure class="card__element"> <figcaption>Ωϟϓγϣϯ01ͷςΩετΩϟϓγϣϯ01ͷςΩετ</figcaption> <img src="dummy01.jpg" alt="Ωϟϓγϣϯ01ͷςΩετ"> </figure> <a class="card__button" href=“/path/“>Ϙλϯ01</a> </div> ɾߏ଄ʢ)5.-ʣͷ؅ཧΛҰͭʹ·ͱΊΔ
    ɾ஋͸೚ҙͰมߋՄೳʹ͢Δ
    ɾ܁Γฦ͢෦෼͸ϧʔϓͳͲΛ׆༻͢Δ
28. Ͳ͏͍ͬͨ෦෼Λ
    ίϯϙʔωϯτԽ͓ͯ͘͠ͷ͕͍͍ͷ͔ʁ ɾݟग़͠
    ɾςΩετͷ૷০
    ɾ൚༻తͳϒϩοΫϨΠΞ΢τ
    ɾϘλϯ
    ɾهࣄͷϦετ
    
    FUD ࢖༻ස౓͕ଟ͍)5.-σʔλΛίϯϙʔωϯτԽ͓ͯ͘͠
29. ෦඼Խ͞Εͨ)5.- $.4Խ ੩తαΠτδΣωϨʔλͰ෦඼Խ͞Εͨ
    )5.-Λݩʹ$.4Խ͍ͯ͘͠ ݱࡏͷߏஙϑϩʔ
30. ίϯϙʔωϯτԽͨ͠)5.-ͷϝϦοτ ɾ)5.-มߋʹରԠ͠΍͍͢
    ɾσʔλͷఆٛ͸ଞͷҊ݅ͷίʔσΟϯάͰ΋࢖༻Մೳ
    ɾύʔπԽ͞Ε͍ͯΔ͜ͱͰ$.4ͷ૊ΈࠐΈ͠΍͍͢
    ɾύʔπ໊ͷ໋໊͕͢Ͱʹܾ·͍ͬͯΔͨΊམͱ͠ࠐΈ΍͍͢
31. ίʔσΟϯάσʔλͱ$.4ͱ
    ྑ͍ؔ܎Ͱ͋Γ͍ͨͰ͢Ͷ
32. IUUQTNP[JMMBHJUIVCJPOVOKVDLT
    IUUQTHJUIVCDPNSFEBNPPOGSPOUFOEOBHPZBWPM
    IUUQTHJUIVCDPNSFEBNPPONUUIFNFTUBSUFSLFU
    IUUQTSFEBNPPOOFU