Catégories

Comment puis-je mettre une icône en tant que raccourci ?

Comment puis-je mettre une icône en tant que raccourci ?

Mise à jour : Grâce au lecteur MacStories Thomas, j’ai pu supprimer le besoin de télécharger des images dans Dropbox. Le raccourci est maintenant beaucoup plus rapide à exécuter (prend environ 5 secondes au lieu de 20) et n’a pas besoin d’enregistrer de fichier dans votre compte Dropbox. Vous pouvez obtenir le raccourci mis à jour à la fin de ce post.

A découvrir également : Comment ouvrir un raccourci ?

J’ ai toujours été intrigué par l’implémentation de Workflow de « Ajouter à l’écran d’accueil » — une fonctionnalité qu’Apple a conservée dans la transition vers l’application Raccourcis, et qui permet aux utilisateurs de créer des icônes d’écran d’accueil pour lancer leurs raccourcis favoris. Donc plus tôt ce mois-ci, j’ai décidé que je voulais apprendre comment Raccourcis gérait la création d’icônes d’écran d’accueil.

Après quelques semaines d’expériences et de raffinements, j’ai fini par l’implémentation « Ajouter à l’écran d’accueil » de Reverse-engineering Shortcuts’, qui s’avère être une évolution du hack existant de Workflow basé sur Safari et Web clips. Le résultat est Créateur d’icônes d’écran d’accueil, un raccourci avancé qui vous permet de créer des icônes personnalisées de l’écran d’accueil pour lancer des applications, des raccourcis personnalisés à partir de l’application Raccourcis ou des actions spécifiques pour l’un de vos contacts ; le raccourci peut également générer des icônes avec des couleurs unies, que vous pouvez combiner avec des fonds d’écran correspondants pour créer des mises en page personnalisées de l’écran d’accueil.

A voir aussi : Où est la zone de quarantaine Avast ?

Ce raccourci est, de loin, la pièce la plus complexe de l’automatisation iOS que j’ai jamais mise sur pied pour MacStories, et je suis satisfait du produit final. Il réplique entièrement une fonctionnalité de raccourcis natifs tout en vous donnant la liberté de créer des icônes et des lanceurs pour tout ce que vous voulez. Il n’y a pas de configuration nécessaire à la fin de l’utilisateur : il vous faudra 20 secondes pour créer votre première icône personnalisée, avec des instructions à l’écran. Permettez-moi cependant d’offrir plus de contexte sur la façon dont ce raccourci est venu à être, comment il fonctionne dans les coulisses et ce que vous pouvez construire avec.

Comment fonctionne l’option « Ajouter à l’écran d’accueil »

Pour créer des lanceurs d’écran d’accueil, Workflow et Raccourcis s’appuient sur une technique qui implique le chargement arbitraire HTML dans Safari via une URL de données : contenant du contenu HTML codé en base64. Contrairement à son homologue macOS, Safari sur iOS ne supporte pas l’ouverture de fichiers .html directement dans le navigateur ; comme je l’ai expliqué la semaine dernière sur Club MacStories (où je construis actuellement une série de raccourcis basés sur cette idée), la seule façon de charger HTML dans Safari pour iOS est de lui fournir une chaîne encodée attaché à une URL de données.

Vous connaissez peut-être cette page de destination, qui explique comment ajouter un raccourci à l’écran d’accueil :

Ce que vous ne savez peut-être pas, c’est qu’il y a des années (avant leur acquisition), l’équipe Workflow a mis au point un concept ingénieux, qu’Apple utilise encore aujourd’hui pour les raccourcis : sous le capot, ces pages de destination contiennent du code JavaScript qui n’est exécuté que lorsque la page Web est lancée en tant qu’application Web à partir de l’écran d’accueil iOS (Apple appelle parfois ces « clips Web »). Ce mode est appelé « autonome », et cela explique pourquoi, chaque fois que vous appuyez sur une icône de raccourci à partir de l’écran d’accueil, vous voyez un écran de démarrage pendant une seconde avant le lancement de l’action associée. En fait, vous ouvrez une application Web qui vous redirige automatiquement vers une autre URL.

