Google AMP-次のページ

アンプの次のページは、ユーザーがドキュメントの最後に到達したときに、より多くのページを動的にロードできるアンプコンポーネントです。この章では、この概念について詳しく説明します。

amp-next-pageコンポーネントを使用するには、次のスクリプトを追加する必要があります-

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

また、amp-next-pageは完全には起動されないため、テストページを機能させるには、次のメタタグを追加します-

<meta name = "amp-experiments-opt-in" content = "amp-next-page">

ページを動的にロードするには、以下に示すように、type =” application/json”のスクリプトタグにページURLを指定する必要があります-

<amp-next-page>
   <script type = "application/json">
      {

         "pages": [
            {
            "title": "Page 2",
            "image": "images/christmas1.jpg",
            "ampUrl": "ampnextpage1l"
            },
            {
            "title": "Page 3",
            "image": "images/christmas1.jpg",
            "ampUrl": "ampnextpage2l"
            }
         ]
      }
   </script>
</amp-next-page>

上記のタグでは、2つのページ ampnextpage1l および ampnextpage2l をロードしようとしています。

それでは、最終的な出力を見てみましょう。ロードする必要があるすべてのページは、title、image、およびampUrlを含むページ配列に追加する必要があります。

例

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Google Amp - Next Page</title>
      <link rel = "canonical" href = "ampnextpagel">
      <meta name = "amp-experiments-opt-in" content = "amp-next-page">
      <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>
      <script async custom-element = "amp-next-page"
         src = "https://cdn.ampproject.org/v0/amp-next-page-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google Amp - Next Page</h1>
      <h1>Page 1</h1>
      <p>Start of page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>End of page 1</p>

      <amp-next-page>
         <script type = "application/json">
            {
               "pages": [
                  {
                     "title": "Page 2",
                     "image": "images/christmas1.jpg",
                     "ampUrl": "ampnextpage1l"
                  },
                  {
                     "title": "Page 3",
                     "image": "images/christmas1.jpg",
                     "ampUrl": "ampnextpage2l"
                  }
               ]
            }
         </script>
      </amp-next-page>
   </body>
</html>

出力

次の通知を受け取る

次のページを開く

スクロールすると、ロードされる次のページが表示され、アドレスバーのページURLも変更されることに気付くことができます。

Google-amp-next-page

Google AMP-次のページ

例

出力