Web Share APIは、Webページから navigator.share() を呼び出すだけで、スマートフォンやデスクトップOSが提供するネイティブの共有UI（共有シート・シェアダイアログ）を起動できるWeb APIです。Googleが提唱し、W3C Web Platform Incubator Community Group（WICG）で2016年頃から議論が始まり、2017年にChrome for Androidに最初に実装されました。従来のSNSシェアボタンを多数並べる方式に代わって、ユーザーが自分の好きな共有先（LINE・Twitter・メール・AirDrop・ファイル保存など）をOSレベルで自由に選べる体験を実現する画期的なAPIです。
この記事の目次
- シェア対象とAPIの基本形
- 実行コンテキストとセキュリティ要件
- Webからネイティブへの架け橋
- Web Share Targetとの組み合わせ
- まとめ
シェア対象とAPIの基本形
Web Share APIの呼び出しは navigator.share({ title, text, url }) というオブジェクト一つを渡すだけです。title・text・urlのいずれか1つ以上が含まれていれば動作し、ブラウザはOSネイティブの共有シートを開きます。Promiseが返るため、ユーザーが共有を完了したら resolve、キャンセルなら AbortError が reject される設計です。この単純さが採用の大きな魅力で、従来のSNSごとにシェアURLを組み立てる煩雑な実装と比べてコード量が数行で済みます。
2019年には拡張仕様の「Web Share API Level 2」が登場し、files プロパティで画像・PDF・音声などのファイル本体を共有できるようになりました。navigator.canShare({ files }) で事前に対応可否を判定できるため、未対応ブラウザではURLだけ共有するなどフォールバックも書きやすい設計です。iOS Safariは2018年に、Android Chromeは2019年にこの拡張版を実装し、ブラウザから撮影写真を直接LINEに送るような体験が可能になりました。
実行コンテキストとセキュリティ要件
Web Share APIにはいくつかの重要な制約があります。第一に「HTTPS（または localhost）でしか動かない」セキュアコンテキスト限定です。第二に「ユーザー操作の直接の応答としてしか呼べない」ユーザーアクティベーション要件があります。setTimeout で呼んだり、ページロード時に勝手に開いたりはできず、必ずクリック・タップなどのトリガーから同期的に呼ぶ必要があります。これらは悪意あるサイトが意図せず共有シートを表示する迷惑な動作を防ぐための仕様です。
サポート状況は、2017年のChrome for Androidから始まり、2018年にSafari（iOS）、2022年にChrome・Edge（Windows・macOS・ChromeOS）、Firefoxは長らく未対応でしたがAndroid版で2022年に対応開始しました。デスクトップ環境ではOSの共有機能の充実度に依存しており、Windows 10/11はWindows共有メニュー、macOSはmacOS共有シートが起動します。Linux・古いブラウザではフォールバックが必要なため、if (navigator.share) でAPI存在を判定し、未対応時は従来のSNSボタンや「URLをコピー」ボタンに切り替える設計が一般的です。
Webからネイティブへの架け橋
もっとも一般的な用途は、メディアサイトの記事シェアボタンの置き換えです。TwitterやFacebookやLINEなど5つも6つも並んでいた共有アイコンを一つの「シェア」ボタンにまとめ、押したらネイティブの共有シートでユーザーが好きな宛先を選べるようになります。ボタン数が減ってデザインがスッキリし、利用者にとってもインストール済みのお気に入りアプリへワンタップで届けられる点で双方にメリットがあります。ECサイトの商品ページや旅行サイトのプラン紹介画面でも、家族や友人にリンクを送ってもらう導線として広く採用されています。
より発展的な用途では、ブラウザでカメラ撮影した画像をその場でWeb Share APIで共有するPWAアプリ、Web上で生成したPDFや音声ファイルをユーザーが好きなチャットに送れる業務ツールなど、Webからネイティブの共有体験へシームレスに橋渡しする使い方が増えています。TwitterやInstagramのモバイルWebでも本APIを利用しており、Webアプリとネイティブアプリの境界を薄める重要な要素として、Web Capabilities Projectが推進してきたAPI群の代表格に位置します。
Web Share Targetとの組み合わせ
Web Share APIの送信側と対になるのが「Web Share Target」仕様で、こちらはPWAをOSの共有先（共有シートに表示される選択肢）として登録するための仕組みです。Webアプリのmanifest.jsonに share_target フィールドを書くことで、ユーザーが他のアプリで「共有」を選んだ際にそのPWAが選択肢として現れるようになります。Android Chromeで2018年から対応しており、TwitterのモバイルPWAやSpotifyのWeb版が早期から採用しました。
Web ShareとWeb Share Targetが揃うことで、Webアプリ同士・Webアプリとネイティブアプリの間でOSの共有エコシステムに完全に参加できる世界が実現します。従来「Webだから共有体験が貧弱」と言われていた領域が大きく改善され、PWAの実用性を一段引き上げる要素として注目されました。iOSでもPWAサポートの拡充が進めば、Web Share Target対応が一気に広がる可能性があり、今後のWebプラットフォームの行方を占う上で重要なAPIの一つです。
まとめ
Web Share APIは、Webから一行のコードでOSの共有シートを呼び出せる画期的なAPIです。5つも6つも並んでいたSNSアイコンを一つにまとめ、ユーザーが自分の好きな宛先を選べる体験を実現します。Web Share Target仕様と組み合わせれば、Webアプリ自身が共有先として参加することもでき、WebとネイティブのUXの境界を着実に薄めていく重要な存在です。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント