AMPに挑戦してみる
はじめに
自サービスがのちにAMP対応しようとしていたのと、AMPに合っているサービスということもあり AMPとはどうゆうものなのかという所から、AMPを実際に実装していく所までやっていきました。 AMPの目的がモバイルでの高速表示なので、様々な制限の中ページを作っていきます。 自サービスのAMP化したいページが、実際に再現可能なのかどうかという所が最初不安でいました。
実際に実装してみて
制限の中どれだけのことが可能なのか気になっていましたが、結論予想以上に出来ることが多かったです。 もちろんサービスによって表現に可能・不可能はありますが、自サービスでやりたいことはほぼ可能でした。 TwitterのwidgetだったりInstagramだったり、Youtubeだったり簡単に再現可能でした。 ボタンを押したらある要素の表示を変えたり、スクロール量によって何かをするということも可能でした。
ampコンポーネント
たくさんの表現を可能にしているのが、豊富なコンポーネントです。
Youtubeだったらamp-youtube
を使ったりTwitterだったらamp-twitter
を使ったりと、すでに用意されているコンポーネントを使えば
すぐに表現することが可能です。
サンプルがあるのでこちらを活用するとわかりやすいです。
最後に
AMPで表現できることがこれからも増えていくとの事なので期待です。 自サービスも今期中にはAMP化していきたいと思っています。