Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Share API

Web Share API

2024年4月10日に開催された Engineer Guild Lightning Talk vol.1 (https://howtv.connpass.com/event/315141/) のセッション資料です。

Shogo Sensui

April 10, 2024
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

Transcript

  1. Shogo SENSUI (shogosensui.com) SIer での受託開発を経て、 2012 年に株式会社サイバーエー ジェントに入社。プロダクト開発の傍ら、エンジニア組織の マネジメントに従事。 2018

    年に株式会社メルカリに入社後 は、株式会社メルペイの Frontend チームの立ち上げや Web 版の「メルカリ」の刷新、メルカリアプリのコードベース刷 新を牽引した後に、執行役員 VP of Engineering としてメル ペイのエンジニアリング部門を管掌。 2023 年 4 月にデジタ ル庁入庁。 2023 年 7 月に株式会社ハウテレビジョン入社、 執行役員プロダクト本部長に就任。 mond 認定回答者、 TechFeed 公認エキスパート (Web 標準技術 • JavaScript)。 Web Share API by @1000ch 2
  2. Web における共有の機能 従来はコピーさせるか URL ベースで実装 共有させたい文言を用意しておくなり、 URL をコピーするなり Web Intent

    の例 X の例 : https://x.com/intent/tweet?text=Hello%20World! はてなの例 : https://b.hatena.ne.jp/entry/s/1000ch.net Web Share API by @1000ch 3
  3. 従来の Web Intent の課題 共有先をコントロールできない リンクを貼れば良いので至ってシンプル、しかし共有したい先は利用者に依存する X の Web Intent

    が設置されていても、 Bluesky に共有しやすいわけではない URL である以上ナビゲーションを伴う できれば画面遷移せずに機能を実現したい 「連携先の認証情報を持って自動で投稿」などは、実装上の複雑性が大きい Web Share API by @1000ch 4
  4. 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); } }); Web Share API Web Share API by @1000ch 6
  5. OS ブラウ アプリケー アプリケー text, text, f Web アプリケー text

    と url を受け text と files を受け Web Share API by @1000ch 7
  6. Web Share Target API PWA もアプリとして受け取れる モバイル OS の PWA

    であれば、 Web Share API の対象として扱われる 画像ファイルを受けとる Squoosh やテキストを受け取る X など Web app manifest の一部 share_target に「どのデータを受け取り、何をトリガーするか」を指定する Web Share API by @1000ch 8
  7. { "share_target": { "action": "/shared-content-receiver/", "method": "GET", "params": { "title":

    "name", "text": "description", "url": "link" } } } Web app manifest の share_target プロパティ Web Share API by @1000ch 9