Web Share API によるシェアボタン

投稿: 2017年9月25日
最終更新: 2020年10月6日

ウェブページにシェアボタン（あるいはソーシャルボタン）が登場して長く経ちますが、提供されているコードを埋め込むとJSゴリゴリでページは重くなり、複数のサービスに対応するためにそれぞれのボタンを並べると、ユーザーにとっては自分が使わないボタンがいくつも視界に入ってくるといった問題が発生します。

なので、個人的にはシェアボタンをずらずらとページに埋め込むのは好きではないのですが、とはいえシェアボタンの存在自体を否定するつもりはありません。最近ではモバイルブラウザはもちろん、PCブラウザでもFirefoxの共有機能(support.mozilla.org)などブラウザ側で機能が提供されている例もありますが、その存在を知らないユーザーも多く、また記事一覧画面にそれぞれの記事のシェアボタンが複数配置される例や、<iframe> の中にシェアボタンがある例など、ブラウザの機能では実現できないケースも存在するからです。

そんな状況を改善してくれるかもしれないのがWeb Share API(wicg.github.io)の navigator.share() です。（※2017年9月現在はドラフト仕様）

デバイスのネイティブな共有機能を呼び出せる。
HTTPS 環境でのみ使用可能。
2017年9月現在、 Android 版 Chrome が対応済み（バージョン61〜）。

2019年3月26日追記Safari は2018年9月26日にTechnology Preview 66(webkit.org)にも実装され、2019年3月26日に配信開始された iOS 12.2 で正式公開されました。

使い方は非常に簡単で、 JavaScript でこう書くだけ。

navigator.share({
  files: <共有するファイル>,
  title: <共有するドキュメントのタイトル>,
  text: <共有するメッセージ本文のテキスト>,
  url: <共有するURL（相対URL可）>
});

2020年10月6日追記2020年5月に files メンバーが追加されました（Add the ability to share files (#133)）。

実際には「シェアボタンが押された時」など、何かしらのイベント発火時にこれを実行することになります。

コード例

それでは動く機能を作ってみましょう。

Web Share API Demo(labs.w0s.jp)

HTMLは単なるボタンを配置します。最低限の属性だけ指定したボタンと、カスタムデータ属性でタイトルやURLを個別指定したボタンの2種類を用意してみます。

<p><button type="button" disabled="" class="share-button">Share</button></p>
<p><button type="button" disabled="" class="share-button"
  data-share-title="Web Share API Demo"
  data-share-text="This page demonstrates the Web Share API."
  data-share-url="http://labs.w0s.jp/js/web-share/">Share</button></p>

次に JavaScript です。

if (navigator.share !== undefined) {
  /* 未対応ブラウザも多いので判定処理 */
  document.addEventListener('DOMContentLoaded', () => {
    for (const shareButtonElement of document.querySelectorAll('.share-button')) {
      shareButtonElement.disabled = false; // ボタンを活性化
      shareButtonElement.addEventListener('click', () => {
        const shareTitle = shareButtonElement.dataset.shareTitle;
        const shareText = shareButtonElement.dataset.shareText;
        const shareUrl = shareButtonElement.dataset.shareUrl;

        try {
          navigator.share({
            title: shareTitle !== undefined ? shareTitle : document.title, // 属性が指定されていないときはページタイトル
            text: shareText,
            url: shareUrl !== undefined ? shareUrl : document.URL, // 属性が指定されていないときはページURL
          });
        } catch (e) {
          console.error('Share failed', e);
        }
      });
    }
  });
}

Android 版 Chrome での挙動

現在対応している Android 版 Chrome で実際にどういう動きになるか見てみましょう。

まず、先に挙げたコードのシェアボタンを押すとこんな感じにアプリの選択エリア[1]が出てきます。EメールやSNS関係だけでなく、「クリップボードにコピー」などもあるので、必ずしも他人に共有する目的だけでなく、自分用メモなどさまざまな目的に活用できることが分かります。

試しに Gmail を選択してみます。アプリが立ち上がり、メールのタイトルに "title" が、本文に "text" と "url" がスペース区切りで挿入されています。

Twitter のように、一つのフィールド内にタイトルやURLをまとめて入れなければならない場合はどうでしょうか。 Twitter 公式アプリの「ツイート」を選択してみます。

"text" と "url" が改行されて挿入されていますね。 "title" に指定した値は無視されてしまうようです。

同じ Twitter でも、アプリによって挙動は異なります。例えばサードパーティークライアントの twitcle plus だと、 "title" と "text" がスペース区切りで、続いて "url" が改行されて表示されます。この場合、ユーザーにとっては "title" と "text" の区切りが分かりにくいですね……。

これらのように、 "title", "text", "url" の各フィールドに指定した値がどのように活用されるかはアプリ次第となります。アプリによっては一部のフィールドが破棄されることもあるので、例えば "title" と "text" の両方がないと意味が伝わらないような指定をするべきではありません。

とはいえ、 Chrome デフォルトの共有機能よりはウェブページ制作者の意図を汲んだ実装が可能ですし、現状のようにサービスごとにボタンを用意する必要もなくなるので、もう少し対応ブラウザが増えてくれば導入する価値はありそうです。ちなみにこのブログも先日対応を行いまして、 Android Chrome でアクセスすると、記事下部の「フィード購読」「プッシュ通知」ボタンの隣に「記事のシェア」ボタンが表示されます。よろしければご活用下さい。

脚注

1.
厳密にはアプリ以外の機能も表示されるので、これらは「share targets（共有ターゲット）」と呼ばれます。本記事では不正確な表現であることを認識しつつも、取っ付きやすさ重視で「アプリ」と呼称させていただきます。 ↩ 戻る