AMPを実装するときに、知っておくと便利なことをまとめる

2020-06-11

(LastUpdated: 2020-06-11)

これまでこのブログでは、AMPを導入する際の注意点や意見、概念などを書いてきました。

今回の記事では、AMPを実装をスムーズに行うための、Tipsをまとめてみました。 より実践的な内容になっています。

ざっくりとしていますが、読んでいただければ、煩わしい初期の設定や、注意事項を理解できて、コンテンツ制作に集中できるかと思います。

  1. AMPの実装を素早く始めるための、 AMP Start
  2. AMPの仕様による制限のポイントをまとめる
  3. Boilerplate Generatorを使って初期のコードを手に入れる
  4. ブラウザのconsoleでAMPバリデーション
  5. AMPキャッシュの確認
  6. スピードの測定はlighthouseで

AMPの実装を素早く始めるための、 AMP Start

コーディング中のラップトップディスプレイの拡大画像 もしも、AMPサイトを素早く立ち上げたい、あるいはサンプルのソースで実装を学びたい場合には、まずここを見ると良いです。 色々なサイト・テンプレートが紹介されています。 AMP Start - Accelerated Mobile Pages Templates

実際に機能が実装されたテンプレートが、ダウンロードが可能です。 JSONを使った動的なコンテンツの表示なども実装されているので、AMPの理解を容易にしてくれます。

AMP Startのコンテンツ詳細

  • Templates (様々なタイプのデザインテンプレートが用意されています)
  • Components (ボタンやナビゲーションなどのUIコンポーネントが紹介されています)
  • Get Started (実装の手順が示されています)
  • How It Works (テンプレートで使用しているCSSフレームワークを解説)

AMPの仕様による制限のポイントをまとめる

ノートパソコンの画面を見て「キーッ!」と鉛筆を噛む美しい女性

実装においては、いくつか制限があります。 制限についての考え方は、AMPが高速化にこだわっていることを理解すると納得できます。 高速化に悪影響を与える可能性がある要素を、徹底的に排除するためにしよう不可にしているものがほとんどです。

JS

独自に書いたjsの関数などは使えません。 また、ほとんどのライブラリやそれに依存したプラグインなどは利用できないと思った方が良いです。

その代わりに、AMPコンポーネントを利用することで、同等の機能を簡単に実装することが可能です。 カルーセルやパララックスなど。

CSS

  • inline CSSでなければいけない
  • CSSの記述は50kbまで
  • !importantは使えない

不用意にCSSフレームワークを導入してしまうと、これらの部分で手こずります。 AMPスタートのテンプレートでは、Normalize.cssとBasscssを使用しています。 Basscssでは!importantを使用している箇所もあるので、その部分だけ削除して使用しているそうです。 AMP Start - How it works

Boilerplate Generatorを使って初期のコードを手に入れる

octcatのステッカーが貼られたmacをあやつる人の画像 テンプレートを使わずに、ゼロから実装を進める必要がある場合に便利なのが、Boilerplate Generator。

Boilerplateを利用することで、簡単にAMPに必要かつ最適なAMP HTMLを生成してくれます。

https://ampbyexample.com/boilerplate/

フォームに自身のサイトに必要な項目を設定するだけで、必要なコードのテンプレートを作ってくれます。 コンテンツ制作にすぐに移れますね。

ブラウザのconsoleでAMPバリデーション

ソファに深くかけてリラックスした男性がmacを操るすがた Chromeのdeveloperツールを利用すれば、簡単にバリデーションが可能です。

開発中のURLの末尾に#development=1をつけて、Consoleを見ると、AMP HTMLが正しい記述となっているか確認できます。

問題がなければAMP validation successful.と表示され、問題があれば、その問題を指摘してくれます。

AMPキャッシュの確認

紅茶を楽しみながらMACを操る女性の手の俯瞰画像 無事にバリデーションが通っていれば、AMPキャッシュが利用できます。 https://developers.google.com/amp/cache/?hl=ja 実際にキャッシュされているのかをURLで確認できます。

Google CDNのAMPキャッシュを大解剖――URLフォーマット、更新プロセス、更新方法、削除方法 | 海外SEO情報ブログ

特定のルールがあるようですが、自分で生成するのは面倒なので、このオフィシャルのCDNのURL生成ツールを利用しましょう。

Using the Google AMP Cache

ここで生成されたURLにアクセスすると、ページを見ることができます。 HTMLそのものを見ることはできましたが、画像だとダウンロードになってしまう・・・ ちょっと確認しずらい・・・

なぜか、イメージでも/c/が生成されてしまうので、一応ルールを知っておくと便利かもしれません。

AMP CDNのURLのルール

CDNのURLは、以下のような組み合わせで生成されており、アクセスすることで確認することが可能です。

AMP CDNのドメイン + コンテンツのタイプ + SSL + 確認したいファイルのパス(URL)

コンテンツのタイプは、

  • htmlなどのコンテンツは/c/
  • 画像類は/i/
  • フォントなどのリソースは/r/

で分類されています。

SSLに対応していれば、/s/がつき、対応していなければつきません。

例 :example.com html https://example.com.cdn.ampproject.org/c/s/example.com/index.html 画像類 https://example.com.cdn.ampproject.org/i/s/example.com/img/image.jpg

Basic認証環境では、AMPキャッシュが動かない

テストサーバーで開発を進めていたのですが、問題があります。 Basic認証をかけていると、AMPキャッシュに登録はされないようなのです。

ずっと上記の方法で確認を繰り返していたのですが、一向にページが見られず・・・ 試しにBasic認証を解除してみたところ、無事に確認ができました。

ちょっと不便ですが、最終的な段階では機能するため、問題ないでしょう。

ちなみに、lighthouseの総合的な数値が上昇しました。 ただ、First ~ paintの数値に変化はありませんでした。

スピードの測定はlighthouseで

星空の下で明るく照らす灯台と海 計測には、lighthouseを使います。 chromeのdeveloperツールに実装されており、非常に気軽に利用できるところが良いです。 Auditsのタブを開き、

  1. performanceにチェックをつけて
  2. run

で、OK。

performance以外を計測すると、スピード以外の項目もスコアを出してくれます。

表示までの時間は1秒以内を目指しましょう。 かなり厳しいハードルですが、AMPを実装する意義に関わってきますので、頑張りましょう。


タグに関連づけられた記事

AM2

JAMstacなブログにまつわる、技術的なことなどを記録しています。