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>

カスタムフォントを除き、<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使用には、次のような制限がある。

!important修飾子は使用できない
カスタムフォントを除き、<link rel="stylesheet">で外部の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 JavaScriptを含める
formタグにtarget属性を指定する

必要なスクリプト

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

<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」が含まれている必要があります。
The tag 'form' requires including the 'amp-form' extension JavaScript.
タグ「form」には拡張機能 JavaScript の「amp-form」が含まれている必要があります。

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

このページには AMP コンポーネントの「script」タグが必要ですが、このタグがありません。

必要な属性

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]」にありません。

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>

<amp-analytics>

AMP ページで Google Analytics 4 (GA4) を使用するには、以下の条件を満たす必要がある。

GA4 によるデータの収集と使用方法を開示し、ユーザに GA4 をオプトアウトする機会を提供すること。これには、Google のプライバシーと規約へのリンク（Analyticsのオプトアウトページへのリンクを含む）を使用する。
モバイルページで AMP Analytics タグを使用する。

AMP Analytics では、以下に示すデータを収集できる。

ページデータ（ドメイン、パス、ページタイトル）
ユーザデータ（クライアントID、タイムゾーン）
閲覧データ（リファラー、ユニークページビューID）
ブラウザデータ（画面の高さ、画面の幅、ユーザーエージェント）
インタラクションデータ（ページの高さ、ページの幅）
イベントデータ

AMP向けGA4では現在、標準のGA4よりもお機能が制限されている。

AMP に Google Analytics 4 (GA4) を設置するには、以下に示す 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>

「測定ID」は以下の手順で確認できる。

ブラウザで Google Analytics のページを開く。
メニューから「管理」を選択する。
「プロパティ」から「データストリーム」を選択する。
ウェブストリームを選択する。
「ストリームの詳細」に測定IDが表示される。される。

参考文献

Google 2023. Measurement of Accelerated Mobile Pages (AMP)

Google 2023. AMP ページにアナリティクスを追加する

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>

Web Share API

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

<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テストでエラーとなる。

GETATTRIBUTE
TOSTRING
VALUEOF