はじめまして! 2019年10月フロントエンドエンジニアとして入社した上垣です。
入社してから今まで、 Toreta nowのブラウザ版開発に携わっています。
toC サービスを開発していく中でよくある要件として、SNSへのページ共有が挙げられると思います。ただ、実装したことがある方ならおわかりと思いますが、シェアさせたいサービスごとに script を埋め込むのは結構大変です。
代表的なサービスの共有方法
- LINE
Toreta now で共有機能の実装を検討していく中で、Web Share API の存在を知ったので、サービスに導入できるか検証してみました。
Web Share APIとは
Web Share API は、ユーザーが選択した任意の宛先にコンテンツを共有するためのAPIです。
W3Cで仕様が公開されており、現在のステータスは W3C Editors Draft(編集者草案) となっています。
仕様
GitHub
GitHub - w3c/web-share: Web API proposal for sharing data from a web page
対応ブラウザ
Web Share API はまだ編集者草案のステータスですが、2019年12月時点では、Safari, iOS Safari と Chrome for Android の最新版で実装されています。
Can I use... Support tables for HTML5, CSS3, etc
使用方法
window.navigator の share メソッドをシェアしたい内容を引数に渡して呼び出すことで、共有用ダイアログが表示されます。
JavaScript で実装してみたコードは下記のようになりました。
async share() {
if (!window.navigator.share) ｛
alert("ご利用のブラウザでは共有できません。");
return;
}
try {
await window.navigator.share({
title: 'Share API で共有！',
text: 'ご覧の通り、お手軽にSNSにリンクを供することができます。',
url: 'https://example.com/hogehoge',
});
alert('共有が完了しました。');
} catch (e) {
console.log(e.message);
}
}
引数
- data : シェアする URL を表す文字列
- text : シェアするテキストを表す文字列
- title : シェアするタイトルを表す文字列
戻り値
ユーザーがシェア操作を完了させたときに解決される Promise。
実践
実際に、上記コードを Android Chrome, iOS Safari で実行してみました。
（以下の例は私の端末で試したものです。端末にインストールされているアプリによって、シェア対象のアプリは変わります。)
Android 9 Chrome 78
iOS 13.2.3 Safari
Android iOS 双方とも、SNSアプリに限らず、メモ帳やGmailなど、思ったよりも多くのアプリに共有が可能でした。Slack にも共有できたので、自分宛にメッセージを POST してみました。
Slack
title は表示できていませんが、指定したメッセージを共有することができました! 
まとめ
Web Share API は、まだドラフトのステータスながら、最新の iOS safari, Android Chrome で十分使えるレベルで実装されていることがわかりました。
仕様変更の可能性を残しているとはいえ、モバイルメインのサービスであれば、十分に利用検討の価値があるのではないでしょうか。