プログラマがAMPと付き合う上で知っておくべきこと

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

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

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

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

Q AMPͬͯʁ

A “Accelerated Mobile Pages.”

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

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

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

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

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

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

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

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

ͦͷҝʹಛԽͨ͠΋ͷ

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

A AMP HTMLΛ هड़͢Δ͚ͩ

<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello AMP world</title> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content=“width=device-width,minimum- scale=1,initial-scale=1"> <style amp-boilerplate>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}</style></ noscript> </head> <body> <h1>Hello AMP World!</h1> </body> </html>

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

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

ྫ͑͹ը૾ͷλά

<amp-img src=“https://.../amp.jpg” width=“900" height=“508" layout=“responsive"> </amp-img>

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

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

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

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

A ઐ༻ͷ࢓૊Έ͕͋Δ

ྫ͑͹ YouTube

<!doctype html> <html ⚡> <head> ... <script async custom-element=“amp-youtube" src=“https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
</script> ... </head> <body> ... <amp-youtube data-videoid="WrpkFROqR0Q" layout="responsive" width="560" height="315"> </amp-youtube> ... </body> </html>

ྫ͑͹ Twitter

<!doctype html> <html ⚡> <head> ... <script async custom-element=“amp-twitter" src=“https://cdn.ampproject.org/v0/amp-twitter-0.1.js">
</script> ... </head> <body> ... <amp-twitter data-tweetid=“638793490521001985" layout="responsive" width="500" height="583"> </amp-twitter> ... </body> </html>

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

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

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

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

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

– https://validator.ampproject.org/

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

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

·ͱΊ

AMP͸੍ݶ͕͋Δ͕ ͦͷ෼ѹ౗తʹ଎͍

ੋඇߴ଎ͳAMPͰ ༡ΜͰΈ͍ͯͩ͘͞

͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ʂ

プログラマがAMPと付き合う上で 知っておくべきこと

プログラマがAMPと付き合う上で 知っておくべきこと

More Decks by Hirokatsu Endo

Other Decks in Technology

Featured

Transcript

プログラマがAMPと付き合う上で知っておくべきこと

プログラマがAMPと付き合う上で知っておくべきこと