Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@kjugk

Web Share API を使ったページ共有を試してみた

はじめまして! 2019年10月フロントエンドエンジニアとして入社した上垣です。
入社してから今まで、 Toreta nowのブラウザ版開発に携わっています。

toC サービスを開発していく中でよくある要件として、SNSへのページ共有が挙げられると思います。ただ、実装したことがある方ならおわかりと思いますが、シェアさせたいサービスごとに script を埋め込むのは結構大変です。

代表的なサービスの共有方法

Toreta now で共有機能の実装を検討していく中で、Web Share API の存在を知ったので、サービスに導入できるか検証してみました。

Web Share APIとは

Web Share API は、ユーザーが選択した任意の宛先にコンテンツを共有するためのAPIです。
W3Cで仕様が公開されており、現在のステータスは W3C Editors Draft(編集者草案) となっています。

仕様

Web Share API

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.navigato.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

IMG_0769.jpg 2019-12-14 23-08-15.png

iOS 13.2.3 Safari

Monosnap 2019-12-14 23-12-08.png

Android iOS 双方とも、SNSアプリに限らず、メモ帳やGmailなど、思ったよりも多くのアプリに共有が可能でした。Slack にも共有できたので、自分宛にメッセージを POST してみました。

Slack

Monosnap 2019-12-14 22-50-29.png

title は表示できていませんが、指定したメッセージを共有することができました! :smile:

まとめ

Web Share API は、まだドラフトのステータスながら、最新の iOS safari, Android Chrome で十分使えるレベルで実装されていることがわかりました。

仕様変更の可能性を残しているとはいえ、モバイルメインのサービスであれば、十分に利用検討の価値があるのではないでしょうか。

7
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7
Help us understand the problem. What is going on with this article?