😄

Web Share APIでurl共有モーダルを簡単実装

2023/10/18に公開

JavaScript

今回は以下のようなurl共有機能の実装例を紹介します。

chrome/iPhoneの場合
edge/macbookの場合
safari/macbookの場合

このようなUIや機能は自前で実装するとかなり大変ですが、Web Share APIを利用することで簡単に実装することができます。

要件

PC,スマホの両方に対応したサイトで、urlを共有するボタンを作成する。
LINE, X(旧Twitter), Facebook等への共有機能を持つWeb Share APIを使う。
Web Share APIが対応していない環境ではurlをクリップボードにコピーできる簡易的なモーダルを表示する。

Web Share APIを使用すると、Webアプリは、プラットフォーム固有のアプリと同じ方法で、デバイスにインストールされている他のアプリへのリンク、テキスト、およびファイルを共有できます。

使い方

試しにボタンを押すと現在のurlを共有する簡単なページをReact(typescript)で作成しました。

以下は共有ボタンコンポーネントのコードです。

export const ShareButton = () => {
  const handleClick = useCallback(() => {
    const url = window.location.origin;

    void (async () => {
      if (navigator.share) {
        // Web share API
        await navigator.share({
          url,
        });
      } else {
        // Web Share APIが使えないブラウザの処理
        await navigator.clipboard.writeText(url);
        alert("URLをコピーしました");
      }
    })();
  }, []);

  return <button onClick={handleClick}>urlを共有する</button>;
};

Web Share APIは一部のブラウザで使用できないので（対応ブラウザは後述します）、navigator.shareが存在するかどうかで処理を分岐しています。
- Web Share APIが使えない環境の場合、シンプルにクリップボードにurlをコピーしてalertを表示しています。
- chrome/macbookの場合
navigator.shareの引数に共有したいdataを渡します。今回はurlのみですが、title, text, fileなども指定できます。
- ただし、titleの扱われ方は共有先のプラットフォームに依存します。（例えばXの投稿画面にはurlのみ表示されますが、gmailにはタイトルとurlどちらも表示されます。）
- textは「文章を共有する」という目的がないときは指定しないで良いと思います。
- fileに関しては、navigator.canShareというファイルが共有可能かの判定を別途行う必要があります。
navigator.shareはPromiseを返すので、async, awaitを記述します。（buttonのイベントに voidを返す関数として渡せるように、void演算子と即時関数で型を調整しています。）

対応ブラウザ

2023/10現在、firefoxではサポートしていない他、chromeはpartial supportとなっています。少なくともmacOS上のchromeはサポートされていません。
また、Web Share APIは安全なコンテキスト（HTTPS）でしか動作しないので、スマホ等での動作確認の際は、ローカルのアプリケーションにhttpsで接続できるngrokというサービスがおすすめです。

まとめ

Web share APIを使うことで、共有モーダルが簡単に実装できます。chromeが対応してないのが残念ですが、まずはalertでミニマムに対応するのがコスパ的には良いと思います。ぜひ参考にしてください！

要件

Web Share APIとは？

使い方

対応ブラウザ

まとめ

Discussion