Mais comment fonctionne le lancement automatique ? C’est le piratage fascinant que les ingénieurs Workflow ont conçu il y a des années. Après avoir choisi d’ajouter un raccourci à l’écran d’accueil, son schéma d’URL « Run raccourci » se voit attribuer un ID de lien spécifique dans le code HTML de l’application Web. En utilisant JavaScript et MouseEvents, l’application web simule alors un clic de souris sur ce lien invisible, qui lance automatiquement l’URL. En tant qu’utilisateur, vous ne voyez rien de ceci : le lien n’est pas imprimé sur la page Web, et tout ce que vous voyez est son écran de démarrage initial ; sous le capot, l’icône que vous appuyez sur l’écran d’accueil charge une application web locale pendant une seconde avant de lancer l’URL incorporée dans son code.

Il est important de noter que je n’ai pas eu à décompiler quoi que ce soit pour découvrir ceci : tout ce code est disponible pour les utilisateurs de l’application Raccourcis via la barre d’adresse Safari. Avant d’ajouter un raccourci à l’écran d’accueil, copiez les données : URL de Safari, recherchez la partie base64 et exécutez-la via n’importe quel service Web ou application pouvant décoder du texte base64. Vous recevrez une copie complète du code HTML utilisé par Raccourcis pour créer des lanceurs sur l’écran d’accueil.

Une fois que j’ai compris comment les raccourcis pouvaient créer des clips Web qui lançaient automatiquement des schémas d’URL sans interaction de l’utilisateur, j’ai commencé à modifier le code d’Apple pour répondre à mes besoins et préférences. J’ai ajouté l’option pour créer différents types de lanceurs, y compris la possibilité de lancer n’importe quel schéma d’URL pour n’importe quelle application iOS ; j’ai conçu une page de destination pour Safari ; J’ai trouvé ma propre solution de contournement pour les écrans de démarrage réactifs, qui impliquait l’écriture de requêtes multimédias et le calcul des ratios de pixels WebKit en fonction de la résolution de l’appareil – tout en concevant le raccourci pour abstraire cette complexité de l’utilisateur autant que possible. J’ai eu une première version de ce raccourci il y a des semaines ; j’ai attendu parce que je voulais le rendre plus joli, plus raffiné et plus facile à exécuter pour tout le monde.

Mais assez avec les détails techniques. Jetons un oeil à la façon dont le raccourci fonctionne.

Créateur d’icône d’écran d’accueil

Le raccourci prend en charge quatre types de lanceurs, qui peuvent être ajoutés en tant qu’icônes à l’écran d’accueil iOS :

  • Lancer un schéma d’URL d’application
  • Exécuter un raccourci personnalisé dans l’application Raccourcis
  • Appelez, textez ou FaceTime un contact spécifique
  • Créer une icône de couleur unie (ne lance pas n’importe quoi)

Dès que le raccourci démarre, il vous sera demandé de choisir le type de lanceur d’écran d’accueil que vous souhaitez créer. Ce processus doit être répété sur tous les appareils sur lesquels vous souhaitez ajouter une icône car les clips Web ne sont pas synchronisés sur les appareils iOS.

Choisissez un type de lanceur.

Si vous choisissez de créer un lanceur pour un schéma d’URL générique, il vous sera demandé de coller l’URL dans un champ de texte ; tout schéma d’URL fonctionne et vous n’avez pas à vous occuper de coder vous-même des caractères spéciaux (comme des espaces).

Ajout d’un schéma d’URL à lancer à partir de l’écran d’accueil iOS plus tard.

Après avoir entré l’URL que vous souhaitez ouvrir à partir de l’écran d’accueil, vous serez invité à rechercher l’illustration d’application que vous souhaitez utiliser comme icône dans l’App Store. Tout cela est fait dans Raccourcis et c’est une étape nécessaire pour finir avec une icône personnalisée qui ne ressemble pas à un carré vierge.

Utilisation de l’icône Agenda pour créer un lanceur pour le schéma d’URL Agenda.

Les actions natives de l’App Store de raccourcis pour extraire l’illustration d’application vous permettent de proposer des implémentations intéressantes d’icônes d’applications tierces. Par exemple, vous pouvez placer trois icônes Tweetbot différentes sur votre écran d’accueil, chacune lançant une section différente pour l’application. Vous pouvez également utiliser l’icône officielle de l’application Twitter pour lancer Tweetbot. Ou – et c’est quelque chose que je fais moi-même — vous pouvez rechercher dans l’App Store des applications Apple natives et utiliser leurs logos par défaut comme icônes pour lancer différentes applications ou raccourcis.

Ce qui m’amène au deuxième type de lanceur — la possibilité de lancer l’un de vos raccourcis via une icône sur l’écran d’accueil. Fonctionnellement, cela n’est pas différent de la prise en charge de Shortcutts pour ajouter l’un de vos raccourcis personnalisés en tant qu’icône d’écran d’accueil. Cependant, ma version est un peu plus agréable en ce qu’il vous présente une liste de tous vos raccourcis installés (triés par date) à choisir, et il prend également en charge l’utilisation des illustrations de n’importe quelle application App Store comme icône pour un raccourci. Par exemple, j’utilise l’icône de l’excellente application Home tierce comme illustration pour mon raccourci Home Commandes, et je l’adore.

Création de lanceurs de raccourcis à l’aide des icônes d’application de l’App Store.

Si vous n’aimez pas mon approche d’utiliser l’App Store comme référentiel pour des millions d’icônes d’applications différentes et que vous préférez charger vos propres fichiers d’icônes, vous pouvez modifier mon raccourci pour le faire. Il suffit de supprimer toutes les actions de l’App Store et d’utiliser « Sélectionner les photos » pour enregistrer une image en tant que variable « Image principale ». Le choix est à vous ; par défaut, l’App Store devrait vous donner beaucoup d’options en termes d’icônes personnalisées que vous pouvez utiliser.

La troisième catégorie de lanceurs pris en charge par ce raccourci sont actions spécifiques au contact. En tirant parti de l’intégration de Shortcutts avec la base de données Contacts d’OS et de la prise en charge à l’échelle du système pour les schémas d’URL par téléphone, SMS et FaceTime, le raccourci peut créer des lanceurs qui vous redirigeront vers un thread Messages (ou en démarreront un nouveau) ou vous invite à appeler le contact sélectionné par téléphone, FaceTime ou FaceTime Audio.

Vous pouvez créer des lanceurs de contacts pour les appels téléphoniques, les messages et FaceTime.

De toutes les fonctionnalités que j’ai créées pour ce raccourci, les lanceurs de contact sont mes préférés. Il est agréable et pratique de pouvoir créer des icônes pour les personnes les plus importantes dans votre vie et voir leurs photos de profil sur l’écran d’accueil. Le raccourci vous permet de choisir entre les numéros de téléphone et les adresses e-mail d’un contact sélectionné, et il vous permet même de confirmer le numéro de téléphone ou l’adresse e-mail à utiliser si plusieurs sont trouvés dans la carte d’un contact. Si vous vous rencontrez dans et sortez d’un message avec votre partenaire, ou si vous voulez simplement un moyen rapide de FaceTime avec vos enfants, ce raccourci vous permet de créer des icônes personnalisées pour cela — gratuitement, sans avoir à télécharger une application tierce depuis l’App Store.

Enfin, voici l’écran d’accueil de mon iPad Pro :

Mon iPad Pro écran d’accueil. Remarquez les deux icônes pour Agenda dans le dock — une pour l’application, une pour mon lanceur.

Pour réaliser cette mise en page spécial1, j’ai utilisé l’astuce simple d’ajouter des icônes noires sur un fond noir, créant l’illusion qu’il y a un écart sur mon écran d’accueil. En réalité, si vous choisissez l’option pour créer une icône de couleur unie lors de l’exécution du raccourci, il vous sera demandé de taper la couleur souhaitée (vous pouvez taper n’importe quel nom anglais pris en charge par la valeur HTML ou HEX), qui sera ensuite utilisée pour créer une icône de cette couleur spécifique.2 Si vous souhaitez personnaliser votre iPhone ou iPad écran d’accueil en simulant des lacunes à travers solide couleurs, ce raccourci devrait être utile.

Les quatre types de lanceurs de raccourcis ont deux aspects communs : ils utilisent le codage base64 pour les images qui seront utilisées dans le balisage HTML pour indiquer les icônes et les écrans de démarrage ; et, à la fin du processus, ils chargent une page Web Safari personnalisée contenant des instructions sur la façon d’ajouter l’icône à la écran d’accueil.

