ContactsManager

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

ContactsManager は連絡先ピッカー API のインターフェイスで、ユーザーが連絡先リストから項目を選択し、選択した項目の限られた詳細をウェブサイトやアプリケーションと共有できるようにします。

ContactsManager` はグローバルな navigator.contacts プロパティを通して利用することができます。

インスタンスメソッド

select()

Promise を返します。これが解決すると、ユーザーに連絡先ピッカーが表示され、共有したい連絡先を選択してもらうことができます。

getProperties()

Promise を返します。これは、利用できる連絡先プロパティを示す文字列の配列 (Array) で解決します。

例

機能検出

以下のコードは、連絡先ピッカー API に対応しているかどうかを調べるものです。

js
const supported = "contacts" in navigator && "ContactsManager" in window;

対応しているプロパティのチェック

以下の非同期関数は、 getProperties メソッドを使用して、対応しているプロパティを調べています。

js
async function checkProperties() {
  const supportedProperties = await navigator.contacts.getProperties();
  if (supportedProperties.includes("name")) {
    // run code for name support
  }
  if (supportedProperties.includes("email")) {
    // run code for email support
  }
  if (supportedProperties.includes("tel")) {
    // run code for telephone number support
  }
  if (supportedProperties.includes("address")) {
    // run code for address support
  }
  if (supportedProperties.includes("icon")) {
    // run code for avatar support
  }
}

連絡先の選択

以下の例では、それぞれの連絡先に対して取得するプロパティの配列を設定し、また、複数の連絡先を選択できるようにオプションオブジェクトを設定しています。

そして、 select() メソッドを使用して、ユーザーに連絡先ピッカーインターフェイスを表示し、選択された結果を処理する非同期関数が定義されます。

js
const props = ["name", "email", "tel", "address", "icon"];
const opts = { multiple: true };

async function getContacts() {
  try {
    const contacts = await navigator.contacts.select(props, opts);
    handleResults(contacts);
  } catch (ex) {
    // Handle any errors here.
  }
}

handleResults() は開発者が定義する関数です。

仕様書

Specification
Contact Picker API
# contacts-manager

ブラウザーの互換性

BCD tables only load in the browser

関連情報