Web 共有 API を使用した OS 共有 UI との統合-jsチュートリアル-php.cn

Web 共有 API を使用した OS 共有 UI との統合

PHPz

リリース： 2024-07-20 03:22:00

オリジナル

1157 人が閲覧しました

Integrating with the OS Sharing UI using the Web Share API

Web 共有 API を使用すると、Web アプリケーションは、オペレーティングシステムのネイティブ共有機能を使用して、URL、テキスト、ファイルなどのコンテンツを他のアプリケーションと直接共有できます。この API は、OS の組み込み共有ダイアログを活用して、シームレスで統合されたユーザーエクスペリエンスを提供します。

Web共有APIとは何ですか?

Web 共有 API は、Web アプリケーションがデバイスのオペレーティングシステムのネイティブ共有機能を呼び出せるようにする最新の JavaScript API です。この API は、ユーザーが Web アプリのコンテンツを電子メール、メッセージングアプリ、ソーシャルメディアプラットフォームなどの他のアプリケーションに直接共有できるようにするのに役立ちます。

要件

実際の例に入る前に、次のことを確認してください:

ブラウザのサポート: Web Share API は、Chrome、Edge、Safari、Opera などのほとんどの最新ブラウザでサポートされています。ただし、Firefox と Internet Explorer ではサポートされていません。
HTTPS: Web 共有 API が機能するには、Web アプリケーションは HTTPS 経由で提供される必要があります。
モバイルデバイス: API は主にモバイルデバイス向けに設計されていますが、一部のデスクトップ環境でもサポートされている場合があります。

実践例

この例では、Web Share API を使用して URL、テキスト、ファイルを共有する「共有」ボタンのある単純な Web ページを作成します。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Share API Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>Web Share API Example</h1>
  <button id="shareButton">Share This Page</button>

  <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const shareButton = document.getElementById('shareButton');

  shareButton.addEventListener('click', async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: 'Web Share API Example',
          text: 'Check out this amazing Web Share API example!',
          url: 'https://example.com',
          files: [new File(['Hello, World!'], 'example.txt', { type: 'text/plain' })],
        });
        console.log('Content shared successfully!');
      } catch (error) {
        console.error('Error sharing content:', error);
      }
    } else {
      alert('Web Share API is not supported in your browser.');
    }
  });
});

ログイン後にコピー

説明

HTML: HTML ファイルには、「このページを共有」というテキストを含む単純なボタンが含まれています。このボタンをクリックすると、共有機能がトリガーされます。
JavaScript: JavaScript コードは DOMContentLoaded イベントをリッスンして、クリックイベントリスナーを共有ボタンにアタッチする前に DOM が完全にロードされていることを確認します。
- navigator.share メソッドは、ネイティブ共有ダイアログを呼び出すために使用されます。
- share メソッドは、次のプロパティを持つオブジェクトを受け入れます。
  - title: 共有するコンテンツのタイトル。
  - text: コンテンツのテキスト説明。
  - url: 共有する URL。
  - files: 共有されるファイルの配列 (オプションであり、追加のブラウザーのサポートが必要です)。