プログラマがAMPと付き合う上で 知っておくべきこと

PWAと一緒に語られる事が増えてきたAMP
実はAMPはPWAと組み合わせないでも単体で利用できる技術です
このスライドではAMPとは何か、どうやって作るのか、何に注意すべきかといった概要をまとめています

1. ɹAMP⚡ ϓϩάϥϚ͕AMPͱ෇͖߹͏্Ͱ ஌͓ͬͯ͘΂͖͜ͱ
2. ࣗݾ঺հ ‣ԕ౻ େհ / @ruzia ‣1983೥ੜ·ΕɺΨϥέʔ޲͚ ͷγεςϜ࡞ͬͨΓࢣঊͱى ۀͨ͠Γͨ͠ޙʹཧ૝ͷ։ൃ ελΠϧΛ࣮ݱ͢ΔͨΊʹ SonicGarden΁ ‣େن໛ͱ͔ߴෛՙͱ͔ෳࡶͳ ͷ͕޷෺ ‣ϩʔυόΠΫͰ૸Δͷ΋޷͖
3. AMPͬͯ ࢖ͬͨ͜ͱ͋Γ·͔͢ʁ
4. ࠓ೔࿩͢͜ͱ ‣AMPͱ͸Կ͔ ‣AMP͸ͲΜͳײ͡Ͱ࡞Δͷ͔ ‣AMP͸ߏจνΣοΫʹ஫ҙ͠Α͏
5. Q AMPͬͯʁ
6. A “Accelerated Mobile Pages.”
7. ͨͩͻͨ͢Βʹ
 ϨϯμϦϯά଎౓Λ ௥͍ٻΊͨHTMLͷҰछ
8. Q ͳͥϨϯμϦϯά଎౓͕ ॏཁͳͷʁ
9. A ஗͍ͱϢʔβ͕ ཭Ε͍ͯͬͯ͠·͏͔Β
10. ͳͥ஗͘ͳΔʁ ‣αΠζͷܾ·͍ͬͯͳ͍ཁૉͷඳը ‣ಉظతʹಡΈࠐ·ΕΔJavaScript ‣ผϑΝΠϧͰఆٛ͞ΕͨCSSʹΑΔελΠϦϯά ‣CPUʹΑΔΞχϝʔγϣϯඳը ‣ϨϯμϦϯάπϦʔߏஙޙͷWeb Fontμ΢ϯϩʔυ
11. Q Ͳ͏͢Ε͹ϨϯμϦϯά ଎౓Λ͋͛ΒΕΔʁ
12. A ஗͘ͳΔݪҼΛഉআͯ͠ ͠·͑͹͍͍͡Όͳ͍
13. ͱ͍͏͜ͱ͸ ‣͢΂ͯͷཁૉ͸αΠζΛ੩తʹܾఆͤ͞Δ ‣JavaScript͸ڐՄ͞Εͨඇಉظͷ΋ͷ͚ͩ ‣CSS͸͢΂ͯΠϯϥΠϯʹ͢Δ ‣GPU͕࢖͑ΔΞχϝʔγϣϯͷΈ࢖͏ ‣Web Font͸ਅͬઌʹμ΢ϯϩʔυ
14. ϨϯμϦϯά଎౓Λ Լ͛Δ෺͸ࣺͯΔ
15. ͦͷҝʹಛԽͨ͠΋ͷ
16. ࠓ೔࿩͢͜ͱ ‣AMPͱ͸Կ͔ ‣AMP͸ͲΜͳײ͡Ͱ࡞Δͷ͔ ‣AMP͸ߏจνΣοΫʹ஫ҙ͠Α͏
17. Q AMPͬͯ Ͳ͏΍ͬͯ࡞Δͷʁ
18. A AMP HTMLΛ هड़͢Δ͚ͩ
19. <!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>
20. <html ⚡>
21. AMP HTMLͬͯʁ ‣Ұ෦ͷλάʹ੍ݶ͕͔͔ͬͨHTML ‣JavaScript͸ࣗ༝ʹهड़Ͱ͖ͳ͍ ‣ར༻Ͱ͖ΔCSSʹ΋੍ݶ͕͋Δ
22. ଎౓Λ௥͍ٻΊͨ ୅ঈʹ੍ݶ͕͋Δ
23. ྫ͑͹ը૾ͷλά
24. <amp-img src=“https://.../amp.jpg” width=“900" height=“508" layout=“responsive"> </amp-img>
25. <amp-img src=“https://.../amp.jpg” width=“900" height=“508" layout=“responsive"> </amp-img>
26. <amp-img src=“https://.../amp.jpg” width=“900" height=“508" layout=“responsive"> </amp-img>
27. AMPઐ༻ͷλά ˍ αΠζࢦఆ͕ඞਢ
28. ͦͷ··࢖͑Δλάͱ ͦ͏Ͱͳ͍΋ͷ͕͋Δ
29. ެࣜϦϑΝϨϯεͷ νΣοΫ͕ඞਢ
30. Q JavaScript͕ࣗ༝ʹॻ͚ͳ͍ͳΒ ಈըͱ͔SNSͷ΢ΟδΣοτ͸ʁ
31. A ઐ༻ͷ࢓૊Έ͕͋Δ
32. ྫ͑͹ YouTube
33. <!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>
34. ྫ͑͹ Twitter
35. <!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>
36. Α͘࢖͍ͦ͏ͳػೳ͸ ެࣜͷඇಉظ JavaScript͕͋Δ
37. Φʔϓϯιʔεͳͷ΋ ͋Γॱ࣍௥Ճ͞ΕͯΔ
38. ࠓ೔࿩͢͜ͱ ‣AMPͱ͸Կ͔ ‣AMP͸ͲΜͳײ͡Ͱ࡞Δͷ͔ ‣AMP͸ߏจνΣοΫʹ஫ҙ͠Α͏
39. AMP͸࢓༷ʹ ΋ͷ͘͢͝ݫ֨
40. ࢓༷ʹ४ڌͯ͠ͳ͍ͱ ݕࡧΤϯδϯʹ ొ࿥͞Εͳ͍
41. ࡞ͬͨΒ ެࣜͷόϦσʔλͰ νΣοΫ͠Α͏
42. – https://validator.ampproject.org/
43. ࠓ೔࿩ͨ͜͠ͱ ‣AMPͱ͸Կ͔ ‣AMP͸ͲΜͳײ͡Ͱ࡞Δͷ͔ ‣AMP͸ߏจνΣοΫʹ஫ҙ͠Α͏
44. ࠓ೔࿩ͤͳ͔ͬͨ͜ͱ ‣֤छݕࡧΤϯδϯͷରԠঢ়گͱ͔ ‣ݕࡧΤϯδϯʹAMPͷଘࡏΛ఻͑Δํ๏ ‣࣮͸Google͕Ωϟογϡͯ͘͠ΕΔΑ ‣ͳͲͳͲ
45. ·ͱΊ
46. AMP͸੍ݶ͕͋Δ͕ ͦͷ෼ѹ౗తʹ଎͍
47. ੋඇߴ଎ͳAMPͰ ༡ΜͰΈ͍ͯͩ͘͞
48. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ʂ