Contact Picker APIã®ãã€ãã£ãé£çµ¡å ã¢ã¯ã»ã¹æ©èœã解説ãå©äŸ¿æ§ãšãäžçã®ãŠãŒã¶ãŒããã³éçºè ã«ãšã£ãŠéèŠãªãã©ã€ãã·ãŒæžå¿µãšã®ãã©ã³ã¹ãåããªããããã®å®è£ ãšå«ççæå³åããçè§£ããŸãã
Contact Picker APIïŒãã€ãã£ãé£çµ¡å ã¢ã¯ã»ã¹ãšé²åãããã©ã€ãã·ãŒã®ç¶æ³ãèªã¿è§£ã
ãŸããŸãçžäºæ¥ç¶ãé²ãããžã¿ã«äžçã«ãããŠãã¢ããªã±ãŒã·ã§ã³ãã·ãŒã ã¬ã¹ã«éä¿¡ããèœåã¯æãéèŠã§ããWebéçºè ã«ãšã£ãŠãããã¯ãã°ãã°ãã©ãŠã¶ããŒã¹ã®äœéšãšããŠãŒã¶ãŒã®ããã€ã¹ãæã€ãªãããªãã€ãã£ãæ©èœãšã®éã®ã®ã£ãããåããããšãæå³ããŸãããã®ãããªéèŠãªæ©èœã®äžã€ããé£çµ¡å æ å ±ãžã®ã¢ã¯ã»ã¹ã§ããæŽå²çã«ãWebã¢ããªã±ãŒã·ã§ã³ã¯ãã®åéã§å€§ããªéå£ã«çŽé¢ããæ±ãã«ãããã¡ã€ã«ã¢ããããŒãããåºæã®ãã©ã€ãã·ãŒãªã¹ã¯ã䌎ãè€éãªãµãŒããŒãµã€ãçµ±åã«é ŒãããšããããããŸããããã®èª²é¡ããéèŠãªã€ãããŒã·ã§ã³ã§ããContact Picker APIãçã¿åºããŸããã
Contact Picker APIã¯ãWebã¢ããªã±ãŒã·ã§ã³ããŠãŒã¶ãŒã®ããã€ã¹é£çµ¡å ãšå¯Ÿè©±ããããã®ãæšæºåãããå®å šã§ããã©ã€ãã·ãŒãå°éããæ¹æ³ãæäŸãã倧ããªé£èºãéããŸãããããããå人ããŒã¿ã«è§Šããããããæè¡ãšåæ§ã«ããã®å®è£ ãšæ¡çšã¯å©äŸ¿æ§ãšãã©ã€ãã·ãŒã®éã®è€éãªãã©ã³ã¹ãšå¯æ¥ã«é¢é£ããŠããŸããéçºè ããã¶ã€ããŒããã©ã€ãã·ãŒæè·è ã®äžççãªãªãŒãã£ãšã³ã¹ã«ãšã£ãŠããã®APIãçè§£ããããšã¯ããã®æè¡ä»æ§ã ãã§ãªãããŠãŒã¶ãŒã®ä¿¡é ŒãããŒã¿ã»ãã¥ãªãã£ããããŠç¡æ°ã®åœéçãªãã©ã€ãã·ãŒèŠå¶ãžã®æºæ ã«å¯Ÿããæ·±ãæå³åããçè§£ããããšã§ããããŸãã
ãã®å æ¬çãªã¬ã€ãã§ã¯ãContact Picker APIãæ·±ãæãäžãããã®ä»çµã¿ãå©ç¹ã課é¡ãæ¢ããŸãããŠãŒã¶ãŒã«èªèº«ã®ããŒã¿ããã现ããå¶åŸ¡ããåãäžãããšåæã«ãéçºè ã«ã¯ãããªããã§çµ±åãããWebäœéšãåµé ããããã®åŒ·åãªããŒã«ãã©ã®ããã«æäŸããã®ããæ€èšŒããŸããããã«ãã°ããŒãã«ãªãã©ã€ãã·ãŒåºæºãå«ççãªéçºæ £è¡ããããŠWebæ©èœã®æªæ¥ãšããããåºãæèã®äžã§ããã®åœ¹å²ãæ¹å€çã«åæããŸãã
ããžã¿ã«ã®é£çµ¡å ããããé£åïŒWebãšãã€ãã£ãã®äžçãç¹ã
é·å¹Žã«ãããããã€ãã£ãã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ãšWebããŒã¹ã®ã¢ããªã±ãŒã·ã§ã³ã®æ©èœã®éã«ã¯ãç¹ã«é£çµ¡å ã®ãããªæ©å¯æ§ã®é«ãããã€ã¹æ©èœãžã®ã¢ã¯ã»ã¹ã«é¢ããŠãæ ¹æ¬çãªæçµ¶ãååšããŠããŸããããã€ãã£ãã¢ããªã¯ããŠãŒã¶ãŒã®ã¢ãã¬ã¹åž³ãžã®ã¢ã¯ã»ã¹ã容æã«èŠæ±ããå人ãæåŸ ããããæ å ±ãå ±æãããããã©ãŒã ãäºåå ¥åããããšãã£ãã¿ã¹ã¯ã®ããã«é£çµ¡å ããŒã¿ãã¯ãŒã¯ãããŒã«çµ±åããããšãã§ããŸãããäžæ¹ãWebã¢ããªã±ãŒã·ã§ã³ã¯ãã»ãã¥ãªãã£ãµã³ãããã¯ã¹ãšãã©ãŠã¶ã®å¶éã«çžããã倧ããªåé¿çãªãã«ãã®æ©èœãåçŸããã®ã«èŠåŽããŠããŸããã
äžè¬çã§ãããªããåé¡ã®å€ã解決çã«ã¯ã以äžã®ãããªãã®ããããŸããïŒ
- æåã§ã®ããŒã¿å ¥åïŒãŠãŒã¶ãŒãé£çµ¡å ã®è©³çްãèŠåŽããŠå ¥åããããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæªãããšã©ãŒãçºçããå¯èœæ§ããããŸãã
- CSV/VCFã¢ããããŒãïŒãŠãŒã¶ãŒã«ããã€ã¹ãã¡ãŒã«ã¯ã©ã€ã¢ã³ãããé£çµ¡å ããšã¯ã¹ããŒãããããã®ãã¡ã€ã«ãWebã¢ããªã±ãŒã·ã§ã³ã«ã¢ããããŒãããããèŠæ±ããŸãããã®æ¹æ³ã¯æ±ãã«ãããæè¡ã«è©³ãããªããŠãŒã¶ãŒã«ãšã£ãŠã¯ãã°ãã°åšå§çã§ãããæ¬åœã«å¿ èŠãªæ å ±ã«é¢ããããé£çµ¡å ãªã¹ãå šäœïŒãŸãã¯ãã®å€§éšåïŒãã¢ããªã±ãŒã·ã§ã³ã®ãµãŒããŒã«ã¢ããããŒãããããããé倧ãªãã©ã€ãã·ãŒæžå¿µãåŒãèµ·ãããŸãã
- ãµãŒãããŒãã£çµ±åïŒå€éšãµãŒãã¹ïŒäŸïŒGoogle ContactsãOutlook Contacts APIïŒã«äŸåããå¥ã®èªèšŒãããŒãå¿ èŠã§ããã°ãã°ãŠãŒã¶ãŒã®é£çµ¡å ãªã¹ãå šäœããµãŒãããŒãã£ãµãŒãã¹ããããŠçµæçã«Webã¢ããªã±ãŒã·ã§ã³ã«å ¬éãããŸããã
ãããã®æ¹æ³ã¯éå¹ççãªã ãã§ãªãããŠãŒã¶ãŒã®ä¿¡é Œãæãªããã®ã§ãããWebã¢ããªã±ãŒã·ã§ã³ã«ããŠãŒã¶ãŒèªèº«ã ãã§ãªãããã®ç€ŸäŒçã»è·æ¥çãããã¯ãŒã¯å šäœã«é¢ããå人æ å ±ã®å®åº«ã§ããé£çµ¡å ãªã¹ãå šäœãžã®å®å šãã€ç¡å¶éã®ã¢ã¯ã»ã¹ãèš±å¯ãããšããèãã¯ãä»ãæãé倧ãªãã©ã€ãã·ãŒã®éå£ã§ãããŠãŒã¶ãŒããã®ãããªåºç¯ãªèš±å¯ãèŠæ±ãããµãŒãã¹ã«èŠæå¿ãæ±ãããã«ãªã£ãã®ã¯åœç¶ã®ããšã§ãã
Contact Picker APIã¯ããã®ãžã¬ã³ãã«å¯ŸããæŽç·ŽãããçããšããŠç»å ŽããŸãããããã¯ãWebã¢ããªã±ãŒã·ã§ã³ããŠãŒã¶ãŒã®ããã€ã¹ããç¹å®ã®é£çµ¡å æ å ±ãèŠæ±ã§ãããæšæºåããããã©ãŠã¶ä»²ä»ã®ã€ã³ã¿ãŒãã§ãŒã¹ãæäŸããŸãããããã¯æç€ºçãªãŠãŒã¶ãŒã®åæãåŸãŠãå®å šãªãã€ãã£ã颚ã®ããã«ãŒUIãéããŠã®ã¿ã§ãããã®ã¢ãããŒãã¯ãWebã¢ããªã±ãŒã·ã§ã³ã«äŸ¡å€ããæ©èœãæäŸãã€ã€ããŠãŒã¶ãŒã®å¶åŸ¡ãšãã©ã€ãã·ãŒãåªå ãããšããç¹ã§ãæ ¹æ¬çã«ãã©ãã€ã ã転æãããŸãã
Contact Picker APIãšã¯äœãïŒ
ãã®æ žå¿ã«ãããŠãContact Picker APIïŒW3Cã«ããåºç¯ãªWeb Contacts API仿§ã®äžéšïŒã¯ãWebã¢ããªã±ãŒã·ã§ã³ããŠãŒã¶ãŒã®ããã€ã¹ããçŽæ¥ãé£çµ¡å ã®éžæãŸãã¯ç¹å®ã®è©³çްãèŠæ±ããã¡ã«ããºã ãæäŸããŸããWebã¢ããªã±ãŒã·ã§ã³ãé£çµ¡å ããŒã¿ããŒã¹ã«çŽæ¥ãã«ã¢ã¯ã»ã¹ããã®ã§ã¯ãªãããã©ãŠã¶ã仲ä»åœ¹ãšãªãããã€ãã£ã颚ã®é£çµ¡å ããã«ãŒUIããŠãŒã¶ãŒã«æç€ºããŸãã
ãŠãŒã¶ãŒã¯ãã®ããã«ãŒãæäœããå ±æãããé£çµ¡å ãšç¹å®ã®ãã£ãŒã«ãïŒäŸïŒååãã¡ãŒã«ã¢ãã¬ã¹ãé»è©±çªå·ïŒãéžæããŸããéžæãããæ å ±ã¯ãå®å šã«Webã¢ããªã±ãŒã·ã§ã³ã«æž¡ãããŸãããã®ã¢ãŒããã¯ãã£ã«ãããWebã¢ããªã±ãŒã·ã§ã³ã¯é£çµ¡å ãªã¹ãå šäœã«çŽæ¥ã¢ã¯ã»ã¹ããããšã¯ãªãããã®ç¹å®ã®å¯Ÿè©±ã®ããã«ãŠãŒã¶ãŒãæç€ºçã«æ¿èªããããŒã¿ã®ã¿ãåãåãããšãä¿èšŒãããŸãã
ãŠãŒã¶ãŒã«ãšã£ãŠã®äž»ãªå©ç¹ïŒããŒã¿å¶åŸ¡ã®åŒ·å
- ãã现ããªå¶åŸ¡ïŒãŠãŒã¶ãŒã¯åã ã®é£çµ¡å ãšãå ±æããç¹å®ã®æ å ±ïŒäŸïŒé»è©±çªå·ãäœæã§ã¯ãªããã¡ãŒã«ã¢ãã¬ã¹ã ãïŒãéžæã§ããŸããããã¯ãå šãç¡ããã®ã¢ãããŒããšã¯å¯Ÿç §çã§ãã
- ãã©ã€ãã·ãŒã®åŒ·åïŒWebã¢ããªã±ãŒã·ã§ã³ã¯é£çµ¡å ãªã¹ãå šäœãèŠãããšã¯ãããŸãããæç€ºçã«éžæãããããŒã¿ã®ã¿ãå ¬éãããããŒã¿æŒæŽ©ãäžèŠãªæ å ±ã®èª€çšã®ãªã¹ã¯ãæå°éã«æããŸãã
- ãã€ãã£ããªäœéšïŒé£çµ¡å ããã«ãŒUIã¯ãå€ãã®å Žåãããã€ã¹ã®ãã€ãã£ããªé£çµ¡å ã»ã¬ã¯ã¿ãŒãæš¡å£ããŠããã銎æã¿æ·±ãä¿¡é Œã§ããã€ã³ã¿ãŒãã§ãŒã¹ãæäŸããŸãã
- ãµãŒããŒãžã®ã¢ããããŒãäžèŠïŒæ©å¯æ§ã®é«ãé£çµ¡å ããŒã¿ã¯ãåäžã®å¯Ÿè©±ã®ããã«ãµãŒãããŒãã£ã®ãµãŒããŒã«ã¢ããããŒãããå¿ èŠããªããæ»æå¯Ÿè±¡é åãæžãããŸãã
éçºè ã«ãšã£ãŠã®äž»ãªå©ç¹ïŒãããªããã§ä¿¡é Œæ§ã®é«ãWebäœéš
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒæåã§ã®ããŒã¿å ¥åãè€éãªã¢ããããŒãããã»ã¹ããªããã察話ãããã¹ã ãŒãºã§çŽæçã«ããŸãã
- ãªãããªããŒã¿ãžã®ã¢ã¯ã»ã¹ïŒWebã¢ããªã±ãŒã·ã§ã³ã䟡å€ããé£çµ¡å æ å ±ïŒååãã¡ãŒã«ãé»è©±çªå·ãäœæãã¢ãã¿ãŒïŒã掻çšããŠãå人æåŸ ãã³ãã¥ãã±ãŒã·ã§ã³ããŒã«ããã©ãŒã ã®èªåè£å®ãªã©ã®æ©èœã匷åã§ããããã«ããŸãã
- æšæºåãããã¢ãããŒãïŒãµããŒããããŠãããã©ãŠã¶éã§äžè²«ããAPIãæäŸãããã©ãããã©ãŒã åºæã®ãã€ãã£ãçµ±åãšæ¯èŒããŠéçºãç°¡çŽ åããŸãã
- ä¿¡é Œã®åäžïŒãŠãŒã¶ãŒã«ããŒã¿ã®å¶åŸ¡æš©ãæç¢ºã«äžããããšã§ãã¢ããªã±ãŒã·ã§ã³ã¯ãã倧ããªä¿¡é Œãç¯ããããåºãæ¡çšãä¿é²ã§ããŸãããŠãŒã¶ãŒã¯ããã©ã€ãã·ãŒãå°éããŠãããšæããã¢ããªã±ãŒã·ã§ã³ã«ããç©æ¥µçã«é¢äžããåŸåããããŸãã
- ã³ã³ãã©ã€ã¢ã³ã¹è² æ ã®è»œæžïŒäžèœè¬ã§ã¯ãããŸããããAPIã䜿çšããããšã§ãããŒã¿ãžã®ã¢ã¯ã»ã¹ãå¶éããããšã«ãããéçºè ã¯ããŒã¿æå°åã®ååãæ§ã ãªã°ããŒãã«ãã©ã€ãã·ãŒèŠå¶ã®åæèŠä»¶ã«æ²¿ãããšãã§ããŸãã
äž»ãªæ©èœãšæ§èœ
Contact Picker APIã¯ãWebã¢ããªã±ãŒã·ã§ã³ããããããã£ããšããŠæå®ãããããã€ãã®çš®é¡ã®é£çµ¡å æ å ±ãèŠæ±ããããšãå¯èœã«ããŸãããããã«ã¯éåžžã以äžãå«ãŸããŸãïŒ
name
ïŒé£çµ¡å ã®ãã«ããŒã ãemail
ïŒé£çµ¡å ã«é¢é£ä»ããããã¡ãŒã«ã¢ãã¬ã¹ãtel
ïŒé»è©±çªå·ãaddress
ïŒç©ççãªäœæãicon
ïŒé£çµ¡å ã®ã¢ãã¿ãŒãŸãã¯ãããã£ãŒã«åçã
APIã®äž»èŠãªã¡ãœããã¯navigator.contacts.select(properties, options)
ã§ãããã®æ§æèŠçŽ ãåè§£ããŠã¿ãŸãããïŒ
properties
ïŒååŸãããé£çµ¡å ãã£ãŒã«ããæå®ããæååã®é åïŒäŸïŒ['name', 'email']
ïŒãoptions
ïŒè¿œå ã®ãã©ã¡ãŒã¿ãå«ããããšãã§ãããªããžã§ã¯ãã§ãæã泚ç®ãã¹ãã¯ããŠãŒã¶ãŒãè€æ°ã®é£çµ¡å ãéžæã§ããããã«ããå Žåã®multiple: true
ã§ãã
äŸïŒååãšã¡ãŒã«ã¢ãã¬ã¹ã®èŠæ±
ãŠãŒã¶ãŒãWebã¢ããªã±ãŒã·ã§ã³ãä»ããŠã€ãã³ãã«è€æ°ã®å人ãæåŸ ãããã·ããªãªãèããŠã¿ãŸããããã¢ããªã±ãŒã·ã§ã³ã¯åœŒãã®ååãšã¡ãŒã«ã¢ãã¬ã¹ãå¿ èŠãšããŸããã³ãŒãã¯æ¬¡ã®ããã«ãªããŸãïŒ
async function inviteFriends() {
if ('contacts' in navigator && 'select' in navigator.contacts) {
try {
const properties = ['name', 'email'];
const options = { multiple: true };
const contacts = await navigator.contacts.select(properties, options);
if (contacts.length > 0) {
console.log('Selected contacts:', contacts);
// Process the selected contacts (e.g., send invitations)
const inviteList = contacts.map(contact => {
const name = contact.name && contact.name.length > 0 ? contact.name.join(' ') : 'Unknown Name';
const email = contact.email && contact.email.length > 0 ? contact.email[0] : 'No Email';
return `Name: ${name}, Email: ${email}`;
}).join('\n');
alert(`You selected:\n${inviteList}`);
} else {
alert('No contacts were selected.');
}
} catch (error) {
console.error('Contact picker error:', error);
if (error.name === 'NotAllowedError') {
alert('Access to contacts was denied by the user.');
} else if (error.name === 'AbortError') {
alert('Contact selection was cancelled.');
} else {
alert('An unexpected error occurred while accessing contacts.');
}
}
} else {
alert('Contact Picker API is not supported in this browser.');
// Provide a fallback mechanism, e.g., manual entry
}
}
ãã®ã³ãŒãã¹ããããã¯ãåºæ¬çãªãããŒã瀺ããŠããŸãïŒæ©èœæ€åºãAPIã®åŒã³åºããæåæã®ããŒã¿è¿åŽã®åŠçããããŠæœåšçãªãšã©ãŒããŠãŒã¶ãŒã«ãããã£ã³ã»ã«ã®é©åãªç®¡çãããã¯ããã©ãŠã¶ããŠãŒã¶ãŒã«ããã³ããã衚瀺ãããŠãŒã¶ãŒãå ±æããå 容ãæç€ºçã«éžæãããšããããŠãŒã¶ãŒäžå¿ã®èšèšã匷調ããŠããŸãã
ãã©ã€ãã·ãŒã®éèŠæ§ïŒãªããããŸã§ä»¥äžã«éèŠãªã®ã
ããŒã¿ãã©ã€ãã·ãŒã«é¢ããäžççãªç¶æ³ã¯ãè¿å¹Žåçã«å€åããŸãããå人æ å ±ã«å¯Ÿãããã倧ããªç®¡çãæ±ããäžè¬åžæ°ã®å£°ãšãäžé£ã®æ³šç®ãéããããŒã¿æŒæŽ©äºä»¶ã«åŸæŒããããäžçäžã®æ¿åºã峿 ŒãªèŠå¶ãå¶å®ããŸããããããã®èŠå¶ã¯ãå人ããŒã¿ãåéãåŠçãä¿åããçµç¹ã«è²¬ä»»ã®æåšãæ ¹æ¬çã«ç§»ããéææ§ã説æè²¬ä»»ããããŠå ç¢ãªä¿è·æªçœ®ãèŠæ±ããŠããŸãã
Contact Picker APIã¯ãããã€ãã®éèŠãªæžå¿µäºé ã«å¯ŸåŠããããšã§ããããã®äžççãªãã©ã€ãã·ãŒã®ååãšããæŽåããŠããŸãïŒ
ããŒã¿æå°åãšç®çã®å¶é
çŸä»£ã®ãã©ã€ãã·ãŒèŠå¶ïŒGDPRã®ç¬¬5æ¡1é (c)ãªã©ïŒã®åºç€ãšãªãã®ã¯ãããŒã¿æå°åã®ååã§ããããã¯ãçµç¹ã¯ç¹å®ãããæ£åœãªç®çã®ããã«çµ¶å¯Ÿã«å¿ èŠãªããŒã¿ã®ã¿ãåéãã¹ãã§ãããšãããã®ã§ããåæ§ã«ãç®çã®å¶éã¯ãããç®çã®ããã«åéãããããŒã¿ã¯ããããªãåæãªãã«ä»ã®äºææ§ã®ãªãç®çã®ããã«äœ¿çšãããã¹ãã§ã¯ãªããšå®ããŠããŸãã
åŸæ¥ã®é£çµ¡å ã¢ã¯ã»ã¹æ¹æ³ã¯ããã°ãã°ãããã®ååã«éåããŠããŸããããã£ãäžäººã®å人ãæåŸ ããããã«é£çµ¡å ã®CSVãã¡ã€ã«ãäžžããšã¢ããããŒãããããšã¯ãããšãã¡ãŒã«ã¢ãã¬ã¹ã1ã€ããå¿ èŠã§ãªããŠããäœçŸãäœåãã®å人ã®ååãçªå·ãäœæããã®ä»ã®è©³çްãåéããããšãæå³ããŸãããContact Picker APIã¯ãã¢ããªã±ãŒã·ã§ã³ãç¹å®ã®ããããã£ïŒäŸïŒãnameããšãemailãã®ã¿ïŒã ããèŠæ±ãããŠãŒã¶ãŒãé¢é£ããé£çµ¡å ã ããéžæã§ããããã«ããããšã§ãæ¬è³ªçã«ããŒã¿æå°åãšç®çã®å¶éããµããŒãããŸããéçºè ã¯ããŒã¿ããŒãºãæ£ç¢ºã«å®çŸ©ã§ãããŠãŒã¶ãŒã¯äžå¯æ¬ ãªãã®ã ããæ¿èªã§ããŸãã
ãŠãŒã¶ãŒã®åæïŒå«ççã¢ã¯ã»ã¹ã®ç€
æç€ºçãªåæãšããæŠå¿µã¯ã仿¥ã®ã»ãŒãã¹ãŠã®äž»èŠãªãã©ã€ãã·ãŒãã¬ãŒã ã¯ãŒã¯ã®äžå¿ã§ããåæã¯ãèªç±ã«äžããããå ·äœçã§ãæ å ±ã«åºã¥ãããææ§ãã®ãªããã®ã§ãªããã°ãªããŸããããŸãããŠãŒã¶ãŒããã€ã§ãç°¡åã«åæãæ€åã§ããå¿ èŠããããŸãã
Contact Picker APIã¯ããã®æ žå¿ã«æç€ºçãªåæãæ®ããŠèšèšãããŠããŸããWebã¢ããªã±ãŒã·ã§ã³ãAPIãåŒã³åºããšããã©ãŠã¶ã¯æç¢ºã§ãã€ãã£ã颚ã®èš±å¯ããã³ããã衚瀺ããŸãããã®ããã³ããã¯ãã¢ããªã±ãŒã·ã§ã³ãé£çµ¡å ã«ã¢ã¯ã»ã¹ãããããšããŠãŒã¶ãŒã«äŒããã©ã®é£çµ¡å ããããŠãã®é£çµ¡å ã®ã©ã®ãã£ãŒã«ããå ±æããããéžæããæš©éãäžããŸããã¢ããªã±ãŒã·ã§ã³ã¯ãã®ãŠãŒã¶ãŒæäœãè¿åããããšã¯ã§ããŸããããŠãŒã¶ãŒãæåŠããå Žåãã¢ããªã±ãŒã·ã§ã³ã¯åã«ããŒã¿ãåãåããªãã ãã§ãããã®ãã©ãŠã¶ãä»ããã¢ãããŒãã¯ãåæãæ±ããããã ãã§ãªããéææ§ã®ããæ¹æ³ã§ãŠãŒã¶ãŒã«ãã£ãŠèœåçã«ç®¡çãããããšãä¿èšŒããŸãã
ã»ãã¥ãªãã£ãšä¿¡é Œ
é£çµ¡å ããŒã¿ãæç€ºçã«å ±æããããã©ãŠã¶ã«ãã£ãŠä»²ä»ããããŸã§ãŠãŒã¶ãŒã®ããã€ã¹äžã«ä¿æããããšã§ãContact Picker APIã¯æ¬è³ªçã«ã»ãã¥ãªãã£ã匷åããŸããããã«ãããã¢ããªã±ãŒã·ã§ã³ãããŒã¿æŒæŽ©ã®æœåšçãªæšçãšãªããŠãŒã¶ãŒé£çµ¡å ã®åºç¯ãªããŒã¿ããŒã¹ããµãŒããŒã«ä¿åããå¿ èŠæ§ãæžå°ããŸããããã«ã察話ã®éææ§ã¯ãŠãŒã¶ãŒã®ä¿¡é Œãç¯ããããã¯ããããããžã¿ã«ãµãŒãã¹ã®æ¡çšãšé·æçãªæåã«ãšã£ãŠæ¥µããŠéèŠã§ãã
Contact Picker APIã®å®è£ ïŒéçºè ã¬ã€ã
éçºè ã«ãšã£ãŠãContact Picker APIã®çµ±åã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããããã©ã€ãã·ãŒã®ãã¹ããã©ã¯ãã£ã¹ãéµå®ããããã®ç°¡åãªéçãæäŸããŸããããããä»ã®çŸä»£çãªWeb APIãšåæ§ã«ããã©ãŠã¶ã®ãµããŒãããšã©ãŒãã³ããªã³ã°ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãã¶ã€ã³ã«ã€ããŠæ éã«èæ ®ããå¿ èŠããããŸãã
ãã©ãŠã¶ã®ãµããŒããšäºææ§
æå 端ã®Web APIã«ãããäž»èŠãªèª²é¡ã®äžã€ã¯ãäžè²«æ§ã®ãªããã©ãŠã¶ãµããŒãã§ããContact Picker APIã¯çŸåšã以äžã®ç°å¢ã§ååã«ãµããŒããããŠããŸãïŒ
- Google Chrome (ãã¹ã¯ãããããã³Android)
- Microsoft Edge (ãã¹ã¯ãããããã³Android)
- Opera (ãã¹ã¯ãããããã³Android)
- Android WebView
ããããç¹ã«ä»¥äžã®ç°å¢ã§ã¯ãµããŒããããŠããŸããïŒ
- Mozilla Firefox (ãã¹ã¯ããããŸãã¯Android)
- Apple Safari (iOSãŸãã¯macOS)
ããã¯ãéçºè ãå ç¢ãªæ©èœæ€åºãå®è£ ãããµããŒããããŠããªããã©ãŠã¶ã䜿çšãããŠãŒã¶ãŒã®ããã«é©åãªãã©ãŒã«ããã¯ãæäŸããªããã°ãªããªãããšãæå³ããŸããä»£æ¿ææ®µãªãã«APIã ãã«äŸåãããšãäžçã®ã€ã³ã¿ãŒããããŠãŒã¶ãŒã®ããªãã®éšåãæé€ããããšã«ãªããŸãã
åºæ¬çãªå®è£ æé
APIãå®è£ ããæ žå¿ã«ã¯ãããã€ãã®éèŠãªã¹ããããå«ãŸããŸãïŒ
1. æ©èœæ€åº
APIã䜿çšããããšããåã«ãå¿ ãå©çšå¯èœãã©ããã確èªããŠãã ãããããã«ããããµããŒããããŠããªãç°å¢ã§ã®ãšã©ãŒãé²ããŸãã
if ('contacts' in navigator && 'select' in navigator.contacts) {
// API is supported, proceed with invocation
} else {
// API is not supported, provide fallback
console.warn('Contact Picker API not supported in this browser.');
}
2. ããããã£ãšãªãã·ã§ã³ã®å®çŸ©
å¿
èŠãªé£çµ¡å
ãã£ãŒã«ãïŒäŸïŒ['name', 'email', 'tel']
ïŒãšããŠãŒã¶ãŒãè€æ°ã®é£çµ¡å
ãéžæã§ããããã«ãããã©ããïŒ{ multiple: true }
ïŒã決å®ããŸãã
const properties = ['name', 'email']; // Requesting name and email
const options = { multiple: true }; // Allow selecting multiple contacts
3. APIã®åŒã³åºã
navigator.contacts.select()
ã¯Promiseãè¿ããããéåæé¢æ°å
ã§åŒã³åºããŸãã
async function getContacts() {
try {
const selectedContacts = await navigator.contacts.select(properties, options);
// Handle successful selection
return selectedContacts;
} catch (error) {
// Handle errors or user cancellation
console.error('Failed to select contacts:', error);
throw error; // Re-throw to be handled by the caller
}
}
4. è¿ãããããŒã¿ã®åŠç
selectedContacts
é
åã«ã¯ãéžæãããåé£çµ¡å
ã衚ããªããžã§ã¯ããå«ãŸããŸããåé£çµ¡å
ãªããžã§ã¯ãã«ã¯ãèŠæ±ãããããããã£ïŒäŸïŒname
ãemail
ãtel
ïŒããããŸãã
éèŠäºé
ïŒ name
ãemail
ãtel
ãaddress
ãªã©ã®ããããã£ã¯ãé£çµ¡å
ãè€æ°ã®ååãã¡ãŒã«ãé»è©±çªå·ãäœæãæã€ããšãã§ãããããæååãŸãã¯ãªããžã§ã¯ãã®é
åãšããŠè¿ãããŸããicon
ããããã£ãèŠæ±ãããå ŽåãBlob
ãªããžã§ã¯ãã®é
åãè¿ãããŸãã
// Example of processing a single contact
selectedContacts.forEach(contact => {
const displayName = contact.name && contact.name.length > 0 ? contact.name.join(' ') : 'No Name';
const firstEmail = contact.email && contact.email.length > 0 ? contact.email[0] : 'No Email';
const firstPhone = contact.tel && contact.tel.length > 0 ? contact.tel[0] : 'No Phone';
console.log(`Contact Name: ${displayName}`);
console.log(`Primary Email: ${firstEmail}`);
console.log(`Primary Phone: ${firstPhone}`);
if (contact.icon && contact.icon.length > 0) {
const imageUrl = URL.createObjectURL(contact.icon[0]);
console.log(`Icon URL: ${imageUrl}`);
// You can use this URL to display the image
}
});
ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšãšããžã±ãŒã¹ã®åŠç
å ç¢ãªå®è£ ã¯ãåã«APIãåŒã³åºãã ãã«ãšã©ãŸããŸããããŠãŒã¶ãŒã®è¡åãç°å¢èŠå ãäºæž¬ããŸãïŒ
- ãŠãŒã¶ãŒã«ããæåŠïŒãŠãŒã¶ãŒãã¢ã¯ã»ã¹ãæåŠããå Žåã`select()`ã®Promiseã¯`NotAllowedError`ã§ãªãžã§ã¯ããããŸããã¢ããªã±ãŒã·ã§ã³ã¯ãããé©åã«åŠçããä»£æ¿ææ®µïŒäŸïŒæåå ¥åïŒãæäŸãããããªãé£çµ¡å ãå¿ èŠãªã®ãã説æãããããå¿ èŠããããŸãã
- ãŠãŒã¶ãŒã«ãããã£ã³ã»ã«ïŒãŠãŒã¶ãŒãé£çµ¡å ãéžæããã«ããã«ãŒãéããå ŽåãPromiseã¯`AbortError`ã§ãªãžã§ã¯ããããŸãããã®å ŽåãããŠãŒã¶ãŒã«éç¥ããããåã®ç¶æ ã«æ»ããŸãã
- é£çµ¡å ãéžæãããªãã£ãå ŽåïŒãŠãŒã¶ãŒãããã«ãŒãéãããã®ã®ãéããåã«é£çµ¡å ãéžæããªãã£ãå Žåã`selectedContacts`é åã¯ç©ºã«ãªããŸããUIã¯ãããåæ ãããé£çµ¡å ã¯éžæãããŸããã§ããããªã©ã®ã¡ãã»ãŒãžã衚瀺ãããšããã§ãããã
- æç¢ºãªUIããã³ããïŒAPIãåŒã³åºãåã«ããŠãŒã¶ãŒã«ãªãé£çµ¡å ãå¿ èŠã§ãã©ã®æ å ±ãèŠæ±ããã®ããæç¢ºãã€ç°¡æœã«èª¬æããŸããäŸãã°ããé£çµ¡å ãååŸããšããã ãã®ãã¿ã³ã©ãã«ãããããé£çµ¡å ããåéãæåŸ ãã®æ¹ãæçã§ãã
- ãã©ãŒã«ããã¯ã¡ã«ããºã ïŒAPIããµããŒãããŠããªããã©ãŠã¶ã®ããã«ãã¢ããªã±ãŒã·ã§ã³ãæ©èœçãªä»£æ¿ææ®µãæäŸããããšã確èªããŠãã ãããããã«ã¯ãåŸæ¥ã®ãã¡ã€ã«ã¢ããããŒããæåå ¥åãã©ãŒã ããŸãã¯ãµãŒãããŒãã£ã®é£çµ¡å ãããã€ããŒãšã®çµ±åïŒé©åãªãã©ã€ãã·ãŒèæ ®äºé ãå«ãïŒãªã©ãèããããŸãã
ãŠãŒã¹ã±ãŒã¹ãšå®äžçã®ã¢ããªã±ãŒã·ã§ã³
Contact Picker APIã¯ãããŸããŸãªåéã§Webã¢ããªã±ãŒã·ã§ã³ã匷åããããã€ã³ã¿ã©ã¯ãã£ãã§ããŠãŒã¶ãŒãã¬ã³ããªãŒã§ããã€ãã£ãã¢ããªãšç«¶åã§ãããã®ã«ããããã®å€ãã®å¯èœæ§ãåãéããŸãã
ãœãŒã·ã£ã«ãªç¹ããã®åŒ·å
- æ°ãããµãŒãã¹ãžã®å人æåŸ ïŒãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ãæ°ããçç£æ§åäžããŒã«ã¯ããŠãŒã¶ãŒãããã€ã¹ã®é£çµ¡å ããå人ãéžæããæåŸ ãã©ãŒã ã«ååãšã¡ãŒã«ã¢ãã¬ã¹ãäºåå ¥åããããšã§ãç°¡åã«å人ãæåŸ ã§ããããã«ããŸããããã«ãããæ°èŠãŠãŒã¶ãŒã®åå ¥éå£ãåçã«äžããããããã¯ãŒã¯ã®æé·ãä¿é²ãããŸãã
- ãã©ãããã©ãŒã äžã®æ¢åã®é£çµ¡å ã®æ€çŽ¢ïŒãããã¯ãŒã¯ã«åå ãããŠãŒã¶ãŒã¯ãæ¢åã®é£çµ¡å ã®ãã¡èª°ãæ¢ã«ã¡ã³ããŒã§ããããç¥ããããããããŸãããAPIã¯ã圌ããååãã¡ãŒã«ãå ±æã§ããããã«ããããšã§ããã容æã«ãããã©ãããã©ãŒã ã¯ããããŠãŒã¶ãŒããŒã¹ãšå®å šã«ç §åã§ããŸãïŒãã©ã€ãã·ãŒã®ããã«é©åãªããã·ã¥å/å¿åååŸïŒã
- ã°ã«ãŒãã®äœæãšç®¡çïŒã¡ãã»ãŒãžã³ã°ã¢ããªãå ±åäœæ¥ãã©ãããã©ãŒã ã§ã¯ããŠãŒã¶ãŒã¯ããã€ã¹ã®é£çµ¡å ãªã¹ãããè€æ°ã®é£çµ¡å ãéžæããŠãè¿ éã«ã°ã«ãŒããäœæã§ããŸãã
ã³ãã¥ãã±ãŒã·ã§ã³ã®å¹çå
- åä¿¡è ãã£ãŒã«ãã®äºåå ¥åïŒWebããŒã¹ã®ã¡ãŒã«ã¯ã©ã€ã¢ã³ããã¡ãã»ãŒãžã³ã°ã¢ããªã±ãŒã·ã§ã³ããªã³ã©ã€ã³äŒè°ã¹ã±ãžã¥ãŒã©ã§ã¯ããŠãŒã¶ãŒã¯é£çµ¡å ãéžæããŠãToãããCcãããŸãã¯æåŸ ãã£ãŒã«ããèªåçã«å ¥åã§ããæéãç¯çŽããå ¥åãã¹ãé²ããŸãã
- ç¹å®ã®å人ãšã®ã³ã³ãã³ãå ±æïŒãŠãŒã¶ãŒãWebã¢ããªã±ãŒã·ã§ã³ããèšäºãåçãããã¥ã¡ã³ããå ±æãããå ŽåãContact Pickerã䜿çšããŠãé£çµ¡å ã®è©³çްãæåã§ã³ããŒïŒããŒã¹ãããããšãªããè¿ éã«åä¿¡è ãéžæã§ããŸãã
ããžãã¹ããã³çç£æ§åäžããŒã«
- CRMã·ã¹ãã ïŒãšã³ã¿ãŒãã©ã€ãºCRMã¯ç¬èªã®ããŒã¿ãœãŒã¹ãæã£ãŠããããšãå€ãã§ãããããã·ã³ãã«ãªWebããŒã¹ã®CRMãé£çµ¡å 管çããŒã«ã®å人ãŠãŒã¶ãŒã¯ãAPIã䜿çšããŠ*èªèº«ã®*æ°ããé£çµ¡å ãã€ã³ããŒãããããå人ã®ããã€ã¹ã®ã¢ãã¬ã¹åž³ããæ¢åã®é£çµ¡å ãæŽæ°ãããã§ããŸãã
- ã€ãã³ã管çïŒãã©ã€ããŒããªã€ãã³ããäŒç»ããŠããŸããïŒã€ãã³ãäŒç»Webã¢ããªã¯ãAPIãæŽ»çšããŠäž»å¬è ãé»è©±ã®é£çµ¡å ããçŽæ¥ã²ã¹ããæåŸ ã§ããããã«ããæåŸ ããã»ã¹ãå¹çåããŸãã
- çµè²»ç²Ÿç®ã¢ããªã±ãŒã·ã§ã³ïŒå人å士ã§è«æ±æžãå²ãåããã®ãå©ããã¢ããªã¯ãé£çµ¡å ãªã¹ãããåå è ãéžã¶ããšã§ãåå è ã®è¿œå ã容æã«ã§ããŸãã
- ãªã³ããŒãã£ã³ã°ãããŒïŒãªã³ããŒãã£ã³ã°äžã«ãŠãŒã¶ãŒãç¹å®ã®äººæ°ã®äººã ãšç¹ããå¿ èŠãããã¢ããªã±ãŒã·ã§ã³ïŒäŸïŒãããã§ãã·ã§ãã«ãããã¯ãŒãã³ã°ãµã€ãïŒã§ã¯ãContact Picker APIããã®ããã»ã¹ãããã¹ã ãŒãºã«ããŸãã
ãããã®äŸã¯ãContact Picker APIãã以åã¯éå±ã§ãã£ãããã©ã€ãã·ãŒã䟵害ããå¯èœæ§ããã£ãããã»ã¹ããã·ãŒã ã¬ã¹ã§ãŠãŒã¶ãŒãå¶åŸ¡ãã察話ãžãšå€é©ããæçµçã«ããé åçã§å¹æçãªWebã¢ããªã±ãŒã·ã§ã³ã«ã€ãªããããšã瀺ããŠããŸãã
ã°ããŒãã«ãªèŠç¹ïŒãã©ã€ãã·ãŒèŠå¶ãšæåçãã¥ã¢ã³ã¹
Contact Picker APIã®èšèšã¯ããŠãŒã¶ãŒã®åæãšããŒã¿æå°åã匷調ããŠãããå€ãã®ã°ããŒãã«ãªãã©ã€ãã·ãŒèŠå¶ã®æ ¹åºã«ããååãšæ¬è³ªçã«äžèŽããŠããŸããããããåœéçã«äºæ¥ãå±éããéçºè ã¯ãå°åããšã«ç°ãªãç¹å®ã®èŠä»¶ãæåçãªæåæ§ã«ã泚æãæãå¿ èŠããããŸãã
GDPRïŒäžè¬ããŒã¿ä¿è·èŠå - ãšãŒãããïŒïŒåæã®ãã³ãããŒã¯
GDPRã¯ãããããäžçã§æã圱é¿åã®ããããŒã¿ä¿è·æ³ã§ãããåæã«å¯ŸããŠé«ãåºæºãèšå®ããŠããŸããåæã¯ãææ§ã§ãªããèªç±ã«äžããããå ·äœçã§ãæ å ±ã«åºã¥ããæ€èšŒå¯èœã§ãªããã°ãªããªããšèŠæ±ããŠããŸããContact Picker APIã®ãã©ãŠã¶ãä»ããåæã¡ã«ããºã ã¯ãGDPRã®èŠä»¶ã«éåžžã«ããé©åããŠããŸãããªããªãã
- å ·äœæ§ãæäŸããïŒãŠãŒã¶ãŒã¯ãã©ã®ãããªçš®é¡ã®ããŒã¿ïŒååãã¡ãŒã«ãªã©ïŒãèŠæ±ãããŠããããç¥ããããŸãã
- èªç±ãä¿èšŒããïŒãŠãŒã¶ãŒã¯ïŒé©åãªãã©ãŒã«ããã¯ãæäŸãããŠããã°ïŒå€§ããªäžå©çãªãã«æåŠã§ããŸãã
- æ å ±ã«åºã¥ããŠããïŒãã©ãŠã¶ã®ããã³ãããèŠæ±ãæç¢ºã«èª¬æããŸãã
- ææ§ã§ãªãïŒãŠãŒã¶ãŒã«ããè¯å®çãªè¡åïŒéžæïŒãå¿ èŠãšããŸãã
GDPRã«æºæ ããããã«ã¯ãéçºè ã¯ãã©ã€ãã·ãŒããªã·ãŒã®éææ§ã確ä¿ããAPIãä»ããŠååŸããé£çµ¡å ããŒã¿ãã©ã®ããã«äœ¿çšãããä¿åãããã©ã®ãããã®æéä¿æããããã説æããå¿ èŠããããŸããããã©ã€ãã·ãŒã»ãã€ã»ãã¶ã€ã³ãã®ååã¯ãã¢ããªã±ãŒã·ã§ã³ãæåãããã©ã€ãã·ãŒãžã®é æ ®ãçµ±åãã¹ãã§ãããšå®ããŠãããAPIã¯ãã®ããŒã¿æå°åæ©èœãéããŠããã奚å±ããŸããéžæåŸãããŒã¿ã«å¯Ÿãã責任ã¯éçºè ã«ãããŸããé£çµ¡å ãä¿åããå Žåãç §åã®ããã®å®å šãªããã·ã¥åãšå³æ Œãªä¿æããªã·ãŒãäžå¯æ¬ ã§ãã
CCPAïŒã«ãªãã©ã«ãã¢å·æ¶è²»è ãã©ã€ãã·ãŒæ³ - ç±³åœïŒïŒç¥ãæš©å©ãšãªããã¢ãŠãããæš©å©
CCPAã¯ãã«ãªãã©ã«ãã¢å·ã®äœæ°ã«ãåéãããããŒã¿ãç¥ãæš©å©ãããŒã¿ãåé€ããæš©å©ãããŒã¿ã®è²©å£²ããªããã¢ãŠãããæš©å©ãªã©ãå人æ å ±ã«é¢ããéèŠãªæš©å©ãäžããŠããŸããContact Picker APIã¯ããŒã¿ã®ç¡å·®å¥ãªåéãé²ããŸãããã¢ããªã±ãŒã·ã§ã³ãéžæãããé£çµ¡å ãä¿åããå Žåã以äžãè¡ãå¿ èŠããããŸãïŒ
- åéãããå人æ å ±ã®ã«ããŽãªïŒäŸïŒååãã¡ãŒã«ã¢ãã¬ã¹ïŒã«ã€ããŠãŠãŒã¶ãŒã«éç¥ããã
- ãŠãŒã¶ãŒããã®ããŒã¿ã®åé€ãèŠæ±ã§ããã¡ã«ããºã ãæäŸããã
- ãã®é£çµ¡å æ å ±ãã販売ãïŒCCPAã®äžã§ã¯åºçŸ©ïŒãããããšãããå Žåã¯æç¢ºã«è¿°ã¹ããªããã¢ãŠããæäŸããã
APIã®ãŠãŒã¶ãŒäžå¿ã®èšèšã¯ããŠãŒã¶ãŒãå ±æããå 容ãç©æ¥µçã«éžæããç¹ã§ãCCPAã®äžå¿ã«ããæ¶è²»è ã®ã³ã³ãããŒã«ã®ç²Ÿç¥ãšäžèŽããŠããŸãã
LGPDïŒäžè¬ããŒã¿ä¿è·æ³ - ãã©ãžã«ïŒãPOPIAïŒå人æ å ±ä¿è·æ³ - åã¢ããªã«ïŒãAPPIïŒå人æ å ±ä¿è·æ³ - æ¥æ¬ïŒãPDPAïŒå人ããŒã¿ä¿è·æ³ - ã·ã³ã¬ããŒã«ïŒïŒæ¡å€§ããã°ããŒãã«åºæº
ä»ã®å€ãã®åœã ããGDPRã®åæãéææ§ãããŒã¿æå°åã®ååãåæ ããå æ¬çãªãã©ã€ãã·ãŒæ³ãå¶å®ãŸãã¯éçºããŠããŸããäŸãšããŠã¯ä»¥äžãæããããŸãïŒ
- LGPDïŒãã©ãžã«ïŒïŒæç€ºçãªåæãšèª¬æè²¬ä»»ã匷ã匷調ããŠããŸãã
- POPIAïŒåã¢ããªã«ïŒïŒå人æ å ±ã®åæ³çãªåŠçã«çŠç¹ãåœãŠãåéã«ã¯åæãèŠæ±ããŸãã
- APPIïŒæ¥æ¬ïŒïŒæŽå²çã«ã¯æ¯èŒçå¯å®¹ã§ããããæè¿ã®æ¹æ£ã§åæèŠä»¶ãšããŒã¿è»¢éã«ãŒã«ã匷åãããŸããã
- PDPAïŒã·ã³ã¬ããŒã«ïŒïŒå人ããŒã¿ã®åéã䜿çšãé瀺ã«åæãèŠæ±ããããŒã¿ä¿è·çŸ©åã課ããŠããŸãã
ãããã®åžå Žãã¿ãŒã²ããã«ããéçºè ã«ãšã£ãŠãContact Picker APIã¯ãããŒã¿åéã®æç¹ã§ãŠãŒã¶ãŒã³ã³ãããŒã«ãä¿é²ãããããåŸæ¥ã®æ¹æ³ãããæ¬è³ªçã«ã³ã³ãã©ã€ã¢ã³ã¹ã«æºæ ããããã¡ã«ããºã ãæäŸããŸããéèŠãªæ¬¡ã®ã¹ãããã¯ããã®ããŒã¿ãã¢ããªã±ãŒã·ã§ã³ã«åä¿¡ãããåŸã«ã©ã®ããã«æ±ããããã§ããã€ãŸããå®å šãªä¿ç®¡ãé©åãªäœ¿çšããããŠçŸå°ã®æ³åŸã«åŸã£ãããŒã¿ã«é¢ããæš©å©ã«ã€ããŠãŠãŒã¶ãŒãšæç¢ºã«ã³ãã¥ãã±ãŒã·ã§ã³ãåãããšãä¿èšŒãããªããã°ãªããŸããã
é£çµ¡å å ±æã«ãããæåçèæ ®äºé
æ³çæ çµã¿ãè¶ ããŠãæåçãªèŠç¯ã¯ããŠãŒã¶ãŒãå人æ å ±ãç¹ã«é£çµ¡å ã®è©³çްãã©ã®ããã«èªèããå ±æããææ¬²ã«å€§ãã圱é¿ããŸããããæåã§èš±å®¹ãããããšããå¥ã®æåã§ã¯æŒãã€ãããŸãããšèŠãªãããå¯èœæ§ããããŸãã
- å¿«é©ãã®ã¬ãã«ã®éãïŒäžéšã®æåã§ã¯ãé£çµ¡å æ å ±ïŒç¥äººã§ãã£ãŠãïŒã®å ±æã¯äžè¬çã§æåŸ ãããããšã§ãããä»ã®æåã§ã¯ã芪ããé¢ä¿ãå ¬åŒãªæèã®ããã«çä¿ãããŸãã
- 仲ä»è ã®åœ¹å²ïŒäžéšã®æåã§ã¯ãã¢ããªã±ãŒã·ã§ã³ãšçŽæ¥å ±æããããããä¿¡é Œã§ãã仲ä»è ãéããŠå ±æããããšã奜ããããããŸããã
- æ©é¢ãžã®ä¿¡é ŒïŒãã¯ãããžãŒäŒæ¥ãæ¿åºãããŒã¿ãã©ã€ãã·ãŒãã¬ãŒã ã¯ãŒã¯ãžã®ä¿¡é Œã¬ãã«ã¯å€§ããç°ãªãå¯èœæ§ãããããŠãŒã¶ãŒãäœããã®åœ¢ã®ããŒã¿ã¢ã¯ã»ã¹ãèš±å¯ããææ¬²ã«åœ±é¿ãäžããŸãã
- ããŒã«ã©ã€ãºãããåæããã³ããïŒåæããã³ãããšãã©ã€ãã·ãŒã«é¢ãã説æããæ£ç¢ºãã€æåçã«é©åã«ç¿»èš³ããããšãéèŠã§ããçŽèš³ã§ã¯ãã¥ã¢ã³ã¹ã倱ãããããæå³ããæå³ãäŒãããªãã£ããããŠãæ··ä¹±ãäžä¿¡ã«ã€ãªããå¯èœæ§ããããŸãã
éçºè ã¯ããããã®ã°ããŒãã«ãªéããå°éããããã©ã€ãã·ãŒã»ãã€ã»ãã¶ã€ã³ãããã³ããã©ã€ãã·ãŒã»ãã€ã»ããã©ã«ããã®èãæ¹ãæ¡çšãã¹ãã§ããããã¯ãæåçèæ¯ãå°ççãªå Žæã«é¢ããããæå€§éã®éææ§ãããŒã¿äœ¿çšã«é¢ããæç¢ºãªèª¬æããããŠãŠãŒã¶ãŒãèªåã®å¥œã¿ã管çããããã®åããããããªãã·ã§ã³ãæäŸãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãèšèšããããšãæå³ããŸãã
Contact Picker APIã®èª²é¡ãšéç
Contact Picker APIã¯Webã®æ©èœãšãã©ã€ãã·ãŒã«ãšã£ãŠå€§ããªé²æ©ã衚ããŠããŸãããã°ããŒãã«ãªå±éã®ããã«éçºè ãèæ ®ããªããã°ãªããªã課é¡ãéçããªãããã§ã¯ãããŸããã
äžè²«æ§ã®ãªããã©ãŠã¶ãµããŒã
åè¿°ã®éããæãé¡èãªéçã¯ãäžåäžãªãã©ãŠã¶ãµããŒãã§ããSafariïŒAppleïŒãFirefoxïŒMozillaïŒãšãã£ãäž»èŠãªãã©ãŠã¶ã§ã®ãµããŒãããªããããWebã¢ããªã±ãŒã·ã§ã³ã¯APIãæ®éçãªè§£æ±ºçãšããŠé Œãããšãã§ããŸãããããã«ãããå ç¢ãªãã©ãŒã«ããã¯ã¡ã«ããºã ã®éçºãšç¶æãå¿ èŠãšãªããéçºäœæ¥ãè€éã«ãªããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«ãšã£ãŠæççãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªããå¯èœæ§ããããŸãã
éå®ãããããŒã¿ãã£ãŒã«ã
ãã®APIã¯ãã³ãã¥ãã±ãŒã·ã§ã³ãšèå¥ã«å¿ èŠãªäžå¿çãªé£çµ¡å æ å ±ïŒååãã¡ãŒã«ãé»è©±çªå·ãäœæãã¢ã€ã³ã³ïŒã®ããã«èšèšãããŠããŸããèªçæ¥ãã¡ã¢ãé¢ä¿ãäŒç€Ÿåã圹è·ãã«ã¹ã¿ã ãã£ãŒã«ããªã©ããŠãŒã¶ãŒã®é£çµ¡åž³ã«ä¿åãããŠããå¯èœæ§ã®ãããã¹ãŠã®ãã£ãŒã«ããžã®ã¢ã¯ã»ã¹ã¯æäŸããŸããããã®å¶éã¯éå°ãªããŒã¿åéãé²ãããšã§ãã©ã€ãã·ãŒã匷åããŸããããããªãããªé£çµ¡å ããŒã¿ãçŽç²ã«å¿ èŠãšããã¢ããªã±ãŒã·ã§ã³ã®æ©èœãå¶éããå¯èœæ§ããããŸãã
ãŠãŒã¶ãŒæè²ãšèªè
APIã®ãã©ã€ãã·ãŒéèŠã®èšèšã«ããããããããŠãŒã¶ãŒã®èªèã¯äŸç¶ãšããŠéå£ãšãªãå¯èœæ§ããããŸãããã€ãã£ãã¢ããªããã®ãªãŒã«ã»ãªã¢ã»ããã·ã³ã°ã®èš±å¯èŠæ±ã«æ £ããŠãããŠãŒã¶ãŒã¯ããé£çµ¡å ã«ã¢ã¯ã»ã¹ãããããšãšContact Picker APIïŒãŠãŒã¶ãŒãå ±æå 容ãå¶åŸ¡ããïŒãä»ããŠã¢ã¯ã»ã¹ããããšã®éã®åŸ®åŠãªéããå®å šã«ã¯çè§£ããŠããªããããããŸããããŠãŒã¶ãŒãæè²ããããã»ã¹ãžã®ä¿¡é Œãç¯ãããã«ã¯ãUIã«ãããæç¢ºã§ç°¡æœããã€ä¿¡é Œã§ããèšèé£ããäžå¯æ¬ ã§ãã
誀çšã®å¯èœæ§ïŒå®å šçã«ããããããïŒ
APIèªäœã¯å®å šã§ãããå«ççãªè²¬ä»»ã¯éçºè ã«ãããŸããæªæã®ããã¢ããªã±ãŒã·ã§ã³ã¯ãäŸãã°ãããæèšãããç®çïŒäŸïŒãåéãæ¢ããïŒã§ãŠãŒã¶ãŒã®é£çµ¡å ãèŠæ±ãããã®åŸãåéããã¡ãŒã«ã¢ãã¬ã¹ãæªæ¿è«Ÿã®ããŒã±ãã£ã³ã°ãããŒã¿éçŽã«äœ¿çšããå¯èœæ§ããããŸããéçºè ã¯ãAPIåŒã³åºãã ãã§ãªããåéåŸã®ããŒã¿åŠçã®å®è·µã«ãããŠããããŒã¿æå°åãšç®çã®å¶éã®ååãéµå®ããªããã°ãªããŸããããŠãŒã¶ãŒãéžæããããŒã¿ã§ãã£ãŠãã誀çšã¯APIãšWebãã©ãããã©ãŒã å šäœãžã®ä¿¡é Œãæãªãå¯èœæ§ããããŸãã
èš±å¯ç²ããšæèäžã®é¢é£æ§
ãŠãŒã¶ãŒã¯ãããã€ã¹æ©èœãžã®ã¢ã¯ã»ã¹ãæ±ããçµ¶ãéãªãèŠæ±ãããèš±å¯ç²ããããŸããŸãçµéšããŠããŸããéçºè ã¯ãé£çµ¡å ãžã®ã¢ã¯ã»ã¹ããã€ããªãæ±ããã®ããæ³šææ·±ãèããå¿ èŠããããŸããæèããå€ããããŸãã¯ãŠãŒã¶ãŒã«æç¢ºãªå©çããªãç¶æ³ã§é£çµ¡å ãèŠæ±ãããšãæåŠããããã¬ãã£ããªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªããå¯èœæ§ãé«ãã§ããèŠæ±ã®ã¿ã€ãã³ã°ãšèšèé£ãã¯éåžžã«éèŠã§ãã
éçºè ã®ããã®ãã¹ããã©ã¯ãã£ã¹ïŒä¿¡é Œãç¯ãããã©ã€ãã·ãŒã確ä¿ãã
Contact Picker APIã广çãã€å«ççã«ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã®ããã«æŽ»çšããããã«ãéçºè ã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ããã©ã€ãã·ãŒãã³ã³ãã©ã€ã¢ã³ã¹ãåªå ããäžé£ã®ãã¹ããã©ã¯ãã£ã¹ã«åŸãã¹ãã§ãã
1. ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšéææ§ã®åªå
- ããªããã説æããïŒAPIãåŒã³åºãåã«ããªãã¢ããªã±ãŒã·ã§ã³ãé£çµ¡å ã«ã¢ã¯ã»ã¹ããå¿ èŠãããã®ãããããŠãããã©ã®ãããªå ·äœçãªå©çãæäŸããã®ãããŠãŒã¶ãŒã«æç¢ºã«èª¬æããŸããäŸãã°ããé£çµ¡å ãžã®ã¢ã¯ã»ã¹ãèš±å¯ããããããã©ãããã©ãŒã äžã«ããå人ãšã®æ¥ç¶ãæ¯æŽããŸããã®æ¹ã广çã§ãã
- æèã«åãããèŠæ±ïŒãŠãŒã¶ãŒã®çŸåšã®ã¿ã¹ã¯ã«é¢é£ããå Žåã«ã®ã¿ãé£çµ¡å ãžã®ã¢ã¯ã»ã¹ãæ±ããŸããããã«å¿ èŠã§ãªãå Žåã¯ãã¢ããªã®ååèªã¿èŸŒã¿æã«ã¢ã¯ã»ã¹ãèŠæ±ããã®ãé¿ããŸãã
- æç¢ºãªUI/UXïŒé£çµ¡å ããã«ãŒãäžå¿ã«ãçŽæçã§ãé£çµ¡å ã®éžæãšå ±æã®ããã»ã¹ãå®å šã§å¶åŸ¡ãããŠãããšæããããããã«ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãèšèšããŸãã
- ãã©ã€ãã·ãŒããªã·ãŒãšã®çµ±åïŒãã©ã€ãã·ãŒããªã·ãŒããAPIãä»ããŠååŸããé£çµ¡å æ å ±ãã©ã®ããã«äœ¿çšãä¿åã管çããããããé¢é£ããã°ããŒãã«ãªãã©ã€ãã·ãŒèŠå¶ãšäžèŽããããã«æç¢ºã«èšè¿°ããŠããããšã確èªããŸãã
2. å ç¢ãªæ©èœæ€åºãšãã©ãŒã«ããã¯ã®å®è£
- åžžã«ãµããŒãã確èªããïŒ
if ('contacts' in navigator && 'select' in navigator.contacts)
ã䜿çšããŠAPIã®å©çšå¯èœæ§ãæ€åºããŸãã - ã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ïŒãµããŒããããŠããªããã©ãŠã¶ããŠãŒã¶ãŒãã¢ã¯ã»ã¹ãæåŠããå Žåãæç¢ºã§äœ¿ãããããã©ãŒã«ããã¯ã¡ã«ããºã ãæäŸããŸããããã«ã¯ãæåå ¥åãã©ãŒã ãCSV/VCFãã¡ã€ã«ã®ã¢ããããŒããªãã·ã§ã³ïŒé©åãªèŠåä»ãïŒããŸãã¯ãµãŒãããŒãã£ã®é£çµ¡å ãµãŒãã¹ãšã®çµ±åïŒããããã©ã€ãã·ãŒãžã®åœ±é¿ãååã«èæ ®ïŒãªã©ãèããããŸãã
- ãŠãŒã¶ãŒã«ç¥ãããïŒãã©ãŠã¶ã®å¶éã«ããæ©èœãå©çšã§ããªãå Žåã¯ããŠãŒã¶ãŒãæ··ä¹±ãããã®ã§ã¯ãªãããã®æšãäŒããŸãã
3. å¿ èŠãªæ å ±ã®ã¿ãèŠæ±ããïŒããŒã¿æå°åïŒ
- ããããã£ãå
·äœçã«æå®ããïŒã¢ããªã±ãŒã·ã§ã³ãçŽç²ã«å¿
èŠãšããé£çµ¡å
ããããã£ã®ã¿ãåžžã«æå®ããŸãïŒäŸïŒã¡ãŒã«æåŸ
ãéãã ããªã
['name', 'email']
ã®ã¿ïŒãã¡ãŒã«ããå¿ èŠãªãå Žåã«['name', 'email', 'tel', 'address', 'icon']
ãèŠæ±ããã®ã¯é¿ããŸãã - ãŠãŒã¶ãŒã®éžæãå°éããïŒAPIãè€æ°ã®ããããã£ã®èŠæ±ãèš±å¯ããŠããŠããã¢ããªã±ãŒã·ã§ã³ã1ã€ãã䜿çšããªãå Žåã¯ãããã¯ãšã³ããšãã®åŸã®åŠçããã®1ã€ã ããå©çšããããã«ããŸãã
4. å®å šãªããŒã¿åŠçïŒéžæåŸïŒ
- ããŒã¿ãæ©å¯æ å ±ãšããŠæ±ãïŒé£çµ¡å ããŒã¿ãã¢ããªã±ãŒã·ã§ã³ã«ãã£ãŠåä¿¡ããããããããéåžžã«æ©å¯æ§ã®é«ãå人æ å ±ãšããŠæ±ããŸãã
- äžæçãªäœ¿çšïŒããŒã¿ãäžåºŠããã®æäœïŒäŸïŒãã©ãŒã ã®äºåå ¥åïŒã«ã®ã¿å¿ èŠãªå Žåã¯ããµãŒããŒã«é·æéä¿åããã®ãé¿ããŸãã
- å®å šãªä¿ç®¡ïŒä¿ç®¡ãå¿ èŠãªå Žåã¯ãæå·åããã¢ã¯ã»ã¹ãå¶éãã䟵害ããä¿è·ããããã®å ç¢ãªã»ãã¥ãªãã£å¯Ÿçã宿œããŸãã
- å¿åå/ä»®ååïŒå¯èœãªå Žåã¯ãç¹ã«çŽæ¥çãªèå¥ãå¿ èŠãšããªãåæç®çã§äœ¿çšãããå Žåã¯ãé£çµ¡å ããŒã¿ãå¿ååãŸãã¯ä»®ååããŸãã
- ããŒã¿ä¿æããªã·ãŒïŒæç¢ºãªããŒã¿ä¿æããªã·ãŒãå®è£ ããæ£åœãªç®çãæãããããé£çµ¡å ããŒã¿ãåé€ããŸãã
5. APIã®å€æŽãšãã©ã€ãã·ãŒèŠå¶ã®ææ°æ å ±ãææ¡ãã
- W3C仿§ãç£èŠããïŒWeb Contacts APIã¯é²åããæšæºã§ããW3Cããã®æŽæ°ã«æ³šæãæããŸãã
- ãã©ãŠã¶ã®ãªãªãŒã¹ããŒãïŒãã©ãŠã¶ã®ãµããŒããšå®è£ ã®è©³çްã®å€æŽã远跡ããŸãã
- ã°ããŒãã«ãªãã©ã€ãã·ãŒç¶æ³ïŒãã©ã€ãã·ãŒæ £è¡ãšæ³çã³ã³ãã©ã€ã¢ã³ã¹æŠç¥ã宿çã«èŠçŽããæ°ãããŸãã¯é²åããããŒã¿ä¿è·æ³ïŒäŸïŒç±³åœã®æ°ããå·æ³ãæ¢åã®åœå æ³ã®æ¹æ£ïŒã«ã°ããŒãã«ã«å¯Ÿå¿ããããã«æŽæ°ããŸãã
Webã«ããããã€ãã£ãé£çµ¡å ã¢ã¯ã»ã¹ã®æªæ¥
Contact Picker APIã¯ãWebã¢ããªã±ãŒã·ã§ã³ã«ãããã€ãã£ãã«è¿ãæ©èœãäžãããšããåºç¯ãªãã¬ã³ãã®æç¢ºãªææšã§ãããå€ãã®å Žåãã»ãã¥ãªãã£ãšãã©ã€ãã·ãŒã確ä¿ããããã«ãã©ãŠã¶ã«ãã£ãŠä»²ä»ãããŸãããã®è»éã¯ãããã°ã¬ãã·ããŠã§ãã¢ããªïŒPWAïŒã®å°é ãšæ·±ãçµã³ã€ããŠããŸãã
ããã°ã¬ãã·ããŠã§ãã¢ããªïŒPWAïŒãšãã€ãã£ãæ©èœ
PWAã¯ããªãã©ã€ã³ã¢ã¯ã»ã¹ãããã·ã¥éç¥ãããã€ã¹ããŒããŠã§ã¢çµ±åãªã©ã®æ©èœããã¹ãŠWebãã©ãŠã¶ããæäŸããããšã§ãWebãšãã€ãã£ãã¢ããªã±ãŒã·ã§ã³ã®éã®ã®ã£ãããåããããšãç®æããŠããŸããContact Picker APIã®ãããªAPIã¯ããã®ããã·ã§ã³ã«ãããéèŠãªæ§æèŠçŽ ã§ãããããã¯PWAããã€ãã£ãã¢ããªãšãŸããŸãåºå¥ãã€ããªãäœéšãæäŸããããšãå¯èœã«ããWebããªããã§ã€ã³ã¿ã©ã¯ãã£ãããã€ããŒãœãã©ã€ãºãããã¢ããªã±ãŒã·ã§ã³ã®ããã®ããé åçãªãã©ãããã©ãŒã ã«ããŸãããã匷åãªWeb APIãç»å Žããã«ã€ããŠãWebãšãã€ãã£ãã®å¢çç·ã¯ææ§ã«ãªãç¶ãããŠãŒã¶ãŒãšéçºè ã«äž¡æ¹ã®äžçã®é·æãããªãã¡Webã®ã¢ã¯ã»ã·ããªãã£ãšãªãŒãããããŠãã€ãã£ããã©ãããã©ãŒã ã®ãã¯ãŒãšçµ±åãæäŸããŸãã
é²åãããã©ã€ãã·ãŒåºæºãšãã©ãŠã¶ã®é©æ°
ãã©ã€ãã·ãŒãžã®èŠæ±ã¯éçãªãã®ã§ã¯ãªããçµ¶ããé²åããŠããŸãããŠãŒã¶ãŒãèªèº«ã®ããŒã¿æš©ã«ã€ããŠããæèããããã«ãªããæ°ããæè¡ãç»å Žããã«ã€ããŠããã©ãŠã¶ãæšæºåå£äœã¯ãã®åéã§é©æ°ãç¶ããããšãæåŸ ãããŸããããã«ã¯ä»¥äžã®ãããªãã®ãå«ãŸããå¯èœæ§ããããŸãïŒ
- ãããã现ããªèš±å¯ïŒé£çµ¡å å ã®ã©ã®ç¹å®ã®ããŒã¿ãã£ãŒã«ããå ±æã§ãããããããã¯æéå¶éä»ãã®ã¢ã¯ã»ã¹ãªã©ãããã«çްããå¶åŸ¡ã
- çµ±äžãããåæUIïŒç°ãªããã©ãŠã¶ããã©ãããã©ãŒã éã§ãããäžè²«æ§ããããæ®éçã«çè§£ãããåæããã³ããã
- æ°ãããã©ã€ãã·ãŒéèŠã®APIïŒä»ã®æ©å¯æ§ã®é«ãããã€ã¹ããŒã¿ïŒäŸïŒã«ã¬ã³ããŒãããã€ã¹ã»ã³ãµãŒïŒããã©ã€ãã·ãŒãä¿è·ããæ¹æ³ã§å®å šã«å ¬éããããã«èšèšããããããªãAPIã
Contact Picker APIã¯ããã®ãããªå°æ¥ã®APIãã©ã®ããã«èšèšããåŸããã«ã€ããŠã®åªããã¢ãã«ãšããŠæ©èœããŸãïŒãŠãŒã¶ãŒäž»å°ããã©ãŠã¶ä»²ä»ããããŠããã©ã«ãã§ãã©ã€ãã·ãŒäžå¿ã
æšæºåå£äœã®åœ¹å²
W3Cã®ãããªçµç¹ã¯ããããã®APIãæšæºåããçžäºéçšæ§ãã»ãã¥ãªãã£ããããŠWebå šäœã§äžè²«ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã確ä¿ããäžã§éèŠãªåœ¹å²ãæãããŠããŸãããã©ãŠã¶ãã³ããŒãéçºè ã³ãã¥ããã£ãšã®ååçãªåãçµã¿ã¯ãWebãã©ãããã©ãŒã ã®å¥å šãªé²åã«äžå¯æ¬ ã§ããã°ããŒãã«ãªéçºè ã³ãã¥ããã£ããã®ç¶ç¶çãªé¢äžãšãã£ãŒãããã¯ã¯ããããã®ä»æ§ãæŽç·Žãããæ¡å€§ããæé«ã®ãã©ã€ãã·ãŒãšã»ãã¥ãªãã£åºæºãç¶æããªããçŸå®äžçã®ããŒãºãæºããããšãä¿èšŒããããã«äžå¯æ¬ ã§ãã
çµè«ïŒãããã©ã€ããŒãã§æ©èœçãªWebãžã®äžæ©
Contact Picker APIã¯ãWebã®ç¶ç¶çãªé²åã®èšŒã§ããããã©ãããã©ãŒã ãçŸä»£ã®ãŠãŒã¶ãŒã®æ©èœã«å¯ŸããæåŸ ã«å¿ãã€ã€ãåæã«ãã©ã€ãã·ãŒä¿è·ã匷åããæ¹æ³ã瀺ããŠããŸããããã¯ãé·å¹Žã®èª²é¡ã«å¯Ÿãã匷åã§ãŠãŒã¶ãŒäžå¿ã®è§£æ±ºçãæäŸããWebã¢ããªã±ãŒã·ã§ã³ãåã ã®ããŒã¿èªæ²»ãå°éããã°ããŒãã«ãªãã©ã€ãã·ãŒååã«æ²¿ã£ãæ¹æ³ã§é£çµ¡å æ å ±ã«ã¢ã¯ã»ã¹ããããšãå¯èœã«ããŸãã
äžçäžã®éçºè ã«ãšã£ãŠãContact Picker APIãæ¡çšããããšã¯ãåã«æ°ããæè¡ãå°å ¥ãã以äžã®æå³ãæã¡ãŸããããã¯ãå«ççãªéçºãžã®ã³ãããã¡ã³ããšãã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®æäŸãšæ©å¯æ§ã®é«ãå人ããŒã¿ã®ä¿è·ãšã®éã®åŸ®åŠãªãã©ã³ã¹ã«å¯Ÿããããæ·±ãçè§£ãæå³ããŸããäžè²«æ§ã®ãªããã©ãŠã¶ãµããŒããå ç¢ãªãã©ãŒã«ããã¯ã®å¿ èŠæ§ãšãã£ã課é¡ã¯æ®ããŸãããAPIã®åºæ¬çãªèšèšã¯ãããä¿¡é Œæ§ãé«ãçµ±åãããWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®åŒ·åºãªåºç€ãæäŸããŸãã
ããžã¿ã«ã©ã³ãã¹ã±ãŒããé²åãç¶ããäžã§ãContact Picker APIãäœçŸããååïŒéææ§ããŠãŒã¶ãŒã³ã³ãããŒã«ãããŒã¿æå°åïŒã¯ãŸããŸãéèŠã«ãªãã§ãããããã®APIã責任ãæã£ãŠå®è£ ããçµ¶ããå€åãããã©ã€ãã·ãŒã®ç¶æ³ãææ¡ãç¶ããããšã§ãéçºè ã¯ãããæ©èœçã§é åçãªã ãã§ãªãããã®ã°ããŒãã«ãªãŠãŒã¶ãŒã®ãã©ã€ãã·ãŒæš©ãæ ¹æ¬çã«ããå°éããWebã®æ§ç¯ã«è²¢ç®ããããšãã§ããŸãã