ファイル作成｜AMP対応のHTMLファイルを作ってみる

2020年2月9日

AMP対応とはいっても、対応するのはモバイル（スマートフォン、タブレットなど）のみ。
そのため、ウェブページをつくるならパソコン表示のページも必要となる。ということは、同じ内容のページが2枚必要ということ。

今まではレスポンシブ対応で作っていたが、今後はデバイスによって読み込みページの切替を行うほうが優遇されるかも。

というわけで、まずはAMP対応とそうでないファイルの2枚を作ります。

  • index.html
  • index.amp.html

ファイルの作成

先にindex.htmlを作成して、それをベースにindex.amp.htmlを作ります。

index.html

<!DOCTYPE html>
<HTML lang="ja">
<head>
<meta charset="utf-8">
<title>TEST PAGE</title>
<link rel="amphtml" href="index.amp.html" />
</head>
<body>
<p>こんにちわ</p> 
</body>
</html>

1行追加しておく

AMP対応のページがあることをアピールしておく。

<link rel="amphtml" href="index.amp.html" />

AMPのための要素一覧

AMP対応にするための8つの要素があります。 参考サイト：AMP公式ページ

1.　1行目は必ず入れる。

HTML5では必須ですね。

<!DOCTYPE html>

2.　2行目で「⚡」または「amp」を入れる。

絵文字の「⚡」がメインで書かれているが、どうやって出すのかわからないので「amp」で入力。

<html amp lang="ja">

3.　headとbodyとがあること。

これはもともと必須といえます。

4.　canonicalでベースのHTMLファイルを指定しておくこと。

<link rel="canonical" href="index.html" >

5.　文字コードの指定

これもはじめから必須ですね。

<meta charset="utf-8">

6.　viewportの指定

ここも同じく必須です。

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

7.　必ず入れるJSファイル指定

AMPオリジナルのJSファイル呼び出しです。

<script async src="https://cdn.ampproject.org/v0.js"></script>

8.　必ず入れるCSS指定

長いですが、これも必須のようです。

<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>

以上、これを追加編集したのが次のHTMLソースです。

index.amp.html

<!DOCTYPE html>
<HTML amp lang="ja">
<head>
<meta charset="utf-8">
<link rel="canonical" href="index.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>TEST PAGE</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><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>
</head>
<body>
<p>こんにちわ</p>
</body>
</html>

新着,AMP

Posted by HO-MAN