beta

AMPページでページシェア用に任意のURLをコピーするボタンを実装する

AMPで構成したページで、URLシェア用に任意のページURLをコピーするボタンを実装する方法です。Javascriptの実行が制限されているため、amp-iframeで読み込んだHTML内でクリップボードへのコピーを実現させます。

公開日：2020年3月16日

AMPコピーボタンの実装の流れ

まずは、AMPページでURLコピーボタンを実装する流れを見ていきます。

  1. copy.htmlを用意
  2. AMPページのheaderでamp-iframeライブラリを読み込み
  3. AMPページ内でamp-iframeでcopy.htmlを呼び出す

AMPページ内では、オリジナルスクリプトを実行するamp-scriptが提供されていますが、クリップボードにコピーするための「document.execCommand」が実行できません（エラーになる）。

そこでamp.dev公式で紹介されているのがamp-iframeで外部ページを読み込んで実行する方式です。

Copy Button | amp.dev

amp-iframeで読み込む「copy.html」を用意する

まずは、読み込み先のHTMLファイルを用意します。中身はbuttonタグとコピペを実行するスクリプトのみです。

<!DOCTYPE html>
<html>
<head>
  <style> 
  body{
    margin: 0;
  }
  button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    height: 100%;
  }
  #copy{
    width: 100%;
    height: 100%;
  }
  #copy .text{
    display: inline-block;
    margin-left: 8px;;
  }
  .done{
    background: #AAA;
  }
  .done #copy{
    color: #FFF;
  } 
  @media screen and (max-width:480px) {
    #copy .text{
      display: none;
    }
  }
  </style>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body id="btn">
<button id="copy"><i class="fa fa-clipboard" aria-hidden="true"></i><span class="text" id="btnTxt">URLをコピー</span></button>
<input type="text" id="_i" hidden />
<script>
copy.onclick = function() {
  _i.value = window.decodeURIComponent(window.location.hash.substr(1));
  _i.hidden = false;
  _i.select();
  _i.focus();
  document.execCommand('copy');
  const btn = document.getElementById("btn")
  document.getElementById("btnTxt").innerHTML = "コピーしました"
  document.body.classList.add("done");
  _i.hidden = true;
  _i.value = '';
};
</script>
</body>

基本は、amp.devのサンプル通りですが、

  • コピーしたらテキストを変更
  • コピーしたら背景色を変更

という動きを追加しています。

このファイルを任意の場所へアップロードします。

AMPページのheaderでamp-iframeライブラリを読み込み

続いて、AMPページ内でiframeを実装するライブラリを読み込みます。

HTMLヘッダー内に下記のスクリプトを記述するだけでOKです。

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

AMPページ内でamp-iframeでcopy.htmlを呼び出す

最後に、copy.htmlをAMPページで呼び出せばOKです。下記の例では、copy.htmlをドキュメントルートに設置した時の書き方になっています。

amp-iframe要素はHTMLブロックとして認識されるので、通常のHTML要素と同じようにCSSでデザインができますが、amp-iframe内の要素はcopy.htmlの方でデザインしておいた方が楽です。

ちなみに、先ほどのcopy.html内のスクリプトは、リクエストパラメータ（copy.html#以降）をクリップボードにコピーするスクリプトなので、呼び出す際に必ず#以降にコピーさせたいURLを入れるようにします。

これでAMPページ内で任意のURLをコピーさせることが可能になります。

amp-iframeでコピーボタンを入れる際に注意したいこと

iframeの挿入場所を気をつける

amp-iframeで挿入するコンテンツは、仕組み上はどこでも入れられますが、ファーストビューの時点で、viewportの高さの75%より下、もしくは600pxより下に入れないと、下記のようなエラーが出てきます。

error.js:195 <amp-iframe> elements must be positioned outside the first 75% of the viewport or 600px from the top (whichever is smaller):

同じamp-iframeで入れるページでも、Service WorkerをインストールさせるHTMLなどはページ最下部で問題ないですが、コピーボタンのようにページ上部で表示させる場合は、レイアウトをしっかりと考えるようにしましょう。

AMPページでURLシェアボタンを実装してみました。

amp-scriptも便利ですが、Javascriptの機能のうち使えるものの制限があるため、簡単なものはamp-iframeで実装してしまうのは楽ですね。

AMPページは制限も多いですが、使い方次第で本当にいろんなことができます。

:

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード