chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

AMPに挑戦してみる

はじめに

自サービスがのちにAMP対応しようとしていたのと、AMPに合っているサービスということもあり AMPとはどうゆうものなのかという所から、AMPを実際に実装していく所までやっていきました。 AMPの目的がモバイルでの高速表示なので、様々な制限の中ページを作っていきます。 自サービスのAMP化したいページが、実際に再現可能なのかどうかという所が最初不安でいました。

実際に実装してみて

制限の中どれだけのことが可能なのか気になっていましたが、結論予想以上に出来ることが多かったです。 もちろんサービスによって表現に可能・不可能はありますが、自サービスでやりたいことはほぼ可能でした。 TwitterwidgetだったりInstagramだったり、Youtubeだったり簡単に再現可能でした。 ボタンを押したらある要素の表示を変えたり、スクロール量によって何かをするということも可能でした。

ampコンポーネント

たくさんの表現を可能にしているのが、豊富なコンポーネントです。 Youtubeだったらamp-youtubeを使ったりTwitterだったらamp-twitterを使ったりと、すでに用意されているコンポーネントを使えば すぐに表現することが可能です。

サンプルがあるのでこちらを活用するとわかりやすいです。

ampbyexample.com

最後に

AMPで表現できることがこれからも増えていくとの事なので期待です。 自サービスも今期中にはAMP化していきたいと思っています。