初めに
観測範囲にコードメインの記事がなかったので書いてみます。けれども、私自身はフロントエンドでバリバリっていう人ではないので、間違いがあったらコメントをお願いします。おまけに、実際にテストしたわけではないのでそこもご了承いただきたく願います。
Web Share APIとは何ぞや
まずはここから書いていきたいと思います。今まで、WebからほかのサービスへのURL共有といえば、二つの方法がありました。サービスのAPIを使用したシェアボタンと、ブラウザもしくはOSレベルに備え付けられたシェアボタンからとその二つから投稿するものでした。しかし、これは違います。Web上のelementでアクションを起こしたら、OSレベルのシェア機能が呼ばれるのです。そういう関数がChrome 55 Betaから実装されました。
実際に、どう使うの？
ここが問題です。Googleによる記事を読むと、きちんと書いてあります。ここでの登録が必須なようです。そして、そこで発行しているトークンを用いて、認証しなければいけないとか書いてあります。
認証方法
<meta http-equiv="origin-trial" content="ここにトークンを記入">
この一行を挿入するのみです。
シンプルなパターン
navigator.share({
title: document.title,
text: "Hello World",
url: window.location.href
}).then(() => console.log('Successful share'))
.catch(error => console.log('Error sharing:', error));
URLは必須属性みたいです。もう一つ、タイトルか共有テキストをわたしてあげる必要があると書いてあります。
URLを正しく共有するパターン
var url = document.location.href;
var canonicalElement = document.querySelector('link[rel=canonical]');
if(canonicalElement !== undefined) {
url = canonicalElement.href;
}
navigator.share({
title: document.title,
text: "Hello World",
url: url
})
.then(() => console.log('Successful share'))
.catch(error => console.log('Error sharing:', error));
こちらでは、URLを変数としてcanoncialリンクも拾うようにしています。この技は応用が利きそうです。
注意点
先ほど書いた通り、認証が必要になることが一点。そのほかにも、HTTPS環境でなければいけないことや、ユーザーのジェスチャーがトリガーでなければいけないことでイベントを(つまりは自動発火させないこと)。それらに、注意しなければいけません。HTTPS環境が一つハードルになると思います。私もここでリタイヤです。そのほかにも、画像データを共有できません。Web側でOGP対応を済ませていなければ、たいていのwebサービスに画像のみ共有されないことになります。OGP対応をしても、Webサービスによっては画像が共有されないことも考えられます。ただいま、開発中とはされているので首を長くして待ちましょう。
まとめ
このAPIは今までの常識を変えるものです。今までサービスごとに一つのDOMが必要だったなかで、これ一つで代用できてしまいます。また、ユーザーによっては、そのサービスに共有するためのアプリを入れていないなどの場合が考えられます。そのような場合のフォローをどうするかという議論もありそうです。