最近になって、ウェブサイトをAMPに対応させる案件が増えてきた。主にSEO案件。サイトの高速表示が出来ることで、検索結果にも有利という理由だ。
AMPについては2016年あたりにはじめてその言葉を聞いて、当時はニュースの記事ページや、ブログの投稿ページだけがそれに該当する、って話だったけど、今はもう少し色々なページがAMPに対応出来るようになっているらしい。
ということで、AMPの一般的な特徴、仕組み、実装方法を勉強がてらまとめてみる。
この記事の目次
AMPとは
Googleが推進する「モバイル環境でのページ表示を高速化しようぜ」ってプロジェクトで、『Accelerated Mobile Pages』の頭文字の略称。公式ページも存在する。
具体的にどうやって高速化するのかというと、HTMLやCSSやJavaScriptで出来ることを制約して、物理的な転送量を軽量化し、Googleの検索サーバーにキャッシュ(Google AMP Cache)を置くことで実現する。そこにキャッシュがあることで、検索結果で表示されたリンクをクリックされた際に、いちいちサイトが存在するサーバーまで見に行かなくても、キャッシュを表示させるだけなので、瞬時にページが表示されるよ、という流れ(AMPキャッシュには雷アイコンが表示される)。
AMPに対応させるための条件
AMP対応のページには、以下のような制約が課せられる。
- 使えるHTMLタグに制約がある
- HTML、CSSはminifyする
- CSSのファイルサイズは最大75KBまで
- 使えるJavascriptに制約がある(jQueryが使えない)
- 一部を除き、外部ファイルの読み込みが禁止
他にも、ビデオやオーディオファイルの読み込み、CSSの@keyframes
や@font-face
にも、使い方の制約が存在する。詳細は、AMPの仕様を確認。
なので、なんでもかんでも「無理にでもAMP対応させなきゃいけない」ってわけじゃなく、まずはAMP対応させるべきページのジャッジが必要。
そのページがAMPに対応難しいデザインだったりレイアウトだったりするなら、『元ページとAMP用ページという2枚使い』の立ち回りも選択するケースもある。基本は後者が多いのかな。
AMPで表現できること
JSもCSSアニメーションもまともに使えないなら、画像とテキストだけの世界になりそうだなと思うが、一応 AMP専用の動きを表現する環境は用意されている。
例えば、以下のようなもの。
カルーセル、画像ギャラリー
『amp-carousel』という方法で、画像ギャラリーを実装することができる。横に動くカルーセルや、サムネイルで画像が切り替わるタイプが実装可能。
実際のサンプルは『カルーセルを追加する』からも見れる。
カルーセルのサンプルコードを1つ。
<amp-carousel width="" height="" type="slides" autoplay layout="responsive">
<div class="carousel-item">
<a href="">
<amp-img layout="responsive" width="" height="" src="sample01.png" alt=""></amp-img>
</a>
</div>
<div class="carousel-item">
<a href="">
<amp-img layout="responsive" width="" height="" src="sample01.png" alt=""></amp-img>
</a>
</div>
<div class="carousel-item">
<a href="">
<amp-img layout="responsive" width="" height="" src="sample01.png" alt=""></amp-img>
</a>
</div>
</amp-carousel>
カルーセルのオプションも用意されている。
ループ再生ならloop
、自動再生ならautoplay
、スライド速度を指定するならdelay=300
など(300ミリ秒の例)。
あとはスライドの左右のボタンも標準で用意されている。ただ、デフォルトでは非表示になっているため、CSSで表示してあげないといけない。
.amp-carousel-button{
visibility: visible;
}
.amp-carousel-button-next {
}
.amp-carousel-button-prev {
}
アニメーション
『amp-animation』という方法で実装可能。あとは、サンプルがある『CSSアニメーションとトランジションのトリガ』とか。もしくは、『amp-anim』というアニメーションGIF的な表現も出来る。
その他
他にも動画や音声なども使える。
AMP対応ページのコーディングの流れ
サンプル
公式サイトのサンプルコードは以下。
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>My AMP Page</title>
<link rel="canonical" href="self.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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<h1>Hello AMPHTML World!</h1>
</body>
</html>
解説
まずは2行目。DOCTYPE宣言後にAMP HTML宣言をおこなう。これを宣言することで、「このページはAMP用ページだぜ」となる。
<html amp lang="ja"> または <html ⚡>
4行目。CHARSETとビューポートの設定を記述。文字コードはutf-8
をセット。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
6行目。カノニカルの設定をする。AMPページしかないならそのURLを記述。元ページとAMPページの2つが存在している状態なら、元ページのほうのURLを記述する。
<link rel="canonical" href="self.html" />
※ちなみに、元ページとAMPページの2つが存在している状況の場合、元ページ側でも「AMPページがあるよ」とボットに教えて上げなきゃいけないので、以下のようなタグを元ページにも追記する。URLはAMPページのURL。
<link rel="amphtml" href="https://www.example.com/amp_page.html">
7行目。ビューポートはwidth
とminimum
が必須、initial-scale
は定義自由だが、モバイル環境が前提なのでセット推奨。基本は以下をコピペ利用でOK。
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
8行目。amp-boilerplate
の記述。これはボイラープレートコードという、レンダリング前のコンテンツを表示させないようにして、表示速度のストレスを軽減させるためのロジック。これも必須の定型文的なものなので、そのままコピペ利用。
<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>
続いて、AMP用のJSファイルを非同期で読み込む。AMPページではこれが読み込まれてからコンテンツがレンダリングされる。
<script async src="https://cdn.ampproject.org/v0.js"></script>
ちなみに、AMPページでは、JavaScriptの利用方法には制限がある。script要素を使う場合は、application/ld+json
または application/json
を指定する必要がある。読み込む場合は非同期(async
)にする必要がある。
※新たに<amp script>
を使うことで、以下の制約はあるが、一定の表現が出来るようになったらしい。
- ファイルサイズは150KBまで
- ユーザーがアクションを起こすまで実行は出来ない(ロードで実行は不可)
これについては、以下ページを参照。
Google Developers
https://developers-jp.googleblog.com/2019/10/amp-script-amp-js.html
AMP
https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/
続いてCSS。原則『読込時間を節約するため』にインラインで記述。CSSには75KBまでのサイズ制約がある。インラインで読み込む場合は、<style>がそのまま使えないので、以下のようにamp-custom
を付ける。
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
外部読込が必要な場合は、
<!--#include virtual="css/hoge.css" -->
ちなみに、CSSは設定方法についても以下のルールがある。
-amp-
からはじまるclassの定義不可、CSSで設定不可i-amp-
からはじまるタグをCSSで設定不可transition
は、opacity
とtransform
だけ設定可
あとはウェブフォントやウェブアイコンの設定。これは、link
で読み込むか、@font-face
を指定する方法がある。ただし、linkで読み込みが許可されているのは、ホワイトリストに登録されているプロバイダーのみとなる。
- Typography.com
https://cloud.typography.com - Fonts.com
https://fast.fonts.net - Google Fonts
https://fonts.googleapis.com - Typekit
https://use.typekit.net
これらのホワイトリスト登録されているものは、従来通りのlink設定で行けるが、FontAwesomeに限っては、Hosting Font Awesome Yourselfを参考に、linkで読み込む方法で。
普通のHTMLと同じようにマークアップをしていくんだけど、imgタグをはじめ、AMP専用のタグに置き換えが必要だったり、そもそも使えないタグもあったりする。
img | 画像は、amp-imgを使う アニメーションGIFは、amp-animを使う |
audio | amp-audioへ置換 |
video | amp-videoへ置換 |
iframe | amp-iframeへ置換 |
a | href属性に”javascript:” の記述不可 target属性は”_blank”のみ利用可 |
style | amp-customでインライン表記。 外部CSSの直接リンク不可。 |
script | type属性が”application/ld+json”か”text/plain”のみ使用可 |
form | amp-formコンポーネントの読み込み必要 |
どんなタグをどのように記述するかは、「The AMP Components Catalogue」を参照。
最後にAMPページが本当に出来上がったかをAMPテストページでテストする。『有効なAMPページです』と表示されればOK、『有効なAMPページではありません』と表示されたら、エラー箇所を確認して修正する。
あとは、ページ内に構造化データがあるなら、それのテストも構造化データテストツールで必要。