BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. Web Share APIによるシェア機能を使ってみる
by 漢ムラタ 漢ムラタ

Web Share APIによるシェア機能を使ってみる

Web Share APIによるシェア機能を使ってみる

子どもが生まれてからすっかり早寝早起きになったムラタです。

何かしらのSNSを使って記事をシェアすることが当たり前になった昨今、ブログ記事やページにシェアボタンを配置することはとても多くなったと思います。

ただ実際配置するとなると大体「Facebook」や「Twitter」や「LINE」のシェアボタンだけになることが多く、その他のシェアしたいサービスへの選択肢を失わせているかと思います。

かといってシェアしたい可能性のある全てのサービスのボタンを配置するなんて勿論どう考えても現実的じゃないですよね。

まあFacebook、Twitter、Lineがあればほとんどのユーザーは事足りるといえばそうかもしれないですが、できるならユーザー側で任意のサービスを選ばせてあげられるといいと思いませんか?

割と最近使えるようになった「Web Share API」という仕組みを使うとユーザーの端末にインストールされているシェア対象のアプリを好きに選ぶことができるらしいので実際どういう感じなのか試してみました。

Web Share APIって?

W3Cで提案されているブラウザ標準機能で、OSネイティブのシェア機能をブラウザから呼び出すことができます。
つまりios safariでいえば画面下メニューにある「送る」で、Android Chromeならメニューの「共有」を選択した時にでる機能を呼び出せるということみたいですね。

現在Web Share APIにはLevel1Level2があり、Level1は「タイトル」「テキスト」「URL」のみの簡易なシェアでいわゆる一般的なシェア内容になっています。
一方Level2ではLevel1の内容に加えてユーザーが選択した「ファイル」も一緒に共有できるようになるらしいです。ファイル・・・?

利用可能ブラウザ

当然使えるブラウザと使えないブラウザがあります。

2019年10月時点ではPCは「safari」のみでスマホは「iOS safari」と「Android Chrome」のみが対応しています。

要するにほぼスマホのブラウザのみでPCのブラウザでは実質使えないと考えたほうが良さそうです。

なのでWeb Share APIを使用する際はスマホか否かで出力の切り分けが必要になってきますね。

使用条件

https」でなければこのWeb Share APIを使用することはできません。
この点はまあ大した問題ではないかと。

導入

それでは早速APIを使ってみましょう。
実装は非常に簡単で、ただ普通に動かすだけなら下記のような短い記述になります。

「if(navigator.share)」でWeb Share APIをサポートしているか否かで分岐させて、サポートしていない場合はアラートを出していますが、そもそもサポートしていない場合は押させないようにAPIによるボタンではなく通常のSNSのボタンを出すなどの出し分けをした方がスマートですね。

サポートしている場合は「navigator.share」で「title」「text」「url」の3つを指定します。見ての通り、titleはページのタイトルでtextは本文、urlはページのURLになります。
基本的にtitleタグやmetaタグのdescriptionなどから引っ張ってくるようにしておけば問題ないかと思います。

実際の動作

ios13のsafariで試してみるとボタンをタップするとios safari標準機能の「共有」を選択した時とほぼ同じUIが表示されるのが分かります。
TwitterやFacebookだけでなく、「メッセージ」や「メール」、「リマインダー」などにも送れます。

一番上のタブに「text」で指定した値が表示されていて、その下にシェアさせるアプリが並ぶようになっています。

メールで共有

試しに「メール」を選択してみます。

本文にtextの値とそのあとにurlの値が入っているのが分かりますが、「件名」にtitleが入っていませんね・・・

Gmailで共有

次にGmailを選択してみます。

今度はちゃんと件名が入っていますがどうやらtitleではなくtextが入っているようです。雲行きが怪しくなってきました。

最後に大御所Twitter、Facebook、LINEも試してみましょう。

Twitterで共有

うーん・・・なんかこざっぱりとしてる。
textは出力されているようですがOGP画像とかURLとか何もでないようですね。これだと本当に現在のページを共有しようとしているのか分からない気が・・・あと公開範囲とかの設定も無いようです。

これTwitterのアプリ上で処理してるのではなくてブラウザ上で処理されてるからこのしょぼさなんでしょうか?

LINEで共有

LINEに関してはTwitterと違ってLINEアプリ上で処理されるのでtitle、text、url、諸々出てますし、OGP画像も確認できます。

Facebookで共有

こちらもTwitterと同じくブラウザ上で動作しているようですが、ちゃんと諸々表示されてますし公開範囲や友達のタグ付け、OGP画像などもバッチリです。

こうなってくるといよいよTwitterだけあんな体たらくなのか謎ですね・・・

結論

今回ざっと試してみたWeb Share APIですが、結果として使えるか使えないかと言われると使えなくはないけど正直もうちょっと様子を見たい感じでしょうか。
特にTwitterのあの非常に残念な感じをどうにかして欲しいところですね。これはAPIというよりOS側の問題だと思いますが。

ただWeb Share APIは最近Level2が実装されたりと今後も継続的にアップデートされていくことが期待されるので、今後の動きによっては取り入れても良いんじゃないでしょうか。

ページの先頭に戻る