Web Share API

Shogo SENSUI (shogosensui.com)

SIer での受託開発を経て、2012 年に株式会社サイバーエージェントに入社。プロダクト開発の傍ら、エンジニア組織のマネジメントに従事。2018 年に株式会社メルカリに入社後は、株式会社メルペイの Frontend チームの立ち上げや Web 版の「メルカリ」の刷新、メルカリアプリのコードベース刷新を牽引した後に、執行役員 VP of Engineering としてメルペイのエンジニアリング部門を管掌。2023 年 4 月にデジタル庁入庁。2023 年 7 月に株式会社ハウテレビジョン入社、執行役員プロダクト本部長に就任。mond 認定回答者、TechFeed 公認エキスパート (Web 標準技術 • JavaScript)。

Web における共有の機能

従来はコピーさせるか URL ベースで実装

  • 共有させたい文言を用意しておくなり、URL をコピーするなり

Web Intent の例

  • X の例: https://x.com/intent/tweet?text=Hello%20World!
  • はてなの例: https://b.hatena.ne.jp/entry/s/1000ch.net

従来の Web Intent の課題

共有先をコントロールできない

  • リンクを貼れば良いので至ってシンプル、しかし共有したい先は利用者に依存する
  • X の Web Intent が設置されていても、Bluesky に共有しやすいわけではない

URL である以上ナビゲーションを伴う

  • できれば画面遷移せずに機能を実現したい
  • 「連携先の認証情報を持って自動で投稿」などは、実装上の複雑性が大きい

Web Share API

Web Share API
button.addEventListener('click', async () => {
  try {
    const data = {
      title: 'MDN',
      text: 'Learn web development on MDN!',
      url: 'https://developer.mozilla.org',
    };

    if (navigator.canShare?.(data)) {
      await navigator.share(data);
    } else {
      console.log(`Couldn't share data`);
    }
  } catch (error) {
    console.error(error);
  }
});
flowchart TB subgraph os[OS] subgraph browser[ブラウザ] webapp[Web アプリケーション] end subgraph app1[アプリケーション] receiver1[text と url を受け取る機能] end subgraph app2[アプリケーション] receiver2[text と files を受け取る機能] end webapp --text, url--> receiver1 webapp --text, files--> receiver2 end

Web Share Target API

PWA もアプリとして受け取れる

  • モバイル OS の PWA であれば、Web Share API の対象として扱われる
  • 画像ファイルを受けとる Squoosh やテキストを受け取る X など

Web app manifest の一部

  • share_target に「どのデータを受け取り、何をトリガーするか」を指定する
Web app manifest の share_target プロパティ
{
  "share_target": {
    "action": "/shared-content-receiver/",
    "method": "GET",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link"
    }
  }
}