Tweet
Tweet

Slide 1

Slide 1 text

)5.-ɾ$.4͔Βߟ͑ΔίϯϙʔωϯτԽʹ͍ͭͯ Frontend Nagoya #3 2018.01.27 (౔) at ϕʔεΩϟϯϓ໊ݹ԰

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

ܽߤܾఆޙʹ੖Εʂ ࡳຈ͔Β໊ݹ԰ʹདྷΔͷʹɻɻɻ ͔͔࣌ؒΓ·ͨ͠ʂʂʂ

Slide 4

Slide 4 text

ొஃܾఆͷ࢝·Γɻɻ ʢ›Ϝ›Aʣʮ݄̍Ջʁʁʯ

Slide 5

Slide 5 text

ɾؔޱ༐थ ɾגࣜձࣾ)".803,4ϑϩϯτΤϯυΤϯδχΞ ɾओͳۀ຿ɿ)5.-ɾ$44ɾ+BWB4DSJQUɾ$.4ߏங ɾ޷͖ͳ$.4ɿ.PWBCMF5ZQFɾ$SBGUDNT ɾ5XJUUFSɿ!SFEBNPPO ɾ(JUIVCɿSFEBNPPO

Slide 6

Slide 6 text

IUUQTSFEBNPPOOFU

Slide 7

Slide 7 text

ࠓ೔࿩͢͜ͱͱ࿩͞ͳ͍͜ͱ

Slide 8

Slide 8 text

࿩͢͜ͱͱ࿩͞ͳ͍͜ͱ ɾίϯϙʔωϯτԽʹ͍ͭͯͷ֓೦త΍ߟ͑ํͳ࿩ ɾۀ຿ϫʔΫϑϩʔʹϑΥʔΧεͨ͠಺༰ ɾ$.4Խ͢Δલஈ֊Ͱ)5.-͕Ͳ͏͋Δ΂͖͔ ˙࿩͞ͳ͍͜ͱ ˙࿩͍ͨ͜͠ͱ

Slide 9

Slide 9 text

$.4Խ·Ͱͷ޻ఔ σβΠϯ ΫϥΠΞϯτʹఏग़͢ΔඞཁͳϖʔδͷσβΠϯ੍࡞ ίʔσΟϯάʢϓϨϏϡʔ༻ʣ ΫϥΠΞϯτʹઌߦͯ͠ݟ͓ͤͯ͘੩తͷϖʔδ $.4Խ $.4ಠࣗͷςϯϓϨʔτه๏ʢλάͳͲʣʹԊͬͨܗͰ૊ΈࠐΉ

Slide 10

Slide 10 text

$.4Խ͢ΔͨΊʹ͸ʁ

Slide 11

Slide 11 text

)5.-σʔλ $.4Խ )5.-σʔλΛ$.4ಠࣗλάɾςϯϓϨʔτʹม׵ )5.-͸͔ͳΒͣඞཁͳ޻ఔ $.4Խ͢ΔͨΊʹ͸ʁ

Slide 12

Slide 12 text

<figure class="card__element"> <figcaption>Ωϟϓγϣϯ01ͷςΩετΩϟϓγϣϯ01ͷςΩετ Ωϟϓγϣϯ01ͷςΩετ Ϙλϯ01
<figure class="card__element"> <figcaption>Ωϟϓγϣϯ02ͷςΩετΩϟϓγϣϯ02ͷςΩετ Ωϟϓγϣϯ02ͷςΩετ Ϙλϯ02
)5.-σʔλ

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

$.4Խʢ.PWBCMF5ZQFͷྫʣ Layout Card Block Component
"> <figure class="card__element"> <figcaption> " alt=""> ">

Slide 15

Slide 15 text

$.4Խʢ.PWBCMF5ZQFͷ৔߹ʣग़ྗ Layout Card Block Component Output

Slide 16

Slide 16 text

੩తίʔσΟϯά͔Β$.4Խ͢Δཧ༝

Slide 17

Slide 17 text

੩తίʔσΟϯά͔Β$.4Խ͢Δཧ༝ ɾαʔό͕༻ҙ͞Εͯͳ͍έʔεʢҊ݅ʹΑͬͯఏڙλΠϛϯά͸ҟͳΔʣ ɾίʔσΟϯά্ͷόάͳͲΛۃྗແͨ͘͢Ίʢख໭ΓΛ࠷খݶʹ͢Δʣ ɾ֬ೝݩʢΫϥΠΞϯτ΍൛ݖݩͳͲʣ͕ଟ͍έʔεʢେखͷӡ༻ʣ ɾผ$.4ʹ8&#αΠτΛҠߦ͢ΔέʔεʢϦχϡʔΞϧͰ͸ͳ͍ϨΞͳέʔεʣ

Slide 18

