カヤック 技術部でフロントエンジニア・プランナーをしてますゆうもやです。
面白法人グループアドベントカレンダー2024 11日目記事です。
皆様「Web Share API」をご存知でしょうか？Webページからアプリに直接画像やテキストをシェアできる非常に便利な機能です。 カヤックでは診断やジェネレーター系コンテンツを多く制作しているため、このAPIを頻繁に活用してきました。
しかし、最近一部のスマホで期待通りに動作しないケースが増えているのをご存知でしょうか？
Web Share APIとは
Web Share APIは、Webページから直接画像やテキストをシェアできるAPIです。 主にスマートフォンで使用し、診断コンテンツ等で診断結果の画像をX等に直接シェアするのに役立ちます。
ブラウザで画像を生成することで、OGP画像用のサーバーを用意する必要がなくなり、静的なフロントエンドだけで完結するのもメリットです。
使い方のおさらい
Web Share APIの基本的な使い方は以下の通りです。
const shareData = { title: 'タイトル', text: '共有するテキスト', url: 'https://example.com' }; await navigator.share(shareData);
navigator.shareがWeb Share APIを実行するメソッドであり、引数にタイトル、テキスト、URLを指定するとOSの共有ダイアログを呼び出せます。
動かないらしい
そんな便利なWeb Share APIですが、最近期待通りに動かなくなっています。 主にAndroidで「テキスト・画像のシェアにおいて、どちらか一方しかシェアされず排他的」という現象が起きています。 2023年あたりから一部端末で動かなくなり、現在Androidはほぼ全滅です。
動作を確かめられるWEBサイトを作成したのでお手元の端末で動作をお確かめください。
最新のiPhoneとPixel端末で「テキスト・URL・画像」を指定してシェアした場合、以下の結果となりました。
| テキスト | URL | 画像 | |
|---|---|---|---|
| iOS | ✅ | ❌ | ✅ |
| Android | ❌ | ✅ | ✅ |
Xアプリの問題ではなくOSの問題になるため、X以外にシェアした場合も同様の結果になります。
対応方法
以下の対応が有効です。
1. AndroidではURLのシェアを優先する
テキストの共有は諦め、URLのみを確実に表示させる。
1. iOSではテキストにもURLを含める
URLは共有されないため、テキスト欄にURLを記載する。
コードにすると以下の通りです。ちなみに、url欄にテキストを入れる作戦も試しましたが、動作しませんでした。
const url = 'https://example.com'; const shareData = { title: 'タイトル', text: `共有するテキスト${url}`, url, }; await navigator.share(shareData);
まとめ
Web Share APIは、特に診断コンテンツなどで大変便利な機能ですが、端末ごとに挙動が異なるため以下を意識しましょう。
- テキストとURLを両方設定する
- テキストにもURLを入力する（iOS対策）
- Androidでテキスト表示されない事を許容する
- 端末によってはテキストもURLも生き残り、URLが重複することもある
ちなみにPCだと
以前はPCでのWeb Share APIはほぼ非対応でしたが、最近では対応が進んでいます。しかし、PCのWeb Share APIはX動線にならないため使わないほうが良いです。そのためユーザーエージェント等でPC・スマホ判定を行い、PCでは通常のダウンロードボタン&ツイートボタンを配置することが好ましいです。
