Web Share API

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

Transcript

1. Web Share API Web Share API by @1000ch 1
2. 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
3. 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
4. 従来の Web Intent の課題 共有先をコントロールできない リンクを貼れば良いので至ってシンプル、しかし共有したい先は利用者に依存する X の Web Intent が設置されていても、 Bluesky に共有しやすいわけではない URL である以上ナビゲーションを伴う できれば画面遷移せずに機能を実現したい 「連携先の認証情報を持って自動で投稿」などは、実装上の複雑性が大きい Web Share API by @1000ch 4
5. Web Share API OS と連動しアプリを跨いで「タイ トル・テキスト・ URL・ファイル」 を、サポートするアプリに共有で きる Android/iOS の主要ブラウザでサ ポートされている Web Share API by @1000ch 5
6. 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
7. OS ブラウ アプリケー アプリケー text, text, f Web アプリケー text と url を受け text と files を受け Web Share API by @1000ch 7
8. Web Share Target API PWA もアプリとして受け取れる モバイル OS の PWA であれば、 Web Share API の対象として扱われる 画像ファイルを受けとる Squoosh やテキストを受け取る X など Web app manifest の一部 share_target に「どのデータを受け取り、何をトリガーするか」を指定する Web Share API by @1000ch 8
9. { "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