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="https://segakuin.com/html/amp/">
    <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>

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

canonical

AMPのHTMLでは、必ずcanonicalを指定する必要がある。

<link rel="canonical" href="https://segakuin.com/html/amp/">

ボイラープレート

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>

広告

AMPにGoogle 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>

自動広告

AMPに自動広告を入れるには、次のコードをHTMLに入れる。ただし、自分のサイト運営者ID(data-ad-client)を確認して、該当部分を置き換える。

<!DOCTYPE html>
<html amp>
  <head>
    <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>
  </head>
  <body>
    <amp-auto-ads type="adsense" data-ad-client="ca-pub-9999999999999999">
    </amp-auto-ads>
    <!-- content -->
  </body>
</html>

CSS

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

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

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

JavaScript

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

画像

AMPで画像を表示するには、<img> タグの代わりに <amp-img> タグを使う。

<img> は終了タグを省略できるが、<amp-img> は終了タグを省略できない。

<amp-img> には次の属性を指定できる。

alt
画像の代替テキストを指定する。
layout
画像のレイアウトを指定する。
layout
説明
fixed 固定サイズ
responsive レスポンシブ
src
表示する画像のURLを指定する。
height
layout="fixed" の場合、画像の高さを指定する。

layout="responsive" の場合、画像のアスペクト比(高さ)を指定する。

必須属性で省略できない。

width
layout="fixed" の場合、画像の幅を指定する。

layout="responsive" の場合、画像のアスペクト比(幅)を指定する。

必須属性で省略できない。

<amp-img src="avator.jpg" width="300" height="300" alt="avator">
</amp-img>

layout属性にresponsiveを指定すると、画像がレスポンシブになる。

レスポンシブな画像は、親要素の横幅いっぱいに画像が拡大または縮小される。

<amp-img src="avator.jpg"
  width="300"
  height="300"
  layout="responsive"
  alt="avator">
</amp-img>

レスポンシブ画像の最大幅を指定するには、画像のコンテナに最大幅を指定する。

<div style="max-width: 300px;">
  <amp-img src="avator.jpg"
    width="300"
    height="300"
    layout="responsive"
    alt="avator">
  </amp-img>
</div>

または、レスポンシブ画像を inline-block 要素にして、幅と最大幅を指定する。

<amp-img src="avator.jpg"
  style="display: inline-block; width: 100%; max-width: 300px;"
  with="300"
  height="250"
  layout="responsive"
  alt="example">
</amp-img>

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 テストで次のエラーメッセージが出ます。

また、Google Search Console では次のエラーメッセージが出ます。

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

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

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

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

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

AMPにおけるform要素の必須属性
method 必須属性
GET action 又は action-xhr
POST action-xhr

Googleカスタム検索

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

AMPにGoogle Analyticsを設置するには、次のHTMLコードを追加する。

<!DOCTYPE html>
<html amp>
  <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>
</html>

Twitter

AMPにTwitterのシェアボタンを設置するには、次のHTMLコードを追加する。

<!DOCTYPE html>
<html amp>
  <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>
</html>

<amp-iframe>

AMP (Accelerated Mobile Pages) で <iframe> タグは使えない。

AMPでインラインフレームを表示するためには、<iframe> の代わりに <amp-iframe> タグを使う。

<amp-iframe src="/privacy-policy.html" width="300px" height="250px">
</amp-iframe>

必要なスクリプト

<amp-iframe> タグを使うには、amp-iframe-0.1.js スクリプトが必要である。

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

属性

次に示す属性をamp-iframe要素に指定できる。

allowfullscreen
このインラインフレームが全画面モードにすることができる場合は true を指定する。
frameborder
インラインフレームとの境界線を表示するか否かを指定する。
frameborder
説明
0境界線を表示しない(既定値)
1境界線を表示する
height
インラインフレームの高さを指定する。必須属性で省略できない。
layout
インラインフレームのレイアウトを指定する。
layout
説明
responsive 要素の幅がコンテナ要素の幅と同じになるように調整される。高さも要素の width 属性と height 属性によって指定されるアスペクト比になるよう自動的にサイズ変更される。
src
インラインフレーム内に表示するHTML文書のURLを指定する。
width
インラインフレームの幅を指定する。必須属性で省略できない。

<amp-youtube>

AMPのページにでYouTube動画を埋め込むには、amp-youtube-0.1.js スクリプトと amp-youtube タグを使用する。

属性

amp-youtube要素には、次に示す属性を指定できる。

autoplay
YouTube動画を自動再生する。
data-videoid
YouTubeの動画IDを指定する。
height
YouTube動画の高さを指定する。

layout="responsive"の場合、height属性とwidth属性は絶対値ではなく、アスペクト比で指定する。

おもなアスペクト比
アスペクト比 使用例
16:9 地デジのテレビ
256:135 4Kのテレビ
4:3 アナログのテレビ
layout
YouTube動画のレイアウトを指定する。
layout
説明
fixed 固定
nodisplay 非表示
responsive レスポンシブ
width
YouTube動画の幅を指定する。

layout="responsive"の場合、height属性とwidth属性は絶対値ではなく、アスペクト比で指定する。

サンプル

<head>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
  </script>
</head>
<body>
  <amp-youtube data-videoid="l1DK0nocnLk" width="16" height="9" layout="responsive">
  </amp-youtube>
</body>

<amp-instagram>

AMPのページにインスタグラムを埋め込むには、次に示すJavaScriptを使用する。

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

インスタグラムを埋め込みたいところに次のタグを配置する。

<amp-instagram data-shortcode="Ci7Ic4PDcn0" data-captioned width="235" height="426" layout="fixed">
</amp-instagram>

amp-instagram要素には次に示す属性を指定する。

data-shortcode
instagramの写真のURLの中にあるデータショートコードを指定する。例えばURLが https://instagram.com/p/Ci7Ic4PDcn0 の場合、Ci7Ic4PDcn0 がデータショートコードである。
data-captioned
data-captioned属性を指定すると、キャプションを含む正しい高さにリサイズしようとする。属性値は不要である。
<amp-instagram data-shortcode="Ci7Ic4PDcn0" data-captioned width="235" height="426" layout="fixed">
</amp-instagram>
width
幅を指定する。
height
高さを指定する。
layout
レイアウトを指定する。
layout
説明
fill 親要素のサイズと一致させる。
fixed 固定サイズ
fixed-height height属性で指定された高さで固定する。幅は自動的に調整される。
flex-item 要素とその親にある他の要素が、フレックスボックスモデルに基づいて利用可能なスペースを確保する。
nodisplay 要素を表示しない。
responsive レスポンシブ

要素のid属性に指定できない値

要素のid属性に次に示す値を指定すると、The AMP ValidatorやAMPテストでエラーとなる。