ContactsManager
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
ContactsManager
は連絡先ピッカー API のインターフェイスで、ユーザーが連絡先リストから項目を選択し、選択した項目の限られた詳細をウェブサイトやアプリケーションと共有できるようにします。
ContactsManager` はグローバルな navigator.contacts
プロパティを通して利用することができます。
インスタンスメソッド
例
機能検出
以下のコードは、連絡先ピッカー API に対応しているかどうかを調べるものです。
const supported = ('contacts' in navigator && 'ContactsManager' in window);
対応しているプロパティのチェック
以下の非同期関数は、 getProperties
メソッドを使用して、対応しているプロパティを調べています。
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()
メソッドを使用して、ユーザーに連絡先ピッカーインターフェイスを表示し、選択された結果を処理する非同期関数が定義されます。
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