AMPに対応したページを作成する際の注意点
モバイルファーストという観点からするとAMP対応が必須になってきた感がありますが、そろそろ情報も出揃ってきた頃だろうしAMPに対応したページをちゃちゃっと作っちゃおうってノリで手を出したら、制約が結構厳しかったり、AMP独自のコンポーネントが用意されているので、それを学ぶための学習コストがかかったりと、Webサイトもう一本作るくらいの心構えが必要だと感じました。
注意点としては軽々しく手を出せるものではない...ということになりますが、モバイル端末で検索すると以下のようにAMPに対応したサイトをよく見かけるようになったので、そうも言ってられないですよね。
以下、ちょっと手を出した際に気が付いたことなどのメモになります。
目次
- AMPについて
- AMPに対応できているかどうかチェックする方法
- スタイルに「!important」が使えない
- スタイルに「.i-amphtml-～」が使えない
- JavaScriptが使えない
- amp-listのsrcにセットできるのは「https」または「localhost」のみ
- <style boilerplate>でエラーになる
- imgはコンポーネント「amp-img」に置き換える
- Youtube動画の埋め込み（iframe）はコンポーネント「amp-youtube」に置き換える
- その他
- 最後に
AMPについて
AMPとはAccelerated Mobile Pagesの略で、要するにモバイル端末からWebページにアクセスした際にすぐに画面に表示されてほしいので、こういう風に作ってくれよ。的なものです。
scriptタグで外部のJSファイルを沢山参照しているようなJavaScriptをバリバリ使ったサイトはパソコンからならすぐに画面に表示されても、モバイル端末だと端末自身のスペックが低かったり、回線速度が制限されてなかなかファイルがダウンロードされなかったりで、表示されるまで時間がかかることが多いです。
そのため、AMPではJavaScriptは使えませんが、代わりにAMP用の独自コンポーネントが用意されているので、既存のWebサイトをAMPに対応させようとしたら、その辺りの置換処理が必要になってきます。
AMPに対応できているかどうかチェックする方法
作成したページがAMPに対応できているかどうかチェックする方法はいくつかあります。
詳しくはValidate AMP pages – AMPを参照。
一番簡単なのはURLに「#development=1」を追加して、デベロッパーツールのコンソールを確認することです。
http://localhost/example#development=1
制約に違反している場合、エラーがコンソールに出力されます。
なにが使えないか一通り確認したい場合は、AMP HTML Specification – AMPを参照してください。
以下、私がAMP対応サイトを作ろうとした際に出力されたエラーの一部です。
スタイルに「!important」が使えない
AMP独自のコンポーネントで作成された部品のスタイルを変更したくて「!important」を使っていたのですが、AMPでは使えません。
エラーメッセージ。
The text (CDATA) inside tag 'style amp-custom' contains 'CSS !important', which is disallowed.
スタイルに「.i-amphtml-～」が使えない
「!important」同様にコンポーネントで作成された部品のスタイルを変更しようとしたらダメでした。
エラーメッセージ。
The text (CDATA) inside tag 'style amp-custom' contains 'CSS !important', which is disallowed.
JavaScriptが使えない
<aタグ>のhref属性に「javascript:～」を使っているとエラーが出力されます。
エラーメッセージ。
Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'.
「onclick」や「onchange」もNGです。使えるのはamp-bindが利用する「on」のみ。
amp-listのsrcにセットできるのは「https」または「localhost」のみ
AMP独自のコンポーネントであるamp-listは「https」または「localhost」のみ許可されています。使用する場合は最終的に「https」の対応が必須になります。
エラーメッセージ。
Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-list'.
"source" "must start with "https://" or "//" or be relative and served from either https or from localhost. Invalid value:" "http://data/example.json"
<style boilerplate>でエラーになる
AMPプロジェクトで用意されている雛形テンプレートをそのままコピペしたのに<style boilerplate>の制約違反でエラーが出力されることがあります。
これは本当にそのままじゃないとダメなようで、コピペ時にコードエディタが自動でフォーマットして途中に半角スペースなどが入ってしまうとNGになります。
例えば「-webkit-animation:none;」とするところを「-webkit-animation: none;」になっていたらNGです。
エラーメッセージ。
The mandatory text (CDATA) inside tag 'noscript > style[amp-boilerplate]' is missing or incorrect.
imgはコンポーネント「amp-img」に置き換える
AMPではimgは使えません。amp-imgに置き換えましょう。
エラーメッセージ。
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
Youtube動画の埋め込み（iframe）はコンポーネント「amp-youtube」に置き換える
img同様にAMPではiframeは使えません。Youtubeの動画をiframeで埋め込んでいる場合、amp-youtubeに置き換えましょう。
エラーメッセージ。
The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'?
その他
AMPで用意されているコンポーネントは結構たくさんあるので、確認してみてください。
AnalyticsやAdsenseもコンポ―ネントを使うことで利用可能です。
最後に
AMPに手を出す前は一般サイトとAMPに対応したサイト２つを管理するのは面倒なので、AMPに対応したサイトだけにできないものかと思って始めましたが、やってみた感じ、私が対応しようとしたサイトはまだ無理そうでした。
ページの掲載内容によっては可能なのですが、JavaScriptが使えないのはやっぱり厳しいです。
用意されているコンポーネントで大抵のことはできますが、JavaScriptが使えたらすぐに対応できるのにコンポーネントのせいで時間がかかったり、コンポーネントの挙動が不安定でやってみても結局できなかったりと、今後、できることは増えていくのでしょうが、まだまだといった感じでした。
それにAMPが今後も広がればいいですが、今のところアクセス数の増加や広告の収入にすぐさま影響を及ぼすものではなさそうなので、最終的に消えてしまう可能性もないとは言い切れず、せっかくAMPに対応したのに、また通常のページに戻さないといけなくなった場合の徒労感がハンパじゃなさそうなので、現状では、既存にプラスする形でのAMP対応がいいと思います。