Tweet
Tweet

Slide 1

Slide 1 text

ຊ౰ʹඞཁͰ͔͢ʁͦͷ+BWB4DSJQU ʙεΫϩʔϧΠϕϯτɾϦαΠζΠϕϯτฤʙ ೥ τϨϯυͷ8FCςΫϊϩδʔͱɺ ίϛϡχέʔγϣϯ"1*ʢ5XJMJPʣ!෱Ԭ

Slide 2

Slide 2 text

©2018 Yusuke Hirao ࣗݾ঺հ ฏඌ༏యʢͻΒ͓Ώ͏ͯΜʣ גࣜձࣾσΟʔθϩ ϑϩϯτΤϯυΤϯδχΞ #-0(IUUQTOPUFNVZVTVLFIJSBP Yusuke Hirao @cloud10designs

Slide 3

Slide 3 text

©2018 Yusuke Hirao NBSLVQMJOUԠԉ͓Ͷ͕͍͠·͢ Φʔϓϯιʔε/PEFKT੡)5.--JOUFS

Slide 4

Slide 4 text

©2018 Yusuke Hirao ຊ౰ʹඞཁͰ͔͢ʁͦͷ+BWB4DSJQU ʙεΫϩʔϧΠϕϯτɾϦαΠζΠϕϯτฤʙ

Slide 5

Slide 5 text

©2018 Yusuke Hirao ݁࿦͔Β

Slide 6

Slide 6 text

©2018 Yusuke Hirao +BWB4DSJQU͸ඞཁͰ͢

Slide 7

Slide 7 text

©2018 Yusuke Hirao ΋ͬͱ΋ͬͱબ୒ࢶΛ૿΍͠·͠ΐ͏

Slide 8

Slide 8 text

©2018 Yusuke Hirao ΋ͬͱ΋ͬͱબ୒ࢶΛ૿΍͠·͠ΐ͏ खࡳΛͨ͘͞Μ͍࣋ͬͯΔਓ͸ڧ͍ʂ

Slide 9

Slide 9 text

©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* NBUDI.FEJB"1* BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

Slide 10

Slide 10 text

©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* NBUDI.FEJB"1* BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

Slide 11

Slide 11 text

©2018 Yusuke Hirao ೔ʑͷίʔυɺ

Slide 12

Slide 12 text

©2018 Yusuke Hirao ೔ʑͷίʔυɺߋ৽ͯ͠·͔͢ʁ

Slide 13

Slide 13 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 8FCͷਐԽ͸೔ਐ݄า ࡢ೔Ͱ͖ͳ͔ͬͨ͜ͱ͕ࠓ೔͸Ͱ͖Δ

Slide 14

Slide 14 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 8FCͷਐԽ͸೔ਐ݄า ࡢ೔Ͱ͖ͳ͔ͬͨ͜ͱ͕ࠓ೔͸Ͱ͖Δ ͍ͭ΋΍͍ͬͯΔख๏͕ ࠷దղͰ͸ͳ͘ͳ͍ͯΔՄೳੑ͕͋Δ͔΋ ͱ͍ٙͬͯ·͔͢ʁ

Slide 15

Slide 15 text

©2018 Yusuke Hirao ॎʹ௕͍ϖʔδΛ εΫϩʔϧ͍ͯ͘͠ͱɺ ཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ

Slide 16

Slide 16 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

Slide 17

Slide 17 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

Slide 18

Slide 18 text

©2018 Yusuke Hirao ʮҐஔΛܭࢉͯ͠ʯʁʂ

Slide 19

Slide 19 text

©2018 Yusuke Hirao ຊ౰ʹܭࢉ͠ͳ͍ͱμϝͳͷʁ ΋ͬͱखܰʹΘ͔ΔΑ͏ʹͳΒͳ͍ͷʁ

Slide 20

Slide 20 text

©2018 Yusuke Hirao ৽͍͠"1*͋Γ·͢

Slide 21

Slide 21 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ ˞ৄ͘͠͸ޙ΄Ͳ

Slide 22

Slide 22 text

©2018 Yusuke Hirao ͳͥ͜ͷ"1*͕ੜ·Εͨͷ͔എܠΛߟ͑Δ

Slide 23

Slide 23 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ

Slide 24

Slide 24 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ

Slide 25

Slide 25 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ

Slide 26

Slide 26 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ ͸ ඳըʹѱӨڹ

Slide 27

Slide 27 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ ͸ ඳըʹѱӨڹ දࣔ͞Εͳ͍ ҐஔͰ΋ ॲཧ͸͞Εଓ͚Δ

Slide 28

Slide 28 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ ͸ ඳըʹѱӨڹ දࣔ͞Εͳ͍ ҐஔͰ΋ ॲཧ͸͞Εଓ͚Δ ύϑΥʔϚϯε͕ඇৗʹѱ͍

