ウェブ用の連絡先選択ツール

Contact Picker API を使用すると、ユーザーは連絡先リストから連絡先を簡単に共有できます。

Pete LePage

Contact Picker API とは

モバイル デバイスでユーザーの連絡先にアクセスする機能は、それ以降、iOS/Android アプリの機能となっています。 まさに時間の夜明けです。これはよくある機能リクエストの一つで、 ウェブ デベロッパーから聞いた話ですが、多くの場合、ウェブ デベロッパーが iOS/Android アプリを構築する主な理由になっています。 。

Android M 以降の Chrome 80 では、Contact Picker API の仕様が ユーザーが連絡先リストからエントリを選択し、 選択したエントリの限定的な詳細情報をウェブサイトと共有する機能。ユーザーは、 必要なものを必要なタイミングでだけ共有し、ユーザーが簡単に つながることができます。

たとえば、ウェブベースのメール クライアントで Contact Picker API を使用して、 メールの受信者を選択します。Voice-over-IP アプリは どの電話番号にかけるかを決定しますソーシャルネットワークを使えば すでに参加している友達が表示されます。

Contact Picker API を使用する

Contact Picker API では、オプション パラメータを含むメソッド呼び出しが必要です。 必要な連絡先情報のタイプを指定します。2 つ目の方法では、 どのような情報を提供するかを決定します。

機能検出

Contact Picker API がサポートされているかどうかを確認するには、次のコマンドを使用します。

const supported = ('contacts' in navigator && 'ContactsManager' in window);

また、Android で連絡先選択ツールを使用するには Android M 以降が必要です。

連絡先選択ツールを開く

Contact Picker API のエントリ ポイントは navigator.contacts.select() です。 呼び出されると、Promise が返されて連絡先選択ツールが表示され、 サイトと共有する連絡先を選択します。変更後 共有する情報を選択して [Done] をクリックすると、Promise が ユーザーが選択した連絡先の配列。

select() を呼び出すときは、使用するプロパティの配列を指定する必要があります。 最初のパラメータとして返されます（指定できる値は 'name'、'email'、'tel'、'address'、'icon' など） 必要に応じて複数の連絡先を 選択します

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

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

Contacts Picker API は、セキュア ブラウジング コンテキストを提供します。また、他の強力な API と同様に、 行います。

使用可能なプロパティの検出

使用可能なプロパティを検出するには、navigator.contacts.getProperties() を呼び出します。 どの Promise を返したかを示す文字列の配列で解決されます。 プロパティを使用できます。（例: ['name', 'email', 'tel', 'address']）。これらの値は select() に渡すことができます。

宿泊施設は常に利用できるとは限らず、新しい宿泊施設が 追加されました。今後、他のプラットフォームや連絡先ソースでは、 どのプロパティが共有されますか？

結果の処理

Contact Picker API は連絡先の配列を返します。各連絡先には以下が含まれます リクエストされたプロパティの配列。連絡先に ユーザーがプロパティの共有をオプトアウトした場合 場合、API は空の配列を返します。（ユーザーがプロパティを選択する方法について （[ユーザー コントロール] セクションで確認できます）。

たとえば、サイトが name、email、tel をリクエストし、ユーザーが は、名前フィールドにデータがある単一の連絡先を選択し、 電話番号を持っているものの、メールアドレスがない場合、次のようなレスポンスが返されます。

[{
  "email": [],
  "name": ["Queen O'Hearts"],
  "tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]

セキュリティと権限

Chrome チームはコア 定義されている 強力なウェブ プラットフォーム機能へのアクセスの制御 あらゆる側面に関与しています。それぞれについて説明します

ユーザー コントロール

ユーザーのアクセス権ピッカーを介して呼び出すことができます。 安全なトップレベルのブラウジング コンテキストでのユーザー操作。 これにより、ページの読み込み時に選択ツールを表示したり、ランダムに表示したりすることが 選択ツールが表示されます。

<ph type="x-smartling-placeholder">
</ph> スクリーンショット。ユーザーは共有するプロパティを選択できます。 <ph type="x-smartling-placeholder">
</ph> ユーザーは一部のプロパティを共有しないことを選択できます。このスクリーンショットでは、 ユーザーが [電話番号] のチェックボックスをオフにしました] ボタンを離します。このサイトは サイトと共有されることはありません。

ユーザーにすべての連絡先を一括選択させるオプションがない 共有する必要がある連絡先のみを選択できます 確認できますユーザーは、サイトと共有されるプロパティも管理できる 選択ツールの上部にあるプロパティ ボタンで切り替えます。

透明性

どの連絡先情報が共有されているかがわかるように、選択ツールは常に には、連絡先の名前とアイコンに加え、サイトに設定されているプロパティが表示されます。 渡されます。たとえば、サイトが name、email、tel をリクエストした場合、 3 つのプロパティすべてが選択ツールに表示されます。または サイトが tel のみをリクエストしている場合は、選択ツールには名前のみが表示され、 あります。

<ph type="x-smartling-placeholder">
</ph> すべてのプロパティをリクエストしているサイトの選択ツールのスクリーンショット。 <ph type="x-smartling-placeholder">
</ph> 選択ツール、リクエストしているサイト: name、email、 tel、1 件の連絡先を選択しました。
で確認できます。
<ph type="x-smartling-placeholder">
</ph> 電話番号のみをリクエストするサイトの選択ツールのスクリーンショット。 <ph type="x-smartling-placeholder">
</ph> 選択ツール、tel のみをリクエストするサイト、1 件の連絡先を選択しました。
<ph type="x-smartling-placeholder">
</ph> 連絡先が長押しされたときの選択ツールのスクリーンショット。 <ph type="x-smartling-placeholder">
</ph> 連絡先を長押しした結果。

連絡先を長押しすると、次の内容がすべて表示されます。 連絡先が選択されている場合は（チェシャ猫の連絡先画像を参照）。

権限の永続性なし

連絡先へのアクセスはオンデマンドで行われ、永続化されません。サイトが特定のルールを アクセスするには、ユーザー操作で navigator.contacts.select() を呼び出す必要があります。 ユーザーは共有する連絡先を個別に選択する必要があります 関連付けられます。

フィードバック

連絡先選択ツールについて、Chrome チームへのご意見をお聞かせください API

実装に問題がある場合

Chrome の実装にバグは見つかりましたか？それとも どうなるでしょうか

  • https://new.crbug.com でバグを報告します。できるだけ多くの バグを再現するための簡単な手順を提供する。 [Components] を Blink>Contacts に設定します。Glitch で大活躍 では、問題を再現してすばやく簡単に共有できます。

API の使用をご計画の場合は、

Contact Picker API を使用する予定はありますか？皆様の公的なサポートは、 Chrome チームが機能の優先順位付けを行い、他のブラウザ ベンダーにその方法を教える サポートすることが重要です。

  • どのように使用する予定なのかを WICG の談話スレッドで共有してください。
  • ハッシュタグを使用して @ChromiumDev にツイートしてください #ContactPicker、 どこで、どのように使用されているかをお知らせください。

関連情報

ありがとう

Finnur Thorarinsson 氏と Rayan Kanso 氏に感謝いたします。 ピーター・ベバールー（Peter Beverloo）氏が コード デモ用に盗まれてリファクタリングされました。

追伸: 連絡先選択ツールに表示されている名前は不思議の国のアリスのキャラクターです。