KnowHub

Web 共有 API

概要

Web コンテンツを他のアプリケーションと共有したい場合は、通常、共有インターフェイスを自分で実装し、ターゲット アプリケーションの接続メソッドを 1 つずつ提供する必要があります。これは非常に面倒であり、Web ページのパフォーマンスに一定の影響を与えます。 Web 共有 API は、この問題を解決するために提案されました。これにより、Web ページがオペレーティング システムの共有インターフェイスを呼び出すことができ、基本的に Web アプリがローカル アプリケーションと情報を交換できるようになります。

この API は Web ページのパフォーマンスを向上させるだけでなく、共有ターゲットの数や種類を制限しません。ソーシャル メディア アプリケーション、電子メール、インスタント メッセージング、およびローカル システムにインストールされて共有を受け入れているアプリケーションはすべて、システムの共有ポップアップ ウィンドウに表示されます。これは、モバイル Web ページで特に便利です。さらに、このインターフェイスを使用する場合、必要な共有ボタンは 1 つだけですが、従来の Web ページ共有では、共有ボタンの数と同じ数の複数の共有ターゲットがあります。

現在、デスクトップ Safari ブラウザ、モバイル Android Chrome ブラウザ、iOS Safari ブラウザがこの API をサポートしています。

この API では、Web サイトで HTTPS プロトコルを有効にする必要がありますが、ローカルの Localhost 開発では HTTP プロトコルを使用できます。さらに、この API は直接呼び出すことはできず、ユーザー操作 (「クリック」イベントなど) に応答するためにのみ使用できます。

インターフェースの詳細

このインターフェイスは navigator.share にデプロイされます。次のコードを使用して、マシンがこのインターフェイスをサポートしているかどうかを確認できます。

if (navigator.share) {
  // サポート
} それ以外 {
  // サポートされていません
}

navigator.share は、設定オブジェクトをパラメータとして受け取る関数メソッドです。

navigator.share({
  タイトル: 'WebShare API デモ',
  URL: 'https://codepen.io/ayoisaiah/pen/YbNazJ',
  テキスト: 「「Web Share API」を見ています」
})

構成オブジェクトには 3 つのプロパティがあり、それらはすべてオプションですが、少なくとも 1 つを指定する必要があります。

  • title: 共有ドキュメントのタイトル。
  • url: 共有 URL。
  • text: 共有コンテンツ。

一般に、「url」は現在のWebページのURL、「title」は現在のWebページのタイトルであり、以下の記述方法で取得できます。

const title = ドキュメント.タイトル;
const url = document.querySelector('link[rel=canonical]') ?
  document.querySelector('link[rel=canonical]').href :
  ドキュメント.場所.href;

navigator.share の戻り値は Promise オブジェクトです。このメソッドが呼び出された後、ユーザーが操作を完了すると、システムの共有ポップアップ ウィンドウがすぐに表示され、Promise オブジェクトは「解決済み」状態に変わります。

navigator.share({
  タイトル: 'WebShare API デモ',
  URL: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
}).then(() => {
  console.log('共有してくれてありがとう!');
}).catch((エラー) => {
  console.error('共有エラー', エラー);
});

戻り値はPromiseオブジェクトなのでawaitコマンドも利用可能です。

shareButton.addEventListener('click', async () => {
  試す {
    await navigator.share({ title: 'サンプルページ', url: '' });
    console.log('データは正常に共有されました');
  } キャッチ (エラー) {
    console.error('共有に失敗しました:', err.message);
  }
});

ファイルを共有する

この API はファイルを共有することもできます。まず、navigator.canShare() メソッドを使用して、対象のファイルが共有可能かどうかを判断します。すべてのファイルの共有が許可されているわけではないため、現在は画像、ビデオ、オーディオ、テキスト ファイルを共有できます2。

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  // ...
}

上記のコードでは、navigator.canShare() メソッドのパラメータ オブジェクトは、navigator.share() メソッドのパラメータ オブジェクトです。ここで重要なのは files 属性で、その値は FileList インスタンス オブジェクトです。

navigator.canShare() メソッドはブール値を返します。それが true の場合、navigator.share() メソッドを使用してファイルを共有できます。

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    ファイル: filesArray、
    タイトル: 「休暇の写真」、
    テキスト: '9 月 27 日から 10 月 14 日までの写真。',
  })
  .then(() => console.log('共有は成功しました。'))
  .catch((エラー) => console.log('共有に失敗しました', エラー));
}

参考リンク

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章