Slide 29

Slide 29 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ ϒϥ΢β͕಺෦తʹ؂ࢹ ඳըʹӨڹΛ༩͑ͳ͍

Slide 30

Slide 30 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ ϒϥ΢β͕಺෦తʹ؂ࢹ ඳըʹӨڹΛ༩͑ͳ͍ Α͘ར༻͞ΕΔ ࣮૷ͳͷͰ ϒϥ΢βࣗ਎͕౥ࡌͨ͠

Slide 31

Slide 31 text

©2018 Yusuke Hirao ϒϥ΢β͸ͪΌΜͱਐԽ͍ͯ͠Δʂ

Slide 32

Slide 32 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 8FCͷਐԽ͸೔ਐ݄า ࡢ೔Ͱ͖ͳ͔ͬͨ͜ͱ͕ࠓ೔͸Ͱ͖Δ ͍ͭ΋΍͍ͬͯΔख๏͕ ࠷దղͰ͸ͳ͘ͳ͍ͯΔՄೳੑ͕͋Δʂʂ

Slide 33

Slide 33 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 8FCͷਐԽ͸೔ਐ݄า ࡢ೔Ͱ͖ͳ͔ͬͨ͜ͱ͕ࠓ೔͸Ͱ͖Δ ͍ͭ΋΍͍ͬͯΔख๏͕ ࠷దղͰ͸ͳ͘ͳ͍ͯΔՄೳੑ͕͋Δʂʂ ຊ౰ʹͦͷ+BWB4DSJQUͷίʔυ͕ඞཁͳͷ͔ࠓҰ౓ݟ௚ͦ͏

Slide 34

Slide 34 text

©2018 Yusuke Hirao 2 ݹ͍ϒϥ΢βͰ΋ಈ͘ΜͰ͔͢ʁ

Slide 35

Slide 35 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 2ݹ͍ϒϥ΢βͰ΋ಈ͘ΜͰ͔͢ʁ ౴͑͸/Pʂʂ Ͱ΋ϙϦϑΟϧͱ͍͏ݹ͍ϒϥ΢βͰ΋ ͦΕΛͰ͖Δ͚ͩ࠶ݱ͢ΔϥΠϒϥϦ͕͋Γ·͢ɻ ৽͍͠ϒϥ΢β͸౥ࡌ͞Ε͍ͯΔ"1*Λɺ ݹ͍ϒϥ΢β͸ैདྷͷํ๏ͰॲཧΛ͚͚ۙͮ·͢ɻ

Slide 36

Slide 36 text

©2018 Yusuke Hirao 2 ͑ʁ͡Ό͋ैདྷͷํ๏Ͱ͍͍͡Όͳ͍

Slide 37

Slide 37 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 2͑ʁ͡Ό͋ैདྷͷํ๏Ͱ͍͍͡Όͳ͍ ͦΜͳ͜ͱ͸ͳ͍Ͱ͢ ৽͍͠ϒϥ΢βͰ͸͖ͪΜͱͦͷύϑΥʔϚϯεͷ ԸܙΛड͚Δ͜ͱ͕Ͱ͖·͢ɻ ৽͍͠ϒϥ΢βͰ͸ϝϦοτͷΈɻ ݹ͍ϒϥ΢βͰ͸ϝϦοτɾσϝϦοτ΋ͳ͘Ωʔϓɻ

Slide 38

Slide 38 text

©2018 Yusuke Hirao 2 ϙϦϑΟϧ͸όά͕͋Δͱฉ͖·ͨ͠

Slide 39

Slide 39 text

©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 2ϙϦϑΟϧ͸όά͕͋Δͱฉ͖·ͨ͠ Թ͔͍໨ͰݟकΓ·͠ΐ͏ ϙϦϑΟϧ͡Όͳͯ͘΋όά෇͖෺Ͱ͢ɻ ϒϥ΢βࣗମ͕όάΛ΋ͭ͜ͱ΋͋Δɻ ৺഑Ͱ͋Ε͹ɺ͋·ΓτϦοΩʔͳ࣮૷Λͤͣɺ "1*ͷϕʔγοΫͳ࢖͍ํʹཹΊΔͷ͕͍͍Ͱ͠ΐ͏ɻ

Slide 40

Slide 40 text

©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* NBUDI.FEJB"1* BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

Slide 41

Slide 41 text

