AMP(Accelerated Mobile Pages)についての概要と使い方

　Googleが2015年に発表した「Accelerated Mobile Pages（AMP）」は、モバイルページを高速で表示させるための手法です。頭文字をとってAMP（アンプ）と呼ばれます。Google検索やGoogleニュースなどにおける「AMPの優遇」が2021年6月に終了しましたが、AMPページが評価されなくなったというわけではありません。従来に比べて、ページの読み込み速度が断然早いので、ユーザーがサイトを見ている際に、「遅い」と感じることが少なくなり、記事を読み進めることが多くなるのではないかと考えられます。AMPはGoogle主導で始まりました。しかし、今はOpenJS Foundationに正式参加しており、フレームワークとして立ち位置を確立しています。未来があるかどうかは別として、メリットは間違いなく存在し、そこに利用価値を見出せるサイトは確実にあると考えます。

AMP HTMLのテンプレート
AMP HTMLの制限
AMP HTMLのscript
AMP HTMLのcss
AMP HTMLのテスト

AMP HTMLのテンプレート

まず、AMP HTML ページのテンプレートを下記に示します。

<!doctype html>
<html amp lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="canonical" href="＜非AMP版URL＞">
    <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>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    ・・・
  </body>
</html>

AMP対応ページは、<!doctype html>というタグで始めなければならない。
<html amp> または <html ⚡>を記述します。
<meta charset=”utf-8″>は、<head>タグ内の一番最初に記述します。
<link rel=”canonical” href=”＜URL＞” />は、AMPページと非AMPページが存在する場合は互いのURLを記述します。AMPページのみの場合はこのページ自体のURLを記述します。
<style amp-boilerplate> … は、上記のまま記述します。JavaScript が AMP ページを描画するまでの間、コンテンツを非表示にするためのものであります。
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>は記述が推奨されています。
<script async src=”https://cdn.ampproject.org/v0.js”></script>は、AMP用のJavaScriptコードを読み込むためものです。

AMP HTMLの制限

AMPで使用されるHTMLは、通常のHTMLと異なり制限があります。

タグ名	説明
<img>	<amp-img>を使用
<video>	<amp-video>を使用
<audio>	<amp-audio>を使用
<iframe>	<amp-iframe>を使用
<base>	使用不可
<picture>	使用不可
<frame>	使用不可
<frameset>	使用不可
<object>	使用不可
<param>	使用不可
<applet>	使用不可
<embed>	使用不可

AMP HTMLのscript

　<amp-script> コンポーネントを通じてカスタム JavaScript を利用します。詳細はこちらを確認してください。任意の JavaScript を使えると言っても、規則と制限があります。
　・外部 JavaScript は https で読み込む
　・ファイルのサイズは 150KB 以内
　・ユーザーの操作なしに DOM の変更不可
　・Mutation は 5 秒以内

<head>タグに以下を追加します。

<head>
    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
</head>

　<amp-script> コンポーネントを通じてカスタム JavaScript を読み込む。

<amp-script layout="container" src="https://example.com/myfile.js" class="convert">
    <button>SAMPLE</button>
    <input id="name" type="text"/> 
</amp-script>

AMP HTMLのcss

　AMPではCSSを別ファイルに記述することはできません。すべてHTML内に記述する必要があります。以下のように、headタグ内の<style amp-custom>内のみという制限があります。

<!doctype html>
<html amp lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="canonical" href="＜非AMP版URL＞">
    <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>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp-custom>
      ここに記述する。
    </style>
  </head>
  <body>
    ・・・
  </body>
</html>

記述できるスタイル指定についても、いくつかの制限があるので、詳細はこちらを確認してください。

AMP HTMLのテスト

　作成したページは「AMPテスト」サイト、又は、URL の後ろに #development=1 をつけて Chrome デベロッパーツールのコンソールで確認できます。