Subterranean Flower

Web Share APIでページをシェアする

Author
古都こと
ふよんとえんよぷよぐやま!!!

現代において、SNSやアプリへのページシェアは必須とも言える機能です。例えばこのブログの記事も、記事の下部に多数のシェアボタンが設置されています。

Web Share APIはそういったページシェアをブラウザ上で実現するAPIです。今までは各サービス独自のシェアボタンを設置していましたが、Web Share APIを使うことで、統一的な手法でシェアができるようになります。

Web Share APIについて

Web Share APIはページをシェアするためのAPIで、WICGが仕様を定めています。詳しい仕様は以下のURLになります:

対応ブラウザは現在のところAndroid版Chrome61のみです。

簡単な使い方

Web Share APIは非常に単純なAPIです。以下に最も簡単な例を示します:

// ボタンを作ってbodyに追加する
const shareButton = document.createElement('button');
shareButton.textContent = 'Share';
document.body.appendChild(shareButton);

// ボタンがクリックされたらシェアする。
shareButton.addEventListener('click', (e) => {
  navigator.share({url:''}); // 今のページをシェアする(url空白)
});

この例では、ボタンをクリックすると今見ているページをシェアする動作となります。どうシェアするかはブラウザによっても異なりますが、例えばAndroid版Chrome61では以下のような表示がポップアップします:

詳しい使い方

Web Share APIのインターフェイスは以下のようになっています:

navigator.share({title:'ページタイトル', url:'ページのURL', text:'任意のテキスト'});

Web Share APIは、たったこれだけのシンプルなAPIです。データとしてtitle、text、urlが指定できます。このうち最低ひとつは指定している必要があります。

このとき、urlは絶対URL/相対URLのどちらも受け付けます。空白にすると現在のページのURLとなります。

Web Share APIの使用には、コンテキストがセキュアである必要があります。簡単にいうと、HTTPSに対応したページでしか使えません。

また、Web Share APIを使うには、何らかのユーザージェスチャーが必要になります。つまり、ボタンをクリックさせるなど、ユーザーが能動的にシェアする場合のみにしか動作しないということです。

戻り値

navigator.shareはPromise<void>を返します。このPromiseはユーザーがシェアを実行すると解決されます。

シェア対象がひとつも存在しない場合、またはユーザーがシェアをキャンセルした場合、Promise<void>はAbortErrorでrejectされます。

navigator.share({url:''})
    .then(() => console.log('シェア成功!'))
    .catch((e)=>console.log(`シェア失敗:${e.toString()}`));

将来的な拡張性

Web Share APIは将来拡張される可能性があります。将来的には、例えば画像のシェアができるようになるかもしれません。ただし今はtitle、text、urlの3つのみです。

例として、imageがシェアできるようになったとしましょう。このとき以下のようにシェアできます:

navigator.share({image: imageData});

Web Share APIは拡張性を持った柔軟なAPIです。今後の拡張に期待しましょう。