©2018 Yusuke Hirao *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* !// ؂ࢹ໾ΦϒδΣΫτ const observer = new IntersectionObserver( !// ަࠩ࣌ͷॲཧ (entries) !=> { for (const entey of entries) { !// ަࠩͨ͠ཁૉͱͦͷ৘ใ͕ೖ͍ͬͯΔΦϒδΣΫτͷ഑ྻ !// ަࠩͨ͠ཁૉʹରͯ͠ͷॲཧ !// ྫ) CSSΫϥεΛ෇༩ entey.target.classList.add('enter'); } }, !// IntersectionObserverΦϓγϣϯ { !// ᮢ஋ threshold: 1, } ); !// ཁૉΛ؂ࢹ͢Δ observer.observe(document.querySelector('.inview')); *OUFSTFDUJPO0CTFSWFSཁૉ͕දࣔྖҬͱަ͔ࠩͨ͠؂ࢹ͢Δ

Slide 42

Slide 42 text

©2018 Yusuke Hirao *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* !// ؂ࢹ໾ΦϒδΣΫτ const observer = new ResizeObserver( !// αΠζ͕มԽͨ࣌͠ͷॲཧ (entries) !=> { for (const entey of entries) { !// αΠζ͕มԽͨ͠ཁૉͱͦͷ৘ใ͕ೖ͍ͬͯΔΦϒδΣΫτͷ഑ྻ !// αΠζ͕มԽͨ͠ཁૉʹରͯ͠ͷॲཧ !// ྫ) αΠζʹΑͬͯCSSΫϥεΛ෇༩ if (entry.contentRect.width < 300) { entey.target.classList.add('small'); } else { entey.target.classList.remove('small'); } } } ); !// ཁૉΛ؂ࢹ͢Δ observer.observe(document.querySelector('.elastic')); 3FTJ[F0CTFSWFSཁૉͷαΠζ͕มߋ͞Ε͔ͨ؂ࢹ͢Δ

Slide 43

Slide 43 text

©2018 Yusuke Hirao *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* ͦͷଞͷ0CTFSWFSܥͷ"1* .VUBUJPO0CTFSWFSཁૉͷ಺༰΍ଐੑ͕มߋ͞Ε͔ͨ؂ࢹ͢Δ 1FSGPSNBODF0CTFSWFSύϑΥʔϚϯεΛଌఆ͢Δ5JNJOH"1*ͷมߋΛ؂ࢹ͢Δ K2VFSZͷPOϝιου΍BEE&WFOU-JTUFOFSͷ࣮૷ํ๏ͱ ͪΐͬͱҟͳΔͷͰ࠷ॳ͸׳Εͳ͍͚Ͳɺ 0CTFSWFSܥͷ"1*͸ൺֱతࣅ͍ͯΔΠϯλʔϑΣΠεͳͷͰɺ ͜ͷύλʔϯ΋͓֮͑ͯ͘ͱ͍͍Ͱ͠ΐ͏ɻ const observer = new XXXObserver(callback); observer.observe(target);

Slide 44

Slide 44 text

©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* NBUDI.FEJB"1* BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

Slide 45

Slide 45 text

©2018 Yusuke Hirao NBUDI.FEJB"1* NBUDI.FEJB.FEJB2VFSZ-JTU$44ͷϝσΟΞΫΤϦʔͷ൑ఆΛ+BWB4DSJQUͰར༻Ͱ͖Δ !// CSSͷ@mediaͱಉ͡ΫΤϦʔΛఆٛ͢Δ const mediaQueryList = matchMedia('(max-width: 768px)'); !// ఆٛͨ͠ϝσΟΞΫΤϦʔʹϚον͍ͯ͠Δ͔Ͳ͏͔ͷ৚݅෼ذ if (mediaQueryList.matches) { console.log('εϚϗ༻ͷॲཧ'); } else { console.log('PC/λϒϨοτ༻ͷॲཧ'); } !// ϒϨʔΫϙΠϯτͷมߋΛݕ஌͢Δ͜ͱ΋Ͱ͖Δ !// มߋ࣌ͷΈ࣮ߦ͞ΕΔͷͰϦαΠζΠϕϯτͰৗʹαΠζΛଌΔඞཁ͕ͳ͘ͳΔ mediaQueryList.addListener(() !=> { if (mediaQueryList.matches) { console.log('εϚϗ༻ͷॲཧ'); } else { console.log('PC/λϒϨοτ༻ͷॲཧ'); } });

Slide 46

Slide 46 text

©2018 Yusuke Hirao NBUDI.FEJB"1* NBUDI.FEJB.FEJB2VFSZ-JTU$44ͷϝσΟΞΫΤϦʔͷ൑ఆΛ+BWB4DSJQUͰར༻Ͱ͖Δ !// CSSͷ@mediaͱಉ͡ΫΤϦʔΛఆٛͰ͖ΔͷͰɺ !// ϏϡʔϙʔταΠζҎ֎ͷ൑ఆ΋Ͱ͖Δ matchMedia('print'); matchMedia('screen and (min-width: 640px)'); matchMedia('(orientation: portrait)'); matchMedia('(orientation: landscape)'); matchMedia('(min-resolution: 2dppx)’);

