AMP に「ページトップへ戻る」ボタンを設置する方法

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

AMP ページで、まったく見かけないものがあります。

それが「ページトップへ戻る」ボタン。

下にスクロールをすると画面右下に出てきて、クリックをするとページの 1 番上まで移動する、あのボタン。

通常ページでは、多くのサイトで見かけます。けれど、AMP ページでは見かけません。

2 つの AMP 拡張コンポーネントを使えば、AMP ページにも「ページトップへ戻る」ボタンを設置できます。その方法の紹介です。

実は、やり方は Scroll to top で紹介されています。

一部を変更しながら、もう少し詳しくご説明します。

拡張コンポーネントと動作

「ページトップへ戻る」ボタンは、一般的に JavaScript を使い設置します。

しかし、2018 年 3 月の執筆時点では、AMP で JavaScript を使えません。AMP ページで「ページトップへ戻る」ボタンを見かけないのは、これが理由です。

そこで出番となるのが、 amp-animationamp-position-observer の 2 つの拡張コンポーネント。

amp-animation は、その名のとおり AMP でアニメーションを表現するためのもの。

もう 1 つの amp-position-observer は、スクロール位置を判定しイベントを発生させるもの。

この 2 つを組み合わせることで、ある一定の位置で「ページトップへ戻る」ボタンの表示・非表示を切り替えるアニメーションを表現できます。もちろん、クリックをすると、ページの 1 番上に移動します。

実際にボタンを設置した例を動画でご覧ください。サイト右下に、ピンクの「ページトップへ戻る」ボタンが現れます。

図にすると以下のとおりです。

任意の高さに設置したイベント発生位置より上の領域では、ボタンが非表示に。下の領域では、ボタンが表示されます。

amp-position-observer で作るイベント発生位置は、widthheight0 にします。なので、サイト上では見えません。レイアウトには、何も影響を与えません。

これより設置方法を説明します。

script タグの設置

amp-animation と amp-position-observer を使えるように、それぞれの script を読み込みます。

AMP ページの <head> タグ内に、以下のコードを追加します。

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

今回はボタンに Font Awesome を使います。Font Awesome のスタイルシートを読み込んでいない場合は、以下のコードも AMP ページの <head> タグ内に追加します。

<!-- Font Awesome バージョン 4 を使う場合  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Font Awesome バージョン 5 を使う場合 -->
<!-- バージョン 5.11.2 は 2019 年 11 月時点の最新バージョン -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">

尚、今回はバージョン 4 を使った説明をしています。

amp-animation の指定

次に、amp-animation を JSON で指定します。

以下のコードを AMP ページの <body> タグ直下に追加します。amp-analytics を設置している場合は、同じ場所で OK 。

<amp-animation id="show-page-top" layout="nodisplay">
<script type="application/json">
{
  "direction": "alternate",
  "duration": "300ms",
  "fill": "both",
  "animations": [{
    "selector": "#page-top",
    "easing": "cubic-bezier(.4,0,.2,1)",
    "keyframes": [{
      "opacity": "1",
      "visibility": "visible"
    }]
  }]
}
</script>
</amp-animation>

<amp-animation id="hide-page-top" layout="nodisplay">
<script type="application/json">
{
  "direction": "alternate",
  "duration": "300ms",
  "fill": "both",
  "animations": [{
    "selector": "#page-top",
    "easing": "cubic-bezier(.4,0,.2,1)",
    "keyframes": [{
      "opacity": "0",
      "visibility": "hidden"
    }]
  }]
}
</script>
</amp-animation>

17 行目までが、ボタンを表示するアニメーション。19 行目からが、ボタンを非表示にするアニメーションの指定です。

サイトによって変更する可能性があるのが、5 行目と 23 行目の "duration": "300ms"

これは「ページトップへ戻る」ボタンの表示・非表示にかかる時間です。

300ms であれば、非表示になっていたボタンが 0.3 秒をかけて表示されます。その逆も同じです。

ちなみにマテリアルデザインでは、400ms を超える指定は非推奨となっています。

ボタンとイベント発生エリアを設置

次は「ページトップへ戻る」ボタンを設置します。

また、amp-position-observer を使い、イベントを発生させるエリアも設置します。

AMP ページの <body> タグ直下、かつ <footer> タグより後に以下のコードを追加します。ほとんどのサイトの通常ページでは、<footer> タグの後にボタンが設置されているように思えます。

<div class="page-top-button">
  <button id="page-top" on="tap:header.scrollTo('duration' = 375)"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>
</div>

<div class="page-top-trigger">
  <amp-position-observer on="enter:hide-page-top.start; exit:show-page-top.start" layout="nodisplay"></amp-position-observer>
</div>

2 行目の on="tap:headerheader が、ボタンをクリック後に移動する先の id です。サイト上部の要素の id をご指定ください。<header> タグやサイトタイトルの id であれば、問題ないはずです。

同じく 2 行目の 'duration' = 375 で、ボタンをクリック後のページトップへの移動にかかる時間を指定します。

375 であれば、0.375 秒をかけてページトップに戻ります。

ほとんどのケースで移動距離が長いことが予想されるため、少し時間をかける指定をしています。

マテリアルデザインでは、移動距離が長い場合は 375 を超える指定を許可しています。ただし、400 を超えるのは非推奨です。サイトに合わせてご指定ください。

CSS で装飾

あとは CSS を指定すると終わりです。

CSS の一例は下記のとおりです。

#page-top {
  background: #616161;
  border: none;
  border-radius: 50px;
  bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2), 0 0 8px rgba(0, 0, 0, .1);
  color: #fff;
  font-size: 24px;
  height: 56px;
  line-height: 56px;
  outline: none;
  position: fixed;
  right: 16px;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
  visibility: hidden;
  width: 56px;
  z-index: 19999;
}

#page-top:active {
  background: #424242;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2), 0 0 24px rgba(0, 0, 0, .1);
  transform: translateY(-1px);
}

.page-top-trigger {
  height: 0;
  position: absolute;
  top: 500px;
  width: 0;
}

.page-top-triggertop: 500px が、イベント発生エリアの位置の指定です。

500px であれば、サイト上部から 500px スクロールした位置で、ボタンの表示・非表示が切り替わります。

ただし、top の値が大きい場合は、サイト上部でもボタンが表示されてしまいます。私のテスト環境では 600px を指定すると、以下の動画のようにページトップの周辺でもボタンが表示されてしまいました。

ボタンの表示・非表示の切り替え位置が、2 ヶ所になる恐れがあります。実機で試しながら、サイトに合った top の値をご指定ください。

Simplicity のカスタマイズ

WordPress テーマの Simplicity をお使いであれば、これまでのカスタマイズをコピペで可能です。

カスタマイズの要点を説明します。

script タグの追加

FTP ソフトやサーバーのファイルマネージャー機能を使い、親テーマの amp-header.php を子テーマにコピペをします。

コピペ後に、子テーマに設置した amp-header.php の下記のコードを探します。

echo '<link rel="stylesheet" href="https://max'.'cdn.boot'.'strapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">'.PHP_EOL;

上記コードの上の行に、下記のコードを追加します。

echo '<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>' . PHP_EOL;
echo '<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>' . PHP_EOL;

アニメーション用 JSON

子テーマに設置した amp-header.php に、amp-animation の指定のコードを追加します。

追加場所は、下記の部分の下の行です。

}//AMP Analytics終了 ?>

ボタンとイベント発生エリア

ボタンとイベント発生エリアを設置します。

親テーマの amp-footer.php を子テーマにコピペをします。子テーマに設置した amp-footer.php の </body> タグの 1 つ上の </div> タグの上に、ボタンとイベント発生エリアを設置の HTML を追加します。

その後の HTML も含めると、追加後の HTML は以下のとおりです。

    <div class="page-top-button">
      <button id="page-top" on="tap:header.scrollTo('duration' = 375)"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>
    </div>

    <div class="page-top-trigger">
      <amp-position-observer on="enter:hide-page-top.start; exit:show-page-top.start" layout="nodisplay"></amp-position-observer>
    </div>
  </div>
</body>
</html>

CSS の指定

最後に、子テーマの amp.css に、CSS で装飾の CSS を追加します。

おわりに

amp-animation と amp-position-observer を使えば、AMP でも動きのあるサイトを作れます。

今回はボタンに使いましたが、他の部分に使うのも面白い。

例えば、スクロールをするとフェードインしてくる画像やテキスト。

スクロールに応じて動く画像。

最初は高さのある大きなヘッダーが、下にスクロールをすると小さくなる。

アイデア次第で、人を惹きつけるアニメーションを表現できます。

CodePen の Visual Effects in AMP では、サンプルが用意されています。どんなことができるのか、非常に参考になります。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。