こんにちは、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 のみ利用可。