Web 用のContact picker

# Contact Picker APIとは何ですか？

モバイルデバイス上のユーザーの連絡先へのアクセスは、従来から（ほぼ）iOS / Android アプリの機能となっています。これは、 Web 開発者から寄せられる最も一般的な機能リクエストの 1 つであり、多くの場合、 iOS/Android アプリを構築する主な理由です。

Android版のChrome 80で利用可能なContact Picker APIはユーザーの連絡先リストからエントリを選択し、選択したエントリの限定された詳細をWebサイトと共有できるようにするオンデマンドAPIです。これにより、ユーザーは必要なときに必要なものだけを共有でき、友人や家族と取りやすくなります。

例えば、Webベースの電子メールクライアントは、Contact Picker APIを使用して電子メールの受信者を選択できます。Voice-over-IPアプリは、どの電話番号に電話をかけるかを検索できます。また、ソーシャルネットワークを使用すると、ユーザーがどの友達がすでに参加しているか検出できます。

# 現在のステータス

# Contact Picker APIの使用

Contact Picker APIには、必要な連絡先情報のタイプを指定するoptionsパラメーターを指定したメソッド呼び出しが必要です。 2番目の方法は、基盤となるシステムが提供する情報を示します。

# 特徴の検出

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

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

さらに、Androidでは、ContactPickerにはAndroid M またはそれ以降が必要です。

# Contact Pickerを開きます

Contact Picker APIのエントリポイントはnavigator.contacts.select()です。呼び出されると、プロミスが返され、連絡先ピッカーが表示されます。これにより、ユーザーはサイトで共有する連絡先を選択できます。共有するものを選択して完了をクリックすると、ユーザーが選択した一連の連絡先でプロミスが解決されます。

select()呼び出すときは、最初のパラメータとして返されるプロパティの配列を指定する必要があります。指定できる値は、 'name' 、 'email' 、 'tel' 、 'address' または'icon'のいずれかです。また、複数の連絡先を 2 番目のパラメータとして選択できるかどうかを指定する必要があります。

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()を呼び出します。この関数は、使用可能なプロパティを示す文字列の配列で解決するプロミスを返します。例： ['name', 'email', 'tel', 'address'] 。これらの値をselect()渡すことができます。

プロパティが常に使用可能であるとは限らず、新しいプロパティが追加されることに注意してください。将来的には、他のプラットフォームや連絡先ソースによって、共有されるプロパティが制限される可能性があります。

# 結果の処理

Contact Picker API は連絡先の配列を返し、各連絡先には要求されたプロパティの配列が含まれます。連絡先に要求されたプロパティのデータがない場合、またはユーザーが特定のプロパティの共有をオプトアウトすることを選択した場合、APIは空の配列を返します。 （ユーザーがプロパティを選択する方法については、ユーザーコントロールセクションで説明します。）

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

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

# セキュリティと権限

Chromeチームは、ユーザーコントロール、透明性、人間工学など、 強力なWebプラットフォーム機能へのアクセスの制御で定義された基本原則を使用して、 Contact Picker APIを設計し実装しました。それぞれ説明します。

# ユーザーコントロール

ピッカー経由でユーザーの連絡先へアクセスします。または、セキュア上位レベル閲覧文脈でのみ、ユーザージェスチャを使用して呼び出すことができます。これにより、サイトがページ読み込み時にピッカーを表示できないようにしたり、文脈がないとピッカーをランダムに表示したりすることができなくなります。

すべての連絡先を一括選択するオプションがないため、特定の Web サイトで共有する必要がある連絡先のみを選択することをお勧めします。ユーザーはピッカー上部のプロパティボタンを切り替えることで、サイトで共有するプロパティをコントロールすることもできます。

# 透明性

共有されている連絡先の詳細を明確にするために、ピッカーには常に連絡先の名前とアイコン、およびサイトが要求したプロパティが表示されます。例えば、 name 、 email 、およびtelをリクエストした場合、3つのプロパティすべてがピッカーに表示されます。または、telのみを要求する場合、ピッカーは名前と電話番号のみを表示します。

連絡先を長押しすると、その連絡先が選択されている場合に共有されるすべての情報が表示されます。（Cheshire Cat連絡先イメージを参照してください）。

# 権限の永続性なし

連絡先へのアクセスはオンデマンドであり、永続的ではありません。サイトがアクセスを要求するたびにnavigator.contacts.select()を呼び出す必要があります。また、ユーザーはサイトと共有する連絡先を個別に選択する必要があります。

# フィードバック

Chrome チームは、 Contact Picker API の使用体験について知りたいと考えています。

# 実装に問題がありますか？

Chromeの実装にバグを見つけましたか？それとも、実装は仕様とは異なりますか？

• https://new.crbug.comでバグを報告してください。できるだけ詳しくバグを再現するための簡単な手順を説明し、Blink>Contactsにコンポーネントを設定してください。グリッチは、問題の再現をすばやく簡単に共有するのに最適です。

# APIの使用を計画していますか？

Contact Picker APIを使用する予定がありますか？パブリックサポートは、Chrome チームが機能に優先順位を決めること、他のブラウザーベンダーがそのサポートの重要性を分かるように役に立ちます。

• WICG Discourseスレッドででの使用計画をを共有してください。
• ハッシュタグ#ContactPicker を使用してツイートを@ChromiumDevに送信し、どこでどのように使用しているかを知らせてください。

# 参考リンク

• 公開説明者
• Contact Pickerの仕様
• Contact PickerAPIデモとContactPickerAPIデモソース
• バグの追跡
• ChromeStatus.comエントリ
• 点滅コンポーネント： Blink>Contacts

# お礼

この機能を実装している Finnur Thorarinsson氏 と Rayan Kanso氏、また、恥ずかしいですが、私がデモのために盗んでリファクタリングしたコードを持つPeter Beverloo氏に感謝します。

追伸：Contact pickerの名前は、不思議の国のアリスのキャラクターです。