Slide 18 text

ίʔσΟϯάͷ඼࣭͕$.4Խͷ඼࣭ʹ΋Өڹ͢Δ

Slide 19

Slide 19 text

ݱ৔ͷྲྀΕʢࣗ෼͕ۀքೖͬͨࠒ͘Β͍ʣ ɾඞཁͳϖʔδͷσβΠϯΛ͢Δ ɾϏδϡΞϧʹඞཁͳϘλϯը૾ͳͲͷॻ͖ग़͠FUD ɾඞཁͳϖʔδΛେྔʹίʔσΟϯάʢ࣌ʹ͸Կສϖʔδ΋͠͹͠͹ʣ ɾίʔσΟϯάσʔλΛ$.4ԽʢςʔϚԽʣ

Slide 20

Slide 20 text

࠷ۙͷίʔσΟϯάۀ຿ͷݱ৔͸ʁ ੩తαΠτδΣωϨʔλΛ࢖༻͢Δ͜ͱͰ ۀ຿ͷޮ཰ԽΛਤΔ͜ͱ͕ҰൠԽ͞Ε͖ͯͨ

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

)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) %}
<figure class="card__element"> <figcaption>{{ _base_card_text }} {{ _base_card_text }} {{ _base_card_button-name }}
{% endmacro %}

Slide 23

Slide 23 text

)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') }}

Slide 24

Slide 24 text

%&.0

Slide 25

Slide 25 text

੩తαΠτδΣωϨʔλΛ࢖͏͜ͱͰมΘͬͨ͜ͱ ɾඞཁͳେྔϖʔδ΍ϨΠΞ΢τΛ࡞Βͣʹߏ଄ͷύʔπԽ͕Մೳ ɾมߋՕॴͷࠩ෼Λඞཁ࠷௿ݶʹͳͬͨ ɾ$.4Խͤͣʹ)5.-͚ͩͰ؅ཧɾӡ༻΋Մೳ ɾ$.4Խͷ޻ఔͰඞཁͳϩδοΫͳͲͷݟ௨͕͠ྑ͘ͳͬͨ

Slide 26

Slide 26 text

஋ͱߏ଄ͷ෼ׂ

Slide 27

Slide 27 text

஋ͱߏ଄ͷ෼ׂ
<figure class="card__element"> <figcaption>Ωϟϓγϣϯ01ͷςΩετΩϟϓγϣϯ01ͷςΩετ Ωϟϓγϣϯ01ͷςΩετ Ϙλϯ01
ɾߏ଄ʢ)5.-ʣͷ؅ཧΛҰͭʹ·ͱΊΔ ɾ஋͸೚ҙͰมߋՄೳʹ͢Δ ɾ܁Γฦ͢෦෼͸ϧʔϓͳͲΛ׆༻͢Δ

Slide 28

Slide 28 text

Ͳ͏͍ͬͨ෦෼Λ ίϯϙʔωϯτԽ͓ͯ͘͠ͷ͕͍͍ͷ͔ʁ ɾݟग़͠ ɾςΩετͷ૷০ ɾ൚༻తͳϒϩοΫϨΠΞ΢τ ɾϘλϯ ɾهࣄͷϦετFUD ࢖༻ස౓͕ଟ͍)5.-σʔλΛίϯϙʔωϯτԽ͓ͯ͘͠

Slide 29

Slide 29 text

෦඼Խ͞Εͨ)5.- $.4Խ ੩తαΠτδΣωϨʔλͰ෦඼Խ͞Εͨ )5.-Λݩʹ$.4Խ͍ͯ͘͠ ݱࡏͷߏஙϑϩʔ

Slide 30

Slide 30 text

ίϯϙʔωϯτԽͨ͠)5.-ͷϝϦοτ ɾ)5.-มߋʹରԠ͠΍͍͢ ɾσʔλͷఆٛ͸ଞͷҊ݅ͷίʔσΟϯάͰ΋࢖༻Մೳ ɾύʔπԽ͞Ε͍ͯΔ͜ͱͰ$.4ͷ૊ΈࠐΈ͠΍͍͢ ɾύʔπ໊ͷ໋໊͕͢Ͱʹܾ·͍ͬͯΔͨΊམͱ͠ࠐΈ΍͍͢

Slide 31

Slide 31 text

ίʔσΟϯάσʔλͱ$.4ͱ ྑ͍ؔ܎Ͱ͋Γ͍ͨͰ͢Ͷ

Slide 32

Slide 32 text

IUUQTNP[JMMBHJUIVCJPOVOKVDLT IUUQTHJUIVCDPNSFEBNPPOGSPOUFOEOBHPZBWPM IUUQTHJUIVCDPNSFEBNPPONUUIFNFTUBSUFSLFU IUUQTSFEBNPPOOFU