Save 37% off PRO during our Black Friday Sale! »

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

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

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

19675bc717632ffd7c53aa8b9a9c3cbf?s=128

Hirokatsu Endo

April 14, 2018
Tweet

Transcript

  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. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ʂ