beta

AMPページでWeb Share APIを呼び出す方法

Javascriptが実行できないAMPページでOSネイティブのシェアメニューを呼び出す「Web Share API」を呼び出す方法をまとめました。

公開日：2020年4月28日

Web Share APIって？

OSネイティブのシェア機能を呼び出すブラウザのAPIです。別名「Navigator.share()」。

Navigator.share() | MDN

OSネイティブのシェア機能とは、

こういうやつですね。

HTMLでシェアボタンを書くよりも、シームレスに使えるのでUI/UXとして優れています。

OSのシェア機能をSPAから呼び出す「navigator.share()」の使い方 | WEBZINNE

Web Share APIは対応ブラウザからJavascriptで呼び出せるのですが、AMPページではJavascriptが実行できないので、一手間入れます。

amp-iframeで読み込むシェアボタンとスクリプトを作る(webshare.html)

Web Share APIが使えるかを判定する

Web Share APIが使えるかどうかは、

navigator.share

で確認できます。この値がtrueの時にだけボタンを表示させればOKです。

Web Share APIからOSのシェアメニューを起動する

Web Share APIからOSのシェアメニューを起動させるのは、

navigator.share(シェア情報)

でできます。

非同期なので、promise（async/await）で記述すればOKです。

<!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{
    background: #3283e9;
    width: 56px;
    height: 56px;
    padding: 12px;
    color: #FFF;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #copy .share-icon{
    width: 100%
  }
  #copy .share-text{
    width: 100%
    line-height: 10rem;
    height: 0;
    overflow: hidden;
  }
  </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"><span class="share-icon"><i class="fa fa-share-alt fa-3x" aria-hidden="true"></i></span><span class="share-text">シェア</span></button>
<script>

const btn = document.getElementById("btn")
const url = window.decodeURIComponent(window.location.hash.substr(1));

if (!navigator.share) {
  btn.remove();
}else{
  btn.addEventListener('click', async () => {
    try {
      await navigator.share({url: url})
    } catch(err) {
    }
  });
}
</script>
</body>
</html>

こんな感じでしょうか。

URLのパラメータは、webshare.htmlをamp-iframeで呼び出す時にハッシュで渡します。

AMPページでwebshare.htmlをamp-iframeで呼ぶ

ここまで出来たら、あとはwebshare.htmlを適当ば場所にアップして、AMPページからamp-iframeで呼び出すだけです。

<amp-iframe class="share-btn" sandbox="allow-scripts" width="80px" height="80px" frameborder="0" src="/webshare.html#シェアするURL">

AMPページのHTMLヘッダーで「amp-iframe」を読み込むのも忘れないようにしましょう。

AMPページでWeb Share APIを呼び出す方法をみてきました。

特別難しいことはしていなくて、

  • 対応ブラウザでボタンクリック「navigator.share」を実行するHTMLを
  • amp-iframeで自分のサイトから呼び出す

というだけです。

この手法は「Javascriptが実行できないAMP環境でJavascriptを実行する」裏技的でもあるので、覚えておくと良いですね。

:

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード