IROIRO

こういうやつ。

そろそろ対応しているんじゃないかと思って調べたら、やっぱりありました。

https://developer.mozilla.org/ja/docs/Web/API/Navigator/share

const data = {
  url: "https://greenspace.info",
  title: "title",
  text: "text"
  
};

navigator.share(data);

data の url, title, text はどれか一つは含まれていれば OK。(最低 1つは必要)

しかも、実際シェアしたかどうかを Promise で返してくれるので、await すればシェアが実行されたかどうかをトレースすることが可能。また、キャンセルされたり、data オブジェクトに上記のプロパティーが 1つもない場合は例外が発生するので catch で拾えます。

基本的に使えるのはモバイル系ブラウザーのみ...と思いきや、Edge と Safari は PC版でもサポートしている模様。

ここのシェアリンクもこんな感じにしてます。(もうちょいいじってますが)

    const shareLink = document.querySelector("a.share");
    if( navigator.share ) {
      shareLink.addEventListener('click', () => {
        navigator.share({
          title: document.title,
          url: location.href
        });
      });
    }
    else if( shareLink ) {
      shareLink.style.display = 'none';
    }

Twitter や Slack に共有したり、URLをコピーしたりと、割とブラウザーの共有ボタンを使うことは多いので、サイトの手軽なマーケ対策やアクセントには良いのではないでしょうか。