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

ページトップへ戻るボタンをAMPに設置するやり方

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

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

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

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

通常ページでは、ほとんどのサイトで見かけます。

けれど、 AMP ページで設置しているサイトは、まったく見かけません。

2 つの AMP 用スクリプトを使えば、 AMP ページにも「ページトップへ戻る」ボタンを設置できます。その方法をご紹介します。

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

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

スクリプトと動作

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

しかし、 AMP では javascript を使えません。AMP で「ページトップへ戻る」ボタンを見かけないのは、これが理由です。

そこで出番となるのが、 amp-animationamp-position-observer の 2 つのスクリプト。

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

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

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

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

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

amp-position-observerでページトップへ戻るボタンを設置する説明図

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

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

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

2 つのスクリプトを設置

amp-animation と amp-position-observer を使えるように、 2 つのスクリプトを読み込みます。

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> タグ内に追加します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Simplicity の場合

Simplicity をお使いの場合には、 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;

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 を超える指定は非推奨となっています。

Simplicity の場合

Simplicity をお使いの場合には、子テーマに設置した amp-header.php に上記コードを追加します。

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

}//AMP Analytics終了 ?>

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

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

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

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

<div class="page-top-button">
  <button id="page-top" on="tap:header.scrollTo('duration'=375, 'easing'='cubic-bezier(.4,0,.2,1)')"><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 を超えるのは非推奨です。サイトに合わせてご指定ください。

Simplicity の場合

Simplicity をお使いの場合には、親テーマの amp-footer.php を子テーマにコピペをします。

子テーマに設置した amp-footer.php の </body> タグの 1 つ上の </div> タグの上に、上記のコードを追加します。

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

    <div class="page-top-button">
      <button id="page-top" on="tap:header.scrollTo('duration'=375, 'easing'='cubic-bezier(.4,0,.2,1)')"><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 で装飾

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

Simplicity の場合には、子テーマの amp.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 の値をご指定ください。


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

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

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

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

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

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

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