BT

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のステータスウェブサイトで、進捗状況を確認することができる。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。