【amp】amp研究日記①　〜AMPとは〜

今日から仕事での開発の話もブログにしていこうと思います。

今回三つのAMP対応を任せてもらえることになりました！

かくいう私は一回もamp対応したことがなく、、
せっかくなので、ログを残していこうと思います。

全てのamp対応を終えるまで日記をつけていき、
最後にまとめの記事を書けたらなと思います。

今回、二つのwebサービスのamp化を行います。
使用言語はそれぞれ以下の通りです。
①wordpress
②ruby + react.js

最初はwordpressのamp開発から始めていくことに。

「Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツ」

・Accelerated Mobile Page
・2015年10月にスタート
・GoogleとTwitterの共同開発

ざっくり言うと以下の二点が関係します。

・読み込みの負荷を減らすルールを策定していること    
・本来のページがあるウェブサイトへのアクセスが発生しない

と言うのもAMPページは大きく三つの要素から構成されています。
AMPページの仕様はかなりガチガチで「読み込みに時間がかかることは最初からさせない」
という方針で策定されています。つまり軽量なコードにするために厳しいルールがあります。

AMP HTML(<html amp lang="ja">にはじまる少し特殊なHTML5)  
AMP JS(できるだけ非同期処理に限定したJavascript)   
AMP Cache(キャッシュされたAMP HTML ページが配信される)

・AMPページを見つけ、googleが提供するCDN(コンテンツ配信システム)という場所に保存してくれる

今日はampの基本的なおさらいをしていきました。
今日までに色々情報収集しているのですが、
やはり5年前に人気があっただけあって出回ってる記事が少なかったり
情報が古かったりする印象をうけました。

ampのドキュメントにあったように stack overflow などで
質問することも取り入れて新しい知識を身につけつつ進めていこうと思います。

・ampタグの紹介
・wordpreesでのampコンテンツ表示
・記事内のHTMLタグをfunctions.phpで置換していく
・テスト方法

・サーバーキャッシュとブラウザキャッシュの違いについて (ちなみにAMP cache はサーバーキャッシュ)
https://digitalidentity.co.jp/blog/seo/seo-tech/cash-speed-up.html

MAMPを使ってローカルを立ち上げる
okinawanpizza.hatenablog.com

tamakipedia