Slide 1

Slide 1 text

ɹAMP⚡ ϓϩάϥϚ͕AMPͱ෇͖߹͏্Ͱ ஌͓ͬͯ͘΂͖͜ͱ

Slide 2

Slide 2 text

ࣗݾ঺հ ‣ԕ౻ େհ / @ruzia ‣1983೥ੜ·ΕɺΨϥέʔ޲͚ ͷγεςϜ࡞ͬͨΓࢣঊͱى ۀͨ͠Γͨ͠ޙʹཧ૝ͷ։ൃ ελΠϧΛ࣮ݱ͢ΔͨΊʹ SonicGarden΁ ‣େن໛ͱ͔ߴෛՙͱ͔ෳࡶͳ ͷ͕޷෺ ‣ϩʔυόΠΫͰ૸Δͷ΋޷͖

Slide 3

Slide 3 text

AMPͬͯ ࢖ͬͨ͜ͱ͋Γ·͔͢ʁ

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ ‣AMPͱ͸Կ͔ ‣AMP͸ͲΜͳײ͡Ͱ࡞Δͷ͔ ‣AMP͸ߏจνΣοΫʹ஫ҙ͠Α͏

Slide 5

Slide 5 text

Q AMPͬͯʁ

Slide 6

Slide 6 text

A “Accelerated Mobile Pages.”

Slide 7

Slide 7 text

ͨͩͻͨ͢Βʹ  ϨϯμϦϯά଎౓Λ ௥͍ٻΊͨHTMLͷҰछ

Slide 8

Slide 8 text

Q ͳͥϨϯμϦϯά଎౓͕ ॏཁͳͷʁ

Slide 9

Slide 9 text

A ஗͍ͱϢʔβ͕ ཭Ε͍ͯͬͯ͠·͏͔Β

Slide 10

Slide 10 text

ͳͥ஗͘ͳΔʁ ‣αΠζͷܾ·͍ͬͯͳ͍ཁૉͷඳը ‣ಉظతʹಡΈࠐ·ΕΔJavaScript ‣ผϑΝΠϧͰఆٛ͞ΕͨCSSʹΑΔελΠϦϯά ‣CPUʹΑΔΞχϝʔγϣϯඳը ‣ϨϯμϦϯάπϦʔߏஙޙͷWeb Fontμ΢ϯϩʔυ

Slide 11

Slide 11 text

Q Ͳ͏͢Ε͹ϨϯμϦϯά ଎౓Λ͋͛ΒΕΔʁ

Slide 12

Slide 12 text

A ஗͘ͳΔݪҼΛഉআͯ͠ ͠·͑͹͍͍͡Όͳ͍

Slide 13

Slide 13 text

ͱ͍͏͜ͱ͸ ‣͢΂ͯͷཁૉ͸αΠζΛ੩తʹܾఆͤ͞Δ ‣JavaScript͸ڐՄ͞Εͨඇಉظͷ΋ͷ͚ͩ ‣CSS͸͢΂ͯΠϯϥΠϯʹ͢Δ ‣GPU͕࢖͑ΔΞχϝʔγϣϯͷΈ࢖͏ ‣Web Font͸ਅͬઌʹμ΢ϯϩʔυ

Slide 14

Slide 14 text

ϨϯμϦϯά଎౓Λ Լ͛Δ෺͸ࣺͯΔ

Slide 15

Slide 15 text

ͦͷҝʹಛԽͨ͠΋ͷ

Slide 16

Slide 16 text

ࠓ೔࿩͢͜ͱ ‣AMPͱ͸Կ͔ ‣AMP͸ͲΜͳײ͡Ͱ࡞Δͷ͔ ‣AMP͸ߏจνΣοΫʹ஫ҙ͠Α͏

Slide 17

Slide 17 text

Q AMPͬͯ Ͳ͏΍ͬͯ࡞Δͷʁ

Slide 18

Slide 18 text

A AMP HTMLΛ هड़͢Δ͚ͩ

Slide 19

Slide 19 text

Hello AMP world body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden} to{visibility:visible}}@-moz-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes - amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes - amp-start{from{visibility:hidden}to{visibility:visible}}</ style><noscript><style amp-boilerplate>body{-webkit-animation:none;- moz-animation:none;-ms-animation:none;animation:none} noscript>

Hello AMP World!

Slide 20

Slide 20 text

Slide 21

Slide 21 text

AMP HTMLͬͯʁ ‣Ұ෦ͷλάʹ੍ݶ͕͔͔ͬͨHTML ‣JavaScript͸ࣗ༝ʹهड़Ͱ͖ͳ͍ ‣ར༻Ͱ͖ΔCSSʹ΋੍ݶ͕͋Δ

Slide 22

Slide 22 text

଎౓Λ௥͍ٻΊͨ ୅ঈʹ੍ݶ͕͋Δ

Slide 23

Slide 23 text

ྫ͑͹ը૾ͷλά

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

AMPઐ༻ͷλά ˍ αΠζࢦఆ͕ඞਢ

Slide 28

Slide 28 text

ͦͷ··࢖͑Δλάͱ ͦ͏Ͱͳ͍΋ͷ͕͋Δ

Slide 29

Slide 29 text

ެࣜϦϑΝϨϯεͷ νΣοΫ͕ඞਢ

Slide 30

Slide 30 text

Q JavaScript͕ࣗ༝ʹॻ͚ͳ͍ͳΒ ಈըͱ͔SNSͷ΢ΟδΣοτ͸ʁ

Slide 31

Slide 31 text

A ઐ༻ͷ࢓૊Έ͕͋Δ

Slide 32

Slide 32 text

ྫ͑͹ YouTube

Slide 33

Slide 33 text

... ... ... ...

Slide 34

Slide 34 text

ྫ͑͹ Twitter

Slide 35

Slide 35 text

... ... ... ...

Slide 36

Slide 36 text

Α͘࢖͍ͦ͏ͳػೳ͸ ެࣜͷඇಉظ JavaScript͕͋Δ

Slide 37

Slide 37 text

Φʔϓϯιʔεͳͷ΋ ͋Γॱ࣍௥Ճ͞ΕͯΔ

Slide 38

Slide 38 text

ࠓ೔࿩͢͜ͱ ‣AMPͱ͸Կ͔ ‣AMP͸ͲΜͳײ͡Ͱ࡞Δͷ͔ ‣AMP͸ߏจνΣοΫʹ஫ҙ͠Α͏

Slide 39

Slide 39 text

AMP͸࢓༷ʹ ΋ͷ͘͢͝ݫ֨

Slide 40

Slide 40 text

࢓༷ʹ४ڌͯ͠ͳ͍ͱ ݕࡧΤϯδϯʹ ొ࿥͞Εͳ͍

Slide 41

Slide 41 text

࡞ͬͨΒ ެࣜͷόϦσʔλͰ νΣοΫ͠Α͏

Slide 42

Slide 42 text

– https://validator.ampproject.org/

Slide 43

Slide 43 text

ࠓ೔࿩ͨ͜͠ͱ ‣AMPͱ͸Կ͔ ‣AMP͸ͲΜͳײ͡Ͱ࡞Δͷ͔ ‣AMP͸ߏจνΣοΫʹ஫ҙ͠Α͏

Slide 44

Slide 44 text

ࠓ೔࿩ͤͳ͔ͬͨ͜ͱ ‣֤छݕࡧΤϯδϯͷରԠঢ়گͱ͔ ‣ݕࡧΤϯδϯʹAMPͷଘࡏΛ఻͑Δํ๏ ‣࣮͸Google͕Ωϟογϡͯ͘͠ΕΔΑ ‣ͳͲͳͲ