Web Share APIの使用方法

AndroidのChrome 61が最初にWeb共有APIを起動したため、不明瞭になったようです。実際、WebサイトまたはWebアプリケーション（リンクや連絡先カードなど）から直接コンテンツを共有するときに、デバイスのネイティブ共有ダイアログ（Safariを使用する場合はデスクトップ）をトリガーする方法を提供します。

ユーザーはすでにネイティブの方法でWebページのコンテンツを共有できますが、ブラウザメニューでオプションを見つける必要があります。それでも、共有コンテンツを制御できません。このAPIの導入により、開発者はユーザーデバイスでネイティブコンテンツ共有機能を活用することにより、アプリケーションまたはWebサイトに共有機能を追加できます。

この方法には、従来の方法よりも多くの利点があります。

• ユーザーは、DIYの実装にある可能性のある限られた数のオプションよりも、より広範なコンテンツ共有オプションを持っています。
• さまざまなソーシャルプラットフォームからサードパーティのスクリプトをキャンセルすることにより、ページの読み込み時間を短縮できます。
• さまざまなソーシャルメディアサイトや電子メールに一連のボタンを追加する必要はありません。デバイスのネイティブ共有オプションは、1つのボタンでトリガーされます。
• ユーザーは、事前定義されたオプションに限定されることなく、デバイスで優先される共有ターゲットをカスタマイズできます。

ブラウザのサポート手順

APIの仕組みについて詳しく説明する前に、ブラウザサポートの問題を解決しましょう。正直に言うと、ブラウザのサポートは現在理想的ではありません。 AndroidとSafari（デスクトップとiOS）のChromeでのみ動作します。

このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレットPC

しかし、これに落胆しないでください、あなたのウェブサイトにこのAPIを採用しないでください。ご覧のとおり、ブラウザへのフォールバックをサポートしていないことは非常に簡単です。

APIを使用するためのいくつかの要件

独自のWebプロジェクトでこのAPIを採用する前に、次のことが2つあります。

• あなたのウェブサイトはhttpsを介して提供する必要があります。ローカル開発のために、APIはLocalHostでサイトが実行されたときにも機能します。
• 乱用を防ぐために、APIはクリックイベントなどの特定のユーザーアクションに応じてのみトリガーできます。

例

このAPIの使用方法を示すために、基本的に自分のWebサイトと同じように機能するデモを準備しました。これがそれがどのように見えるかです：

現在、[共有]ボタンをクリックした後、コンテンツを共有するためのいくつかのオプションを表示するダイアログボックスが表示されます。これが私たちがこれを達成するのに役立つコードの一部です：

 <code>shareButton.addEventListener('click', event => { shareDialog.classList.add('is-open'); });</code>

先に進み、この例をWeb共有APIを使用して変換しましょう。以下に示すように、最初にすべきことは、APIがユーザーのブラウザによって実際にサポートされているかどうかを確認することです。

 <code>if (navigator.share) { // 支持Web 共享API } else { // 回退}</code>

Web共有APIを使用することはnavigator.share()メソッドを呼び出し、次のフィールドの少なくとも1つを含むオブジェクトを渡すのと同じくらい簡単です。

• url ：共有するURLを表す文字列。これは通常、ドキュメントURLですが、必ずしもそうではありません。 Web共有APIを介してURLを共有できます。
• title ：共有されるタイトルを表す文字列、通常はdocument.title 。
• text ：含めたいテキスト。

実際のアプリケーションでは次のようになります。

 <code>shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' }).then(() => { console.log('Thanks for sharing!'); }) .catch(console.error); } else { // 回退} });</code>

この時点で、サポートされているブラウザで[共有]ボタンをクリックすると、ネイティブセレクターがユーザーがデータを共有できるすべての可能なターゲットをポップアップします。目標は、ソーシャルメディアアプリ、電子メール、インスタントメッセージング、テキストメッセージ、またはその他の登録された共有ターゲットです。

APIは約束に基づいているため、 .then()メソッドを添付して共有成功したメッセージを表示し、 .catch()を使用してエラーを処理できます。実際のシナリオでは、次のコードスニペットを使用して、ページのタイトルとURLを取得することをお勧めします。

 <code>const title = document.title; const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;</code>

URLの場合、最初にページに正規のURLがあるかどうかを確認し、その場合はそのURLを使用します。それ以外の場合は、 document.locationからhrefを取得します。

フォールバックを提供することをお勧めします

Web共有APIをサポートしていないブラウザでは、これらのブラウザーのユーザーがまだ共有オプションを取得できるように、フォールバックメカニズムを提供する必要があります。

私たちの場合、コンテンツを共有するオプションがいくつかあるポップアップダイアログがあり、デモのボタンは実際にはどこにもリンクされていません。ただし、サードパーティのスクリプトなしでウェブページを共有するために独自のリンクを作成する方法を知りたい場合は、Adam Cotiの記事は開始するのに最適な場所です。

私たちがやりたいのは、Web共有APIをサポートしていないブラウザーのユーザーにフォールバックダイアログを表示することです。共有ダイアログをelseブロックに開くコードを移動するのと同じくらい簡単です。

 <code>shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' }).then(() => { console.log('Thanks for sharing!'); }) .catch(console.error); } else { shareDialog.classList.add('is-open'); } });</code>

これで、ユーザーが使用するブラウザに関係なく、すべてのユーザーがカバーされています。共有ボタンが2つのモバイルブラウザでどのように動作するかの比較を示します。1つはWeb共有APIをサポートし、もう1つは次のことをサポートしません。

試してみてください！ Web共有とサポートされていないブラウザをサポートするブラウザを使用します。上記のデモに似ているはずです。

要約します

これは、Web共有APIについて知る必要があるほぼすべての基本をカバーしています。ウェブサイトに実装することにより、訪問者はさまざまなソーシャルネットワーク、連絡先、その他のネイティブアプリケーションを通じてコン​​テンツをより簡単に共有できます。

また、WebアプリケーションがプログレッシブWebアプリケーションのインストール基準を満たし、ユーザーのホーム画面に追加されている場合、共有ターゲットとして追加できることも注目に値します。これは、Google開発者のWeb共有ターゲットAPIについて読むことができる機能です。

ブラウザのサポートはギザギザですが、フォールバックは簡単に実装できます。そのため、より多くのWebサイトが採用されていない理由はないと思います。このAPIについて詳しく知りたい場合は、こちらをご覧ください。

Web共有APIを使用しましたか？コメントであなたの経験を共有してください。

以上がWeb Share APIの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。