Web Share APIのサンプル

概要
  • Web Share API を使うと、OSの共有メカニズムを利用して、ユーザーが選択した共有ターゲットに共有することができる

Demo

コード

HTML

 
<button id="share_button" type="button">シェア</button>
<div id="result"></div>

JavaScript

 

  function setupWebShareAPI() {
    /** シェアする際に渡すデータ */
    const shareData = {
      title: document.title,
      text: document.querySelector('meta[name="description"]').content,
      url: location.href,
    };

    const buttonElem = document.querySelector('#share_button');
    const resultElem = document.querySelector("#result");

    // シェアは「ユーザーによる有効化」により起動させる必要あり
    buttonElem.addEventListener('click', async () => {
      try {
        // Web Share APIを使って、OSのシェア機能を開く
        await navigator.share(shareData);
        resultElem.textContent = 'Data shared successfully.';
      } catch (error) {
        // Web Share APIが使えないブラウザの場合
        await navigator.clipboard.writeText(shareData.url);
        alert('URLをコピーしました');
        resultElem.textContent = `Error: ${error}`;
      }
    });
  }

  setupWebShareAPI();