日帰り学習 JavaScript API: Web 共有 API

カスタム共有インターフェースを一から構築することにうんざりしていませんか? JavaScript にはユーザーのデバイスのネイティブ共有機能を利用できるツールが組み込まれているのに、なぜそんな面倒なことをする必要があるのでしょうか? Web Share API をご紹介します。Web 上での共有をシームレスに実現する便利なソリューションです。

この記事では、Web Share API の機能と、それを使用してテキスト、リンク、ファイルを Web アプリから直接共有する方法について説明します。

この記事を読んだ後は、Web Share API の知識と、テキストからリンク、さらにはファイルに至るまでのさまざまなデータを共有する方法についての知識が身につくことになります。

Web共有APIとは何ですか?

Web 共有 API は、Web アプリケーションがユーザーのデバイスのネイティブ共有機能にアクセスできるようにするブラウザ機能です。 WhatsApp にリンクを送信したいですか?ファイルを電子メール クライアントと共有しますか?これらすべてが簡単になり、モバイル デバイスでも美しく動作します。

このAPIを使用して共有できるもの

Web Share API を使用する 3 つの方法を見てみましょう:

1. テキストの共有

テキストの共有は簡単です。簡単な例を次に示します:

HTML:

<button>



<p><strong>JavaScript:</strong><br>
</p>

<pre class="brush:php;toolbar:false">const shareTextButton = document.getElementById('shareText');

shareTextButton.addEventListener('click', () => {
  if (navigator.share) {
    navigator.share({
      title: 'Hello World!',
      text: 'Check out this cool text I just shared using the Web Share API!',
    })
      .then(() => console.log('Text shared successfully!'))
      .catch((error) => console.error('Error sharing text:', error));
  } else {
    alert('Your browser does not support the Web Share API.');
  }
});

プレビュー:

2. リンクの共有

ユーザーにリンクを共有させたいですか?とても簡単です:

HTML:

<button>



<p><strong>JavaScript:</strong><br>
</p>

<pre class="brush:php;toolbar:false">const shareLinkButton = document.getElementById('shareLink');

shareLinkButton.addEventListener('click', () => {
  if (navigator.share) {
    navigator.share({
      title: 'Check out this link!',
      text: 'Here’s something interesting:',
      url: 'https://example.com',
    })
      .then(() => console.log('Link shared successfully!'))
      .catch((error) => console.error('Error sharing link:', error));
  } else {
    alert('Your browser does not support the Web Share API.');
  }
});

プレビュー:

3. ファイルの共有

Web Share API を使用すると、ファイルを共有することもできます。ユーザーがデバイスからファイルを選択して共有する方法は次のとおりです:

HTML:

<input type="file">



<p><strong>JavaScript:</strong><br>
</p>

<pre class="brush:php;toolbar:false">const fileInput = document.getElementById('fileInput');
const shareFilesButton = document.getElementById('shareFiles');

shareFilesButton.addEventListener('click', () => {
  const files = fileInput.files;
  if (files.length === 0) {
    alert('Please select files to share.');
    return;
  }

  if (navigator.canShare && navigator.canShare({ files })) {
    navigator.share({
      files: Array.from(files),
      title: 'Sharing Files',
      text: 'Here are some files I want to share with you.',
    })
      .then(() => console.log('Files shared successfully!'))
      .catch((error) => console.error('Error sharing files:', error));
  } else {
    alert('Your browser does not support file sharing with the Web Share API.');
  }
});

プレビュー:

ブラウザの互換性

Web Share API は最新のモバイル ブラウザーのほとんどでサポートされていますが、デスクトップのサポートはまだ追いついていません。不愉快な事態を避けるために、canShare メソッドを使用して、共有しているものを API がサポートしているかどうかを確認してください。

JavaScript:

if (navigator.canShare && navigator.canShare({ files: [new File([], 'example.txt')] })) {
  console.log('File sharing is supported!');
} else {
  console.log('File sharing is not supported on this browser.');
}

ブラウザの互換性の詳細については、MDN Web Share API ドキュメントを参照してください。

---

まとめ

Web Share API は、アプリに共有機能を追加するための革新的なツールです。ユーザーのデバイスのネイティブ機能を活用することで、開発時間を節約しながら、スムーズで洗練されたエクスペリエンスを提供します。

そのため、次回カスタム共有インターフェースを構築したくなったら、Web Share API に面倒な作業を任せてください。

質問がございましたら、お気軽に Twitter の @sprucekhalifa までメッセージをください。さらに詳しい情報や最新情報を入手するには、忘れずにフォローしてください。

コーディングを楽しんでください! ?

以上が日帰り学習 JavaScript API: Web 共有 APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。