Slide 47

Slide 47 text

©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* NBUDI.FEJB"1* BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

Slide 48

Slide 48 text

©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO ैདྷͷεΫϩʔϧΠϕϯτॲཧ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event) !=> { !// εΫϩʔϧ࣌ͷ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ event.preventDefault(); !// or return false; } ); ϒϥ΢βͷεΫϩʔϧΛڧ੍తʹࢭΊΔ͜ͱ͕Ͱ͖Δɻ

Slide 49

Slide 49 text

©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO ैདྷͷεΫϩʔϧΠϕϯτॲཧ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event) !=> { !// εΫϩʔϧ࣌ͷ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); ඞਢͳΘ͚Ͱ͸ͳ͍ͷͰ ϒϥ΢βͷεΫϩʔϧͷڍಈͱ ΠϕϯτϦεφʔͷॲཧΛ ͋Θ࣮ͤͯߦ͢Δ͜ͱ͕Ͱ͖Δ

Slide 50

Slide 50 text

©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO ैདྷͷεΫϩʔϧΠϕϯτॲཧ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event) !=> { !// εΫϩʔϧ࣌ͷॲཧ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); lTDSPMMzΠϕϯτൃੜ Ϛ΢εͷૢ࡞ͳͲ EP4PNFUIJOH EFGBVMU1SFWFOUFE൑ఆ ϒϥ΢β͕ εΫϩʔϧҐஔΛมߋ

Slide 51

Slide 51 text

©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO ैདྷͷεΫϩʔϧΠϕϯτॲཧ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event) !=> { !// εΫϩʔϧ࣌ͷॲཧ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); lTDSPMMzΠϕϯτൃੜ Ϛ΢εͷૢ࡞ͳͲ EP4PNFUIJOH EFGBVMU1SFWFOUFE൑ఆ ϒϥ΢β͕ εΫϩʔϧҐஔΛมߋ QSFWFOU%FGBVMU ΛݺΜͰ͍Α͏͕ ͳ͔ΒΖ͏͕ ൑ఆ͕͋Δ

Slide 52

Slide 52 text

©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO ैདྷͷεΫϩʔϧΠϕϯτॲཧ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event) !=> { !// εΫϩʔϧ࣌ͷॲཧ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); lTDSPMMzΠϕϯτൃੜ Ϛ΢εͷૢ࡞ͳͲ EP4PNFUIJOH EFGBVMU1SFWFOUFE൑ఆ ϒϥ΢β͕ εΫϩʔϧҐஔΛมߋ QSFWFOU%FGBVMU ΛݺΜͰ͍Α͏͕ ͳ͔ΒΖ͏͕ ൑ఆ͕͋Δ ͜͜ͷॲཧ͕ॏ͍ͱ εΫϩʔϧδϟοΩϯά ൃੜ

Slide 53

Slide 53 text

©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO 1BTTJWF0QUJPOQSFWFOU%FGBVMU Λݺͼग़͞ͳ͍͜ͱΛࢦఆ͢ΔΦϓγϣϯ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event) !=> { !// εΫϩʔϧ࣌ͷॲཧ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ }, { passive: true, } ); lTDSPMMzΠϕϯτൃੜ Ϛ΢εͷૢ࡞ͳͲ EP4PNFUIJOH ϒϥ΢β͕ εΫϩʔϧҐஔΛมߋ ϒϥ΢βͷ εΫϩʔϧ͸ ϦεφʔͷӨڹΛड͚ͳ͍

Slide 54

Slide 54 text

©2018 Yusuke Hirao ·ͱΊ

Slide 55

Slide 55 text

©2018 Yusuke Hirao ·ͱΊ ຊ౰ʹͦͷίʔυ͕ඞཁͳͷ͔ࠓҰ౓ݟ௚͢ ͍ͭ΋΍͍ͬͯΔख๏͕࠷దղͰ͸ͳ͍͔΋ ϒϥ΢β͸ਐԽ͍ͯ͠ΔͷͰ৽͍͠"1*Λظ଴ͯ͠ΈΔ

Slide 56

Slide 56 text

ຊ౰ʹඞཁͰ͔͢ʁͦͷ+BWB4DSJQU ʙεΫϩʔϧΠϕϯτɾϦαΠζΠϕϯτฤʙ ೥ τϨϯυͷ8FCςΫϊϩδʔͱɺ ίϛϡχέʔγϣϯ"1*ʢ5XJMJPʣ!෱Ԭ