L'iPhone ne permet pas d'avoir sur son écran d'accueil, des icônes permettant d'appeler directement un correspondant et aucune application ne le permet. Toutefois le html5 permet d'appeler un numéro de téléphone grâce à un lien hypertexte (la balise <a> ).
Voici donc, après une explication des principes mis en oeuvre, une page Html/Javascript permettant de réaliser cela. Ces principes "Lien hypertexte_ Téléphone" faisant appel au Html peuvent être appliqués à toute page destinée aux smartphone.
Vocabulaire : Tap = clic avec le doigt. Jailbreack = évasion, faire sauter la sécurité
Source / Exemple :
<!--
Sur un iPhone, peut-on créer un icône pour appeler un numéro de téléphone sans jailbreack.
C'est possible par l'intermédiaire d'une page Html-Javascript (ou Php ...)
Principe.
Pour appeler un numéro de téléphone dans une page Html,
il suffit de faire, dans cette page, un lien hypertexte tel que :
<a href="tel=06123456789">Mon amour</a>
En faisant un Tap sur "Mon amour" vous composerez son numéro de téléphone.
Il vous suufit de valider le message de confirmation.
Le synopsis de l'icône appelant automatiquement un numéro de téléphone est donc le suivant :
Etape 1 - On dépose sur un serveur une image PNG de 114x114 pixels pour iPhone et 57x57 pour les versions précédente.
Etape 2 - On crée, sur ce serveur, une page Web spécifiant cette image comme icône .
Exemple avec la page web et l'image dans le même répertoire
A nommer(par exemple) monamour.html
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="apple-touch-icon" href="./monamour.png"/>
<title>Mon amour</title>
<style>
body {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:medium;
}
</style>
</head>
<body>
<div><p>
Ajouter à l'écran d'accueil ( une icône)
<br /> en utilisant le bouton "Flèche qui sort de saboite" en bas de l'écran
</p></div>
</body>
</html>
<!--
Lancez cette page Html sur votre iPhone et créé l'icône en modifiant éventuellement le nom proposé.
Etape 3 - On remplace cette page Web par une page HTml/Javascript de même nom au même endroit du serveur.
Exemple ( toujours monamour.html )
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="apple-touch-icon" href="./monamour.png"/>
<title>Mon amour</title>
<style>
body {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:medium;
}
</style>
<script type="text/javascript">
function demarre() {
window.location.href = "tel:0612345678";
}
</script>
</head>
<body onload="demarre();">
<div><p>
<img alt="" src="./monamour.png" />
</p></div>
</body>
</html>
<!--
Désormais, un tap sur votre icône appellera Mon Amour!
#####################
Généralisation
Plus difficile à comprendre mais ce n'est pas indispensable pour l'utiliser.
On ne va, quand même, pas faire cette opération pour chaque numéro.
Surtout si on veut en faire profiter la famille ou les copains-copines de l'association.
Etape 1 : on a besoin d'images
On dépose toutes nos images sur le serveur. et on leur donne une forme de nom commune à tous.
Par exemple : nr06123456789.png, nr0615151515, ...
Si on a des utilisateurs d'un même numéro avec des iphones 4 et d'autres avec des 3G,
on va utiliser un numéro en national et un en international.
Exemple 3g donne nr06123456789.png de 57x57 pixels et 4 donne nr00336123456789.png de 114x114
L'idéal serait de faire une page de téléchargement en PHP qui prend n'importe quelle image et la met au bon format.
Sachant que se serait pas téléchargeable à partir de l'iPhone où Safari interdit les upload.
Etape 2 : on utilise une page Html ( on est autorisé à faire des variante en Php ) qui servira à tous et qui permettra de créer son icône à la 1ère utilisation puis qui appellera les fois suivantes.
Principe :
a) on passe le numéro dans la chaîne de requête de la page Html ce qui donne une adresse différente pour chaque numéro
b) grâce au cookie on peut savoir si on lance la première fois pour créer l'icône ou si on est aux fois suivantes pour appeler.
Si on efface les cookies, la 1ère nouvelle utilisation de l'icône ne fera pas automatiquement l'appel mais on pourra toutefois appeler en faisant un tap sur l'image (copie de l'icône).
Exemple d'adresse qu'il faudra utiliser, Si la page s'appelle teliphone.html et qu'on appele mon amour :
..../teliphone.html?nr=06123456789
Et voici la page Html en question
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<script type="text/javascript">
/**
-
- @author Rainbow
- Appeler un numéro de téléphone grâce à une icône sur l'écran d'accueil de mon iPhone
-
- Montbonnot, le 28/12/2010
- Pessac, le 13/01/2011
-
- /
function setCookie(name, value, expireDansNJours){
var dtExpiration = new Date();
dtExpiration.setTime(dtExpiration.getTime()+3600*1000*24*expireDansNJours);
document.cookie = name + "=" + escape(value) + "; expires=" + dtExpiration.toGMTString();
}
function ajouteCookie(nom, valeur, nbJours) {
setCookie(nom, valeur, nbJours);
}
function getCookie(name){
var cookies = document.cookie.split(/\s*;\s*/);
for(var i=0; i < cookies.length; i++){
var mycook = cookies[i].split(/\s*=\s*/);
if(mycook[0]==name)return unescape(mycook[1]);
}
}
function lireCookie(nom) {
var r = getCookie(nom);
return(r);
}
var nrTelephone = "";
var nomImage = "/apple-touch-icon.png";
var extImage = '.png';
function lectureParametres() {
var reqs = new Array();
var sReq = window.location.search.slice(1);
if (sReq != '') {
var regx=new RegExp("( )", "g");
sReq = sReq.replace(/\s/g,"");
regx=new RegExp("(%20)", "g");
sReq = sReq.replace(regx,"");
regx=new RegExp("&", "g");
var sPrms = sReq.split(regx);
var i;
for (i=0;i<sPrms.length;i++) {
regx=new RegExp("=", "g");
var sElems = sPrms[i].split(regx);
if (sElems[1] != '') {reqs[sElems[0]] = sElems[1]}
}
}
return(reqs);
}
var requetes = lectureParametres();
var requetesOk = true;
var appeler = false;
if (requetes['nr']!=undefined) {
nrTelephone = ""+requetes['nr'];
nomImage = './'+"nr"+requetes['nr']+extImage;
if (requetes['refaire']!=undefined) {
ajouteCookie('nr'+nrTelephone, 0, -1);
}
var appel = lireCookie('nr'+nrTelephone);
if (parseInt(appel)==1) { appeler = true;}
ajouteCookie('nr'+nrTelephone, 1, 100);
}
else {
requetesOk = false;
}
</script>
<script type="text/javascript">document.write('<link rel="apple-touch-icon" href="./'+nomImage+'"/>');</script>
<title>Tél iPhone</title>
<style>
body {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:medium;
margin:10px;
}
div {
text-align:center;
}
#image {
width:100%;
padding-top:20px;
}
.rmq {
color:#0a0;
}
.prm {
color:#00d;
font-style:italic;
}
#image {
width:100%;
text-align:center;
}
#mon_image {
border-style:solid;
border-width:0px;
border-color:transparent;
border-radius:18px;
}
#message_information {
padding:10px;
text-align:left;
}
</style>
<script type="text/javascript">
var monUrl = window.location.host+window.location.pathname;
var p = monUrl.lastIndexOf('/');
var monDir = monUrl.slice(0,p);
var urlFuite = window.location;
var titreInfo = "Mettre une icône d'appel téléphonique sur son iPhone";
var syntaxe = 'Exemple : ';
syntaxe += '<br />'+"Pour appeler le 0612345678 :";
syntaxe += '<br />'+"1. mettre une image nr0612345678.png dans le répertoire "+monDir;
syntaxe += '<br />'+"2. dans Safari, lancer : "+monUrl+'?nr='+'0612345678'+' (sans espaces)';
syntaxe += '<br />'+"3. Tap sur l'icône flèche qui sort de sa boite";
syntaxe += '<br />'+"4. Tap sur ''Ajouter à l'écran d'accueil''";
syntaxe += '<br />'+"5. Changer le nom, puis Tap sur ''Ajouter''";
syntaxe += '<br />'+"6. Quitter Safari'";
syntaxe += '<br />';
syntaxe += '<br />'+"Une nouvelle icône apparait, sur l'écran d'accueil, pour appeler votre correspondant.";
syntaxe += '<br />'+"Cette icône déclenchera automatiquement l'appel.";
var aideInfo = 'Pour "'+"Ajouter à l'écran d'accueil"+',"';
aideInfo += '<br />'+"utilisez le bouton "+'"envoyer".';
aideInfo += '<br />'+"N'oubliez pas de donner un nom à l'icône.";
function appelTelephonique() {
window.location.href = "tel:"+nrTelephone;
}
function afficheInfo(texte) {
document.getElementById('texte_info').innerHTML = texte;
}
function demarre() {
if (requetesOk) {
document.images['mon_image'].src = nomImage;
document.getElementById('nr_telephone').innerHTML = nrTelephone;
if (appeler) {
document.title = nrTelephone;
appelTelephonique();
}
else {
document.title = 'Donne un nom';
afficheInfo(aideInfo);
}
}
else {
document.getElementById('titre_info').innerHTML = titreInfo;
afficheInfo(syntaxe);
}
}
</script>
</head>
<body onload="demarre();">
<div id="conteneur">
<div id="image">
<div id="l_image">
<img alt="" id="mon_image" name="mon_image" src="" onclick="appelTelephonique();"/>
<p id="nr_telephone"></p>
</div>
</div>
<div id="message_information">
<h3 id="titre_info"></h3>
<p id="texte_info"></p>
</div>
</div>
</body>
</html>
Conclusion :
En espérant que mes petites modifications de dernières minutes ne plantent pas.
Pour ceux qui se demandent pourquoi j'ai deux étages pour accéder aux cookies ;
c'est une solution pour contourner un bug de Safari(parait-il) qui nous vire de de la fonction en cours lors des accès cookies.
Je vous déconseille de faire une Web-App, de la page proposée, à l'aide de :
<meta name="apple-mobile-web-app-capable" content="yes">
Car lorsque l'appel est terminé, la page se rouvre pour vous redemander confirmation d'appeler. Et vous devrez annuler (un tap de plus).
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.