BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Web Share APIの紹介

Web Share APIの紹介

原文(投稿日:2019/07/21)へのリンク

Web Share APIは、ネイティブデバイスの共有機能をブラウザに公開する。元々はモバイルデバイス用に設計されたものだが、OSX(Safariを使用)でも動作する。

Web Share APIでは、3つのプロパティ(URL、テキスト、タイトル)を持つオブジェクトを受け入れる、"navigator.share()"という単一のメソッドを公開する。ユーザが共有アクションを完了すると、resolveを行うPromiseを返す。

APIが呼び出されると、ネイティブ共有ウィンドウが開き、利用可能な共有ターゲットのリストが表示される。

ネイティブ共有のプロセスを使用することにより、使い慣れたインターフェイスがユーザに公開される、複数のソーシャルネットワークにサインインする必要がなくなる、これまでブラウザでは利用できなかった新しい共有ターゲットが提供されるなど、Webサイトに大きなメリットがある。

悪用を避けるため、Web Share APIにはいくつかの制限がある。Webサイトは[HTTPS](https://en.wikipedia.org/wiki/HTTPS)経由で提供されなければならず、共有の開始はユーザアクション(クリックなど)によって行われる必要がある。

簡単な共有プロセスの例は次のようになる。

document.querySelector('.sharebtn').addEventListener('click', shareSite)

function shareSite() {
    navigator.share({
        title: document.title,
        text: 'Hello World',
        url: 'https://mewebsite.com',
    })
    .then(() => {
        console.log('Share completed successfuly')
    })
    .catch((error) => { console.log(`share failed: ${error}`) });        
}

現在のバージョンには、URLを共有する機能のみが含まれている。 Web Share API レベル2のリリースでは、他のアプリケーションとのファイル共有などの機能が追加される予定だ。

Web Share API レベル2は現在、Chrome内で積極的に開発が進められている。Chromeのステータスウェブサイトで、進捗状況を確認することができる。

この記事に星をつける

おすすめ度
スタイル

BT