このページは Cloud Translation API によって翻訳されました。

Web Share API を使用して OS 共有 UI と統合する

ウェブアプリは、プラットフォーム固有のアプリと同じ、システムが提供する共有機能を使用できます。

Joe Medley

Web Share API を使用すると、ウェブアプリはシステムが提供するのと同じ共有機能をプラットフォーム固有のアプリとして機能しています。Web Share API を使用すると、ウェブアプリで同じデバイスでデバイスにインストールされている他のアプリとリンク、テキスト、ファイルを共有できます。プラットフォーム固有のアプリと見なされます。

で確認できます。 <ph type="x-smartling-placeholder">

</ph> オプションとしてインストールされている PWA を備えたシステムレベルの共有ターゲット選択ツール。

機能と制限

ウェブ共有には次の機能と制限事項があります。

HTTPS 経由でアクセスされるサイトでのみ使用できます。
サードパーティの iframe での共有が行われる場合は、allow 属性を使用する必要があります。
クリックなどのユーザー操作に応じて呼び出す必要があります。呼び出し元 onloadハンドラを通じてアクセスすることはできません。
URL、テキスト、ファイルを共有できる。

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

リンクとテキストの共有

リンクとテキストを共有するには、Promise ベースの share() メソッドを使用します。メソッドを呼び出します。ブラウザが TypeError をスローしないようにするには、オブジェクトには少なくとも 1 つの（title、text、url、files のいずれか）を指定します。マイページでは、URL なしでテキストを共有したり、その逆も可能です。3 つすべてを許可ユースケースの柔軟性が広がります。コードを実行した後下の例では、ターゲットとしてメールアプリケーションが選択されています。title パラメータメールの件名、text、メッセージ本文、ファイル、できます。

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

サイトで同じコンテンツの URL が複数ある場合は、そのページの URL を正規 URL を使用することをおすすめします。共有する代わりに document.location.href への URL の正規 URL <meta> タグを確認します。ページの <head> を作成して共有します。これにより、できます。これにより、リダイレクトが回避されるだけでなく、共有された URL が確実に適切なユーザーエクスペリエンスを提供する必要があります。たとえば、友人があるユーザーがモバイル URL を共有していて、それをパソコンで見ているとします。 PC 版が表示されます。

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

ファイルの共有

ファイルを共有するには、まず navigator.canShare() をテストして呼び出します。次に、 navigator.share() の呼び出し内のファイルの配列:

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

このサンプルでは、次のものをテストして、特徴検出を処理しています。 navigator.share() ではなく navigator.canShare()。 canShare() に渡されるデータオブジェクトは、files プロパティのみをサポートします。特定の種類の音声、画像、PDF、動画、テキストファイルを共有できます。 Chromium で使用できるファイル拡張子をご覧ください。をご覧ください。今後、他のファイル形式が追加される可能性があります。

サードパーティの iframe で共有する

サードパーティの iframe 内から共有アクションをトリガーするには、 allow 属性の値を web-share に指定して iframe を埋め込みます。

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

実際の動作は、Glitch のデモで確認できます。ソースコードを表示します。属性を指定しないと、NotAllowedError と次のメッセージが表示されます。 Failed to execute 'share' on 'Navigator': Permission denied。

「サンタを追いかけよう」の事例紹介

共有ボタンが表示されている「サンタを追いかけよう」アプリ。 — </ph> 「サンタを追いかけよう」共有ボタン。

オープンソースプロジェクトのサンタを追いかけようは、おわかりいただけたでしょうか毎年 12 月には、季節を祝うことができますゲームや学習体験を提供します。

2016 年、サンタを追いかけようチームは、Android で Web Share API を使用しました。この API はモバイルに最適でした。ここ数年、モバイルデバイス用の共有ボタンを取り除きました。複数の共有ターゲットを持つことを正当化できませんでした

これに対して Web Share API を使用すれば貴重なピクセルを節約できますまた、ユーザーがウェブ共有を利用した場合、通常のショッピングよりも約 20% 多く、ユーザーの追加や削除ができます。次に進む: サンタを追いかけよう] をタップすると、ウェブ共有の実例を確認できます。

ブラウザサポート

Web Share API のブラウザサポートは微妙に異なるため、次の機能を使用することをおすすめします。（上記のコードサンプルで説明したとおり）に使用し、特定のメソッドの呼び出しをサポートされません。

この機能のサポートの概要は次のとおりです。詳しくは、各サポートリンクをご覧ください。

navigator.canShare()

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

navigator.share()

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

API のサポートを表示する

Web Share API を使用する予定はありますか？皆様の公開サポートが Chromium チームの力になります他のブラウザベンダーがそれらの機能をサポートすることの重要性を説明します。

ハッシュタグを使用して @ChromiumDev にツイートしてください #WebShare どこで、どのように使用されているかをお知らせください。

Web Share API を使用して OS 共有 UI と統合する

機能と制限

リンクとテキストの共有

ファイルの共有

サードパーティの iframe で共有する

「サンタを追いかけよう」の事例紹介

ブラウザ サポート

API のサポートを表示する

関連リンク

ブラウザサポート