Navigator: share() メソッド

data 省略可

共有するデータを含むオブジェクト。

ユーザーエージェントにとって未知のプロパティは無視され、共有データはユーザーエージェントが理解するプロパティにのみ評価されます。 すべてのプロパティは任意であるが，少なくとも一つの既知のデータプロパティを指定しなければならない。

使用可能な値は以下の通りです。

url 省略可

共有される URL を表す文字列。

text 省略可

共有されるテキストを表す文字列。

title 省略可

共有されるタイトルを表す文字列。

files 省略可

共有されるファイルを表す File オブジェクトの配列。共有可能なファイルの種類については、下記を参照してください。

Promise で、 undefined で解決するか、下記の例外のいずれかで拒否されるかします。

Promise は以下の DOMException 値のいずれかで拒否される可能性がある。

InvalidStateError DOMException

文書が完全にアクティブになっていない、または他にも共有操作が進行中です。

NotAllowedError DOMException

web-share 権限ポリシーによってこの機能の使用がブロックされているか、ウィンドウが一時的な有効化されていないか、セキュリティ上の配慮からファイル共有がブロックされているかです。

TypeError

指定した共有データを検証することができません。想定される理由は以下の通りです。

• data 引数が除外されているか、不明な値を持つプロパティしかない場合。ユーザーエージェントが認識できないプロパティは無視されることに注意してください。
• URL の形式が正しくない場合。
• ファイルが指定されているが、実装がファイル共有に対応していない場合。
• 指定したデータを共有すると、ユーザーエージェントから「敵対的な共有」と見なされる場合。

AbortError DOMException

ユーザーが共有処理を取り消したか、利用できる共有対象がない場合。

DataError DOMException

共有対象を開始する、またはデータを送信する際に問題が発生した場合。

以下は、通常共有できるファイル形式の一覧です。ただし、共有が成功するかどうかは常に navigator.canShare() でテストしてください。

• アプリケーション
  • .pdf - application/pdf
• 音声
  • .flac - audio/flac
  • .m4a - audio/x-m4a
  • .mp3 - audio/mpeg (audio/mp3 も受け付ける)
  • .oga - audio/ogg
  • .ogg - audio/ogg
  • .opus - audio/ogg
  • .wav - audio/wav
  • .weba - audio/webm
• 画像
  • .avif - image/avif
  • .bmp - image/bmp
  • .gif - image/gif
  • .ico - image/x-icon
  • .jfif - image/jpeg
  • .jpeg - image/jpeg
  • .jpg - image/jpeg
  • .pjp - image/jpeg
  • .pjpeg - image/jpeg
  • .png - image/png
  • .svg - image/svg+xml
  • .svgz - image/svg+xml
  • .tif - image/tiff
  • .tiff - image/tiff
  • .webp - image/webp
  • .xbm - image/x-xbitmap
• テキスト
  • .css - text/css
  • .csv - text/csv
  • .ehtml - text/html
  • .htm - text/html
  • .html - text/html
  • .shtm - text/html
  • .shtml - text/html
  • .text - text/plain
  • .txt - text/plain
• 動画
  • .m4v - video/mp4
  • .mp4 - video/mp4
  • .mpeg - video/mpeg
  • .mpg - video/mpeg
  • .ogm - video/ogg
  • .ogv - video/ogg
  • .webm - video/webm

このメソッドは、現在の文書が web-share 権限ポリシーと一時的な有効化を持っていることが必要です（ボタンクリックなどのUIイベントをきっかけに起動しなければならず、スクリプトによって任意の時点で起動させることはできない）。さらに、このメソッドでは、ネイティブ実装で共有に対応している有効なデータを指定する必要があります。

ウェブ共有テスト (ソースコードを参照) では、ボタンが一つあり、クリックすると Web Share API を呼び出して MDN の URL をシェアします。 JavaScript は以下のようになります。

HTML

HTML は、共有を発生させるためのボタンと、テストの結果を表示するための段落を作成するだけです。

<p><button>MDN を共有!</button></p>
<p class="result"></p>

JavaScript

const shareData = {
  title: "MDN",
  text: "MDN でウェブ開発を学びましょう。",
  url: "https://developer.mozilla.org",
};

const btn = document.querySelector("button");
const resultPara = document.querySelector(".result");

// 共有は「ユーザーによる有効化」で発生させること。
btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
    resultPara.textContent = "MDN の共有に成功しました";
  } catch (err) {
    resultPara.textContent = `Error: ${err}`;
  }
});

結果

ボタンをクリックすると、お使いのプラットフォームで共有ダイアログが起動します。ボタンの下に、共有が成功したかどうか、またはエラーコードを提供するためのテキストが表示されます。

ファイルを共有するには、まず navigator.canShare() をテストして呼び出します。次に、navigator.share()の呼び出しにファイルのリストを記載してください。

HTML

<div>
  <label for="files">共有する画像を選択:</label>
  <input id="files" type="file" accept="image/*" multiple />
</div>
<button id="share" type="button">画像を共有</button>
<output id="output"></output>

JavaScript

navigator.canShare() に渡されるデータオブジェクトには、 title と text は重要ではないので、filesプロパティのみが記載されます。

const input = document.getElementById("files");
const output = document.getElementById("output");

document.getElementById("share").addEventListener("click", async () => {
  const files = input.files;

  if (files.length === 0) {
    output.textContent = "ファイルが選択されていません。";
    return;
  }

  // navigator.canShare() による機能検出は、navigator.share() についても
  // 同じことを意味します。
  if (!navigator.canShare) {
    output.textContent = `このブラウザーはウェブ共有 API に対応していません。`;
    return;
  }

  if (navigator.canShare({ files })) {
    try {
      await navigator.share({
        files,
        title: "Images",
        text: "美しい画像",
      });
      output.textContent = "共有しました!";
    } catch (error) {
      output.textContent = `エラー: ${error.message}`;
    }
  } else {
    output.textContent = `このシステムはこのファイルの共有に対応していません。`;
  }
});

結果

• navigator.canShare()
• https://wpt.live/web-share/ （ウェブプラットフォームのテスト）