AMPサイトを軽く作ってみた
突然ですが皆さん「AMP」を知っていますか。
AMPは、「Accelerated Mobile Pages」の略で、速度を重視した新しいHTMLフレームワークです。
AMPでつくられたサイトはGoogleのサーバーにキャッシュとして保存されます。このため、ページが高速で表示できるのです。
AMP HTMLは速度重視のため外部スタイルシートの禁止やタグ、属性の制限などが厳しいです。ここでは基本的な書き方と適用の方法をご紹介します。
1. 基本形
土台は下のソースのコピーで大丈夫です。
HTML
<!DOCTYPE html>
<html ⚡ lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Sample</title>
<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>
<style amp-custom>
<!-- インラインでcssを記述 -->
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<!-- bodyタグ内 -->
</body>
</html>
なにか気づいたことはありませんか？
そうです。html属性に絵文字が使われているのです。ここがAMPの面白いところの一つですね。
ちなみに「⚡」ではなく
amp2. 注意点
前提としてAMP HTMLでは、外部スタイルシートの読み込みは不可能です。
外部スクリプトの読み込みにも制限はありますが、script要素にasync属性をつけ非同期読み込みにすれば読み込みは可能です。
また、a要素のhref属性に「javascript: 」を指定している人も多いと思いますがこれもAMPでは禁止されています。
記述方法
cssは
<style amp-custom><style amp-boilerplate><style>タグは使えなくてもstyle属性は使用が許可されているので上手く使いましょう。
ただし、CSSにもさまざまな制限があります。*（アスタリスク）などをCSSで利用することはできませんので、公式サイトで確認してみてください。