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>

カスタムフォントを除き、<link rel="stylesheet"> で外部の CSS をインポートすることはできない。

AMP でカスタムフォントを使う例を次に示す。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho">
<style amp-custom>
  body {
    font-family: "Sawarabi Mincho", serif;
  }
</style>

<script>

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

<style amp-custom>

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

必要な属性

AMP で style 要素を使うためには、amp-custom 属性を必ず指定する必要がある。

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

カスタムフォント

ダウンロードしたカスタムフォントをサイトに配置して、そのカスタムフォントを AMP で使う例を次に示す。

<style amp-custom>
  @font-face {
    font-family: Roboto;
    src: url("https://example.com/fonts/Roboto-Medium.ttf");
  }
  body {
    font-family: Roboto, sans-serif;
  }
</style>

<form>

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

必要なスクリプト

AMP で form 要素を使うためには、次に示すスクリプトが必要になる。

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

必要な属性

AMP で form 要素を使うためには、target 属性を必ず指定する必要がある。

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

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

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

action 属性または action-xhr 属性も必ず指定する必要がある。どちらを使うかは、method 属性の値による。

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

AMP にフォームを配置する例を以下に示す。

<form method="get" action="/php/get.php" target="_top">
  <!-- input and/or textarea -->
</form>
<form method="post" action-xhr="/php/get.php" target="_blank">
  <!-- input and/or textarea -->
</form>

<amp-ad>

AMP の amp-ad 要素を使うと、Google Adsense 等の広告を配置することができる。

必要なスクリプト

amp-ad 要素を使うためには、次に示すスクリプトが必要になる。

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

構文

<amp-ad></amp-ad>

属性

以下に示す属性を amp-ad 要素に指定できる。

height
広告の高さ
type
広告ネットワークの識別子を指定する。
type属性
説明
a8 A8.net
accesstrade アクセストレード
adsense AdSense
affiliate-b afb
felmat Felmat
valuecommerce バリューコマース
width
広告の幅

次のコードを任意の場所に入れる。ただし、レスポンシブ広告ユニットで自分のサイト運営者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-audio>

AMPページに音声を埋め込む。

必要なスクリプト

amp-audio 要素を使うためには、次に示すスクリプトが必要になる。

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

属性

以下に示す属性を amp-audio 要素に指定できる。

album
音声が収録されたアルバム名を記述する。
artist
音声の作成者を記述する。
artwork
音声のアートワークとして使用する画像へのURLを指定する。
autoplay
autoplay 属性を指定した場合、音声の準備ができ次第、再生を開始する。
loop
loop 属性を指定した場合、音声が終了すると自動的にループして最初に戻る。
muted
muted 属性を指定した場合、音声はミュートされる。
preload
preload 属性を指定した場合、ページ読み込み時にオーディオファイルを読み込む。
src
オーディオのURLを指定する。HTTPSである必要がある。source 要素を子要素として持たない場合、src 属性は必須である。
<amp-audio src="https://segakuin.com/html/img/sea.mp3"></amp-audio>

<amp-auto-ads>

amp-auto-ads 要素を使うと、AMP に AdSense の自動広告を配置することができる。

必要なスクリプト

amp-audio 要素を使うためには、次に示すスクリプトが必要になる。

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

構文

<amp-auto-ads></amp-auto-ads>

属性

以下に示す属性を amp-auto-ads 要素に指定できる。

data-ad-client
自分のサイト運営者ID (data-ad-client) を指定する。
type
広告ネットワークの識別子を指定する。

サンプル

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>

<amp-img>

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

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

属性

以下に示す属性を amp-img 要素に指定できる。

alt
画像の代替テキストを指定する。
layout
画像のレイアウトを指定する。
layout
説明
fixed 固定サイズ
responsive レスポンシブ

layout属性にresponsiveを指定すると、画像がレスポンシブになる。レスポンシブな画像は、親要素の横幅いっぱいに画像が拡大または縮小される。

amp-img 要素の layout 属性に responsive を指定した場合、height 属性および width 属性に指定する値は、実際のサイズではなく、アスペクト比を指定する。

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

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

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

または、レスポンシブ画像を inline-block 要素にして、幅と最大幅を指定する。画像は本来 inline 要素であるが、inline 要素は高さや幅を持たないため、inline-block 要素へ変更する。

<amp-img src="portrait.jpg"
         style="display: inline-block; width: 100%; max-width: 300px"
         with="300"
         height="250"
         layout="responsive"
         alt="portrait">
</amp-img>
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>

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>

<amp-social-share>

AMP の amp-social-share 要素を使うと、SNSのシェアボタン等を配置することができる。

必要なスクリプト

amp-social-share 要素を使うためには、次に示すスクリプトが必要になる。

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

構文

<amp-social-share></amp-social-share>

属性

以下に示す属性を amp-social-share 要素に指定できる。

data-param-app_id
Facebook の場合は、FacebookアプリID (app_id) を指定する。
data-share-endpoint
未設定プロバイダの場合は、共有エンドポイントを指定する。
type
SNSの種類を指定する。
type属性
説明
email メール
facebook Facebook
line LINE
linkedin LinkedIn
pinterest Pinterest
sms SMS
system Windows Share API
tumblr Tumblr
twitter Twitter
whatsapp WhatsApp

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>

Windows Share API

AMPにWindows Share APIのシェアボタンを設置するには、次の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="system"></amp-social-share>
  </body>
</html>

はてなブックマーク

はてなブックマークのボタンを設置するには、次の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>
    <style amp-custom>
      amp-social-share[type=hatena_bookmark] {
        width: 60px;
        height: 44px;
        font-family: Verdana;
        background-color: #1DA1F2;
        font-weight: 700;
        color: #fff;
        line-height: 44px;
        text-align: center;
        font-size: 28px;
      }
    </style>
  </head>
  <body>
    <amp-social-share type="hatena_bookmark" data-share-endpoint="http://b.hatena.ne.jp/entry/https://segakuin.com/html/amp/">B!</amp-social-share>
  </body>
</html>
B!

<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境界線を表示する

インラインフレームの境界線を表示する例を以下に示す。

<amp-iframe src="privacy-policy.html" frameborder="1" width="250px" height="200px"></amp-iframe>
height
インラインフレームの高さを指定する。必須属性で省略できない。
layout
インラインフレームのレイアウトを指定する。
layout
説明
responsive 要素の幅がコンテナ要素の幅と同じになるように調整される。高さも要素の width 属性と height 属性によって指定されるアスペクト比になるよう自動的にサイズ変更される。

インラインフレームの境界線を表示する例を以下に示す。

<amp-iframe src="privacy-policy.html" layout="responsive" width="5" height="1"></amp-iframe>
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テストでエラーとなる。