現代において、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です。今後の拡張に期待しましょう。