アプリのユーザーが連絡先の 1 つを選択してメールやチャット アプリケーションでメッセージを送信できるようにしたい、またはユーザーがすでにソーシャル プラットフォームに参加している連絡先を見つけられるようにしたい場合があります。
最新の手法
Contact Picker API の使用
アドレス帳から連絡先を取得するには、Contact Picker API を使用する必要があります。これにより、ユーザーは連絡先リストからエントリを選択し、選択したエントリの限られた詳細情報をアプリと共有できるようになります。name、email、tel、address、icon などの複数のプロパティを利用できます。具体的にサポートされているプロパティを確認するには、navigator.contacts.getProperties() を呼び出します。ユーザーが複数の連絡先を選択できるようにするには、navigator.contacts.select() の 2 番目のパラメータとして {multiple: true} を渡します。
Contact Picker API は、Chrome バージョン 80 以降の Android バージョンでご利用いただけます。
従来からある手法
標準フォームの使用
代替方法として、ユーザーが連絡先の詳細を入力できる通常のフォームを使用する方法があります。
プログレッシブ エンハンスメント
Contact Picker API がサポートされている場合は、静的なフォーム フィールドを非表示にして、代わりに選択ツールボタンを表示します。
const button = document.querySelector('button');
const name = document.querySelector('.name');
const address = document.querySelector('.address');
const email = document.querySelector('.email');
const tel = document.querySelector('.tel');
const pre = document.querySelector('pre');
const autofills = document.querySelectorAll('.autofill');
if ('contacts' in navigator) {
button.hidden = false;
for (const autofill of autofills) {
autofill.parentElement.style.display = 'none';
}
address.parentElement.style.display = 'block';
button.addEventListener('click', async () => {
const props = ['name', 'email', 'tel', 'address'];
const opts = { multiple: false };
try {
const [contact] = await navigator.contacts.select(props, opts);
name.value = contact.name;
address.value = contact.address;
tel.value = contact.tel;
email.value = contact.email;
} catch (err) {
pre.textContent = `${err.name}: ${err.message}`;
}
});
}
関連情報
デモ
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
/>
<title>How to access contacts from the address book</title>
</head>
<body>
<h1>How to access contacts from the address book</h1>
<p>Ship your order as a present to a friend.</p>
<button hidden type="button">Open address book</button>
<pre></pre>
<label> Name <input class="name" autocomplete="name"></label>
<label hidden>Address <input class="address" required></label>
<label>Street <input class="autofill" autocomplete="address-line1" required></label>
<label>City <input class="autofill" autocomplete="address-level2" required></label>
<label>State / Province / Region (optional) <input class="autofill" autocomplete="address-level1"></label>
<label>ZIP / Postal code (optional) <input class="autofill" autocomplete="postal-code"></label>
<label>Country <input class="autofill" autocomplete="country"></label>
<label>Email<input class="email" autocomplete="email"></label>
<label>Telephone<input class="tel" autocomplete="tel"></label>
</body>
</html>CSS
html {
box-sizing: border-box;
font-family: system-ui, sans-serif;
color-scheme: dark light;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 1rem;
}
input {
display: block;
margin-block-end: 1rem;
}
JS
const button = document.querySelector('button');
const name = document.querySelector('.name')
const address = document.querySelector('.address')
const email = document.querySelector('.email')
const tel = document.querySelector('.tel')
const pre = document.querySelector('pre')
const autofills = document.querySelectorAll('.autofill')
if ('contacts' in navigator) {
button.hidden = false;
for (const autofill of autofills) {
autofill.parentElement.style.display = 'none'
}
address.parentElement.style.display = 'block';
button.addEventListener('click', async () => {
const props = ['name', 'email', 'tel', 'address'];
const opts = {multiple: false};
try {
const [contact] = await navigator.contacts.select(props, opts);
name.value = contact.name;
address.value = contact.address;
tel.value = contact.tel
email.value = contact.email;
} catch (err) {
pre.textContent = `${err.name}: ${err.message}`
}
});
}