Une page web personnalisée lancée par le raccourci avec des instructions sur la façon d’ajouter un lanceur à l’écran d’accueil.

Les détails dont je suis le plus fier sont les petites touches et les raffinements que j’ai pu ajouter dans les dernières étapes du raccourci. La page de destination qui s’ouvre dans Safari est HTML qui utilise un CSS personnalisé pour charger la police de caractères natif de San Francisco sur les appareils iOS ; l’image qui explique comment ajouter une icône d’écran d’accueil diffère entre l’iPhone et l’iPad et est incorporée dans le HTML lui-même en tant qu’actif base64. Tu n’as pas besoin de savoir tout ça, mais j’ai juste je voulais vous dire que je m’en soucie.

Enfin, j’aimerais appeler les écrans de démarrage que vous allez voir pendant une fraction de seconde après avoir ouvert un raccourci à partir de l’écran d’accueil.

icônes personnalisées et écrans de démarrage.

Je voulais que l’expérience de tapoter des icônes soit agréable, ce qui signifiait que je devais comprendre comment éviter de charger un écran blanc vierge après avoir tapé sur l’icône et avant la redirection vers une URL différente. Étant donné que ces clips Web sont effectivement des applications Web qui prennent en charge les dernières fonctionnalités Progressive Web Apps adoptées par WebKit et Safari, tout ce que j’avais à faire était de comprendre comment intégrer des requêtes multimédias pour différents appareils iOS dans le raccourci, créant des images de lancement correctement dimensionnées pour l’appareil où le raccourci était en cours d’exécution. Ça a pris un certain temps. Pour le dire simplement : au moment de l’exécution, le raccourci vérifie la résolution de votre appareil, la compare à une liste de rapports de pixels, calcule la taille d’un élément apple-touch-startup-image et crée des écrans de démarrage statiques qui utilisent une version plus grande de l’icône de l’écran d’accueil. Sur la plupart des appareils iOS modernes3, vous devriez voir un écran de démarrage après avoir tapé sur une icône de lanceur sur l’écran d’accueil. Encore une fois, il n’améliore pas la fonctionnalité du raccourci lui-même, mais c’est plus joli.

Ce qui a commencé comme une expérience pour comprendre comment une fonctionnalité de raccourcis fonctionnait dans les coulisses s’est transformé en raccourci personnalisé le plus complexe que j’ai jamais créé (il est composé de 224 actions). Que vous souhaitiez gagner du temps pour lancer votre application préférée, exécuter un raccourci personnalisé ou entrer en contact avec un être cher, ce raccourci devrait vous aider en facilitant la création d’autant d’icônes d’écran d’accueil que vous le souhaitez. Je suis très heureux de la façon dont ce raccourci s’est avéré et, comme toujours, j’écoute vos commentaires et vos questions. Vous pouvez télécharger le raccourci ci-dessous.

Créateur d’icônes de l’écran d’accueil

Créez une icône personnalisée sur votre écran d’accueil iOS pour n’importe quel schéma d’URL d’application, raccourci, contact ou couleur unie. Ce raccourci utilise la même technique que l’application Raccourcis d’Apple pour enregistrer une icône sur l’écran d’accueil, mais l’étend avec la possibilité de personnaliser complètement le lanceur, y compris les icônes et les images de lancement.

Obtenez le raccourci ici.

  1. L’idée serait : les applications les plus utilisées dans le dock et le côté gauche de l’écran ; dossiers fréquemment consultés sur la droite. Bien sûr, en raison de la façon dont la rotation de l’écran d’accueil iOS fonctionne sur iPad, cette mise en page est complètement foiré en portrait. Je m’en fous parce que j’utilise mon iPad Pro en mode paysage la plupart du temps de toute façon. ↩ ︎
  2. La solution de contournement pour convertir un code couleur en fichier image dans Raccourcis est amusante : le raccourci assemble une page HTML avec une couleur d’arrière-plan personnalisée, qui est imprimé au format PDF, puis converti en image — le tout sans afficher d’interface utilisateur à l’utilisateur. Merci, moteur Content Graph. ↩ ︎
  3. À l’exception de l’iPad en mode portrait. Je vais probablement ajouter du soutien pour cela à l’avenir. ↩ ︎

Articles similaires

Lire aussi x

Show Buttons
Hide Buttons