AMP (Accelerated Mobile Pages)

AMP (Accelerated Mobile Pages)とは、ウェブページを高速に表示できる仕組みです。AMPに対応したウェブページを作成するには、HTMLやCSS、JavaScriptに決まりごとや制約があります。この記事自体もAMPで作成しています。

HTML

AMPに対応するには、HTMLを次のように記述する。

<!doctype html>
<html amp>
  <head>
    <meta charset="utf-8">
    <title>AMP (Accelerated Mobile Pages)</title>
    <link rel="canonical" href="amp.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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>
  </body>
</html>

HTML要素

AMPのHTMLでは、html要素にamp属性を指定する。

<html amp>

文字コードはUTF-8

AMPのHTMLはUTF-8で作成する。Shift JISで作られたHTMLはAMP化できない。

<meta charset="utf-8">

ビューポートの指定

AMPのHTMLでは、必ずビューポートを指定する必要がある。

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

ボイラープレート

AMPのHTMLには、AMPボイラープレート(鋳型)コードを含める必要がある。

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

Google AdSense

AMPにAdSenseを入れるには、head要素に次のスクリプトを入れる。

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

次のコードを任意の場所に入れる。ただし、レスポンシブ広告ユニットで自分のサイト運営者ID(data-ad-client)と広告ユニットID(data-ad-slot)を確認して、該当部分を置き換える。

<amp-ad width="100vw" height=320
  type="adsense"
  data-ad-client="ca-pub-1234567891234567"
  data-ad-slot="1234567890"
  data-auto-format="rspv"
  data-full-width>
  <div overflow></div>
</amp-ad>

CSS

AMPでCSSを指定するには、style要素にamp-custom属性を指定する。

<style amp-custom>
  /* properties */
</style>

AMPでのCSS使用には、次のような制限がある。

JavaScript

AMPでは非同期のJavaScriptのみ使用を許可されている。

AMP検証ツール

AMPが正しく作られているか検証できるツールが用意されている。

The AMP Validator

AMP テスト - Google Search Console

Form

AMP (Accelerated Mobile Pages)でformを使うためには、次の制約があります。

amp-form JavaScriptを含める

AMPでフォームを使うためには、次のスクリプトをHTMLに含める必要があります。

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

上記のJavaScriptを含めないと、AMP ValidatorやAMP テストで次のエラーメッセージが出ます。

The tag 'FORM [method=GET]' requires including the 'amp-form' extension JavaScript.
タグ「FORM [method=GET]」には拡張機能 JavaScript の「amp-form」が含まれている必要があります。

formタグにtarget属性を指定する

AMPでフォームを使うためには、formタグにtarget属性を指定する必要があります。

target
説明
_blank フォームの回答を新規ウィンドウに表示します。
_top フォームの回答を現在のウィンドウに表示します。

本来、targetは必須属性ではありませんが、AMPにおいては必須属性となります。

formタグにtarget属性を指定しないと、AMP ValidatorやAMP テストで次のエラーメッセージが出ます。

The mandatory attribute 'target' is missing in tag 'FORM [method=GET]'.
必須属性「target」がタグ「FORM [method=GET]」にありません。

AMPでGoogleカスタム検索を使うには、HTMLを次のように記述します。

<form id="cse-search-box" action="https://google.com/cse" target="_top">
  <input type="hidden" name="cx" value="cxの値" />
  <input type="hidden" name="ie" value="UTF-8" />
  <input type="text" name="q" />
  <input type="submit" name="sa" value="Search" />
</form>

Google analytics

<head>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
  <amp-analytics type="gtag" data-credentials="include">
    <script type="application/json">
      {
        "vars" : {
          "gtag_id": "トラッキングID",
          "config" : {
            "トラッキングID": { "groups": "default" }
          }
        }
      }
    </script>
  </amp-analytics>
<body>

Twitter

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