こんにちは、Enigmo 新卒エンジニアの@sean0628_iです。 Enigmo Advent Calendar 2018 2日目の記事です。
初めに
Accelerated Mobile Pages の略であり、高速でスムーズにWeb ページを表示するためのライブラリー、或いはその仕組みのことです。 通常のHTML に比べて、制限が多く存在します。 今回はAMP 公式のドキュメントの仕様に関する箇所が英語だったので、読解し要点をまとめます。
AMP 制限
- 特定の要素をマークアップに含める。
- JavaScript は利用不可。
- inline CSS のみ利用可。 -> 50KB の制限付き
- 特定のHTML tag は利用不可。
- HTML 内、コメント不可。
- 特定のCSS properties は利用不可。
必要なマークアップ
- <!doctype html> でHTML を書き始める。
- <html ⚡> tag を含める。（<html amp> でも代用可能）
- <head> tag と<body> tag を含める。（通常のHTML では任意）
- <head> tag 内の一番初めに、<meta charset="utf-8"> を含める。
- <head> tag 内に、<link rel="canonical" href="$SOME_URL"> を含める。（
$SOME_URLは通常版のHTML のURL、通常版のHTML が存在しない場合はAMP のURLを入れる。） - <head> tag 内に、<meta name="viewport" content="width=device-width"> を含める。
minimum-scale=1および、initial-scale=1も含めることが勧められる。 - <head> tag 内に、<script async src="https://cdn.ampproject.org/v0.js"></script> を含める。
- <head> tag 内に、AMP Boilerplate Code（head > style[amp-boilerplate] と noscript > style[amp-boilerplate]）を含める。
HTML tags
| tag | 適正 |
|---|---|
| script | ×（type がapplication/ld+json の場合のみ○） |
| noscript | ○ |
| base | × |
| img | amp-img にて代用 |
| video | amp-video にて代用 |
| audio | amp-audio にて代用 |
| iframe | amp-iframe にて代用 |
| frame | × |
| frameset | × |
| object | × |
| param | × |
| applet | × |
| embed | × |
| form | ○（amp-form extension を含めることで利用可） |
| input elements | 一部（<input[type=image]>、<input[type=button]>、<input[type=password]>、<input[type=file]>）を除いて○<fieldset>、<label> は○ |
| button | ○ |
| style | <head> tag 内に、一つのみ追加可。amp-custom attribute を持たせる必要あり。 |
| link | microformats.org に、登録されているrel は○ |
| meta | http-equiv attribute が特定の値に利用可。詳細: AMP validator specification |
| a | ○ href attribute をjavascript: から始めてはいけない。target を設定する場合、_blank を利用。 |
| svg | 殆どのSVG は利用可 |
Comments
- HTML 内でコメントは利用できない。
CSS
- 50,000 bytes の上限を超えてはいけない。
!importantは利用できない。- transition および、animation 関連は
opacity、transformproperties のみ利用可。
