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

公開日:

修正日:

ウェブページにシェアボタン(あるいはソーシャルボタン)が登場して長く経ちますが、提供されているコードを埋め込むと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({
  title: <共有するタイトル>,
  text: <共有するテキスト>,
  url: <共有するURL(相対URL可)>
});

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

コード例

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

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

<p><button type="button" disabled="" class="share_button">シェアする</button></p>
<p><button type="button" disabled="" class="share_button" data-share-title="navigator.share() によるシェアボタン" data-share-text="Web Share API を使ったシェアボタンのコード例を紹介します。" data-share-url="https://codepen.io/SaekiTominaga/pen/VMmqzG">シェアする</button></p>

次に JavaScript です。

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

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

さらに CSS で

.share_button[disabled] {
  display: none;
}

と指定すれば、未対応ブラウザではボタンそのものが表示されなくなります。

Android 版 Chrome での挙動

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

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

図拡大
図1:シェアボタンを押したときの様子

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

図拡大
図2:Gmail を選択したときの様子

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

図拡大
図3:Twitter 公式アプリを選択したときの様子

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

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

図拡大
図4:twitcle plus を選択したときの様子

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

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

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