Web Share API で共有メニューを表示してみる
Web Share API というモノが出来ていた。スマホアプリでよくある、OS ネイティブな「共有」メニューをウェブページからでも表示できる機能だ。
以下にデモページを作ってみた。Windows、MacOS、iOS で動作確認してある。
- デモ : Web Share API
- ソースコード : frontend-sandboxes/web-share-api/index.html at master · Neos21/frontend-sandboxes
ソースコードとしては以下のような感じ。
document.getElementById('share-button').addEventListener('click', async () => {
try {
await navigator.share({
title: document.querySelector('title').textContent,
text : 'This is my example page.',
url : location.href
});
console.log('Succeeded');
}
catch(error) {
console.error('Failed', error);
}
});
navigator.share() 関数がキモ。この関数は Promise 形式なので、ココでは async・await を使って実装しているが、.then().catch() で実装しても問題ない。共有メニューが表示できると Fulfilled (成功) になり、その際の戻り値はない模様。
スマホネイティブな雰囲気を出すには有用そうなので、覚えておくと良いかも。
- 参考 : ウェブ共有 API - Web API | MDN
- 参考 : Web Share APIでユーザーの様々なシェア方法を可能にする | フロントエンドBlog | ミツエーリンクス
- 参考 : Web Share API を使ったページ共有を試してみた #JavaScript